배경 이미지는 확실히 데이터를 나타낼 수 있습니다! 실제로 이것은 시각적 아이콘을 제시하는 것이 동등한 텍스트 블 러브 목록보다 더 간결하고 사용자 친화적 인 경우에 종종 권장됩니다. 이미지 스프라이트를 사용 하면이 접근 방식의 이점을 얻을 수 있습니다.
호텔 목록 아이콘이 편의 시설을 표시하는 것은 매우 일반적입니다. 50 개의 호텔과 각 호텔에 10 개의 편의 시설이있는 페이지를 상상해보십시오. CSS Sprite는 이런 종류의 작업에 적합합니다. 더 빠르기 때문에 더 나은 사용자 경험을 제공합니다. 그러나 이러한 이미지에 대해 ALT 태그를 어떻게 구현합니까? 예제 사이트 .
대답은 alt텍스트를 전혀 사용하지 않고 대신 title포함하는 div 의 속성을 사용한다는 것입니다.
HTML
<div class="hotwire-fitness" title="Fitness Centre"></div>
CSS
.hotwire-fitness {
float: left;
margin-right: 5px;
background: url(/prostyle/images/new_amenities.png) -71px 0;
width: 21px;
height: 21px;
}
W3C (위의 링크 참조)에 따르면 title 속성은 alt 속성과 거의 동일한 용도로 사용됩니다.
표제
타이틀 속성의 값은 다양한 방식으로 사용자 에이전트에 의해 렌더링 될 수 있습니다. 예를 들어, 비주얼 브라우저는 종종 제목을 "도구 설명"(포인팅 장치가 개체 위에 멈출 때 나타나는 짧은 메시지)으로 표시합니다. 오디오 사용자 에이전트는 유사한 맥락에서 타이틀 정보를 말할 수 있습니다. 예를 들어 링크에 속성을 설정하면 사용자 에이전트 (시각적 및 비 시각적)가 사용자에게 링크 된 리소스의 특성을 알릴 수 있습니다.
alt
-------------------alt 속성은 태그 세트 (즉, img, area 및 선택적으로 입력 및 애플릿 용)에 정의되어 객체에 해당하는 텍스트를 제공 할 수 있습니다.
동등한 텍스트는 다음과 같은 일반적인 상황에서 웹 사이트와 방문자에게 다음과 같은 이점을 제공합니다.
- 오늘날 웹 브라우저는 매우 다양한 용량의 매우 다양한 플랫폼에서 사용할 수 있습니다. 일부는 이미지를 전혀 표시 할 수 없거나 제한된 유형의 이미지 만 표시합니다. 일부는 이미지를로드하지 않도록 구성 할 수 있습니다. 코드에 이미지에 alt 속성이 설정되어있는 경우 대부분의 브라우저는 이미지 대신 사용자가 제공 한 설명을 표시합니다.
- 방문자 중 일부는 시각 장애인, 색맹, 시력이 낮은 이미지를 볼 수 없습니다. alt 속성은 페이지에있는 내용을 잘 이해하기 위해이 속성에 의존 할 수있는 사람들에게 큰 도움이됩니다.
- 검색 엔진 봇은 위의 두 가지 범주에 속합니다. 웹 사이트를 인덱싱 할 가치가있는만큼 색인화하려면 alt 속성을 사용하여 페이지의 중요한 섹션을 놓치지 않도록합니다.
이 Yahoo 개발자 네트워크 ( 아카이브 된 링크 ) 기사에서는 img 요소 및 alt 속성 대신 배경 이미지를 반드시 사용해야하는 경우 다음과 같이 ARIA 속성을 사용하는 것이 좋습니다.
<div role="img" aria-label="adorable puppy playing on the grass">
...
</div>
이 기사의 사용 사례는 모바일 장치에서 성능이 크게 향상 되었기 때문에 Flickr가 배경 이미지를 사용하기로 선택한 방법을 설명합니다.
-------------------Christian Heilmann 의이 게시물 을 읽어야한다고 생각합니다 . 그는 배경 이미지는 미학 만을 위한 것이며 데이터를 표시하는 데 사용해서는 안되며 따라서 모든 이미지가 대체 텍스트를 가져야한다는 규칙에서 제외된다고 설명합니다.
발췌 (강조 내) :
문서 자체의 시각적 내용이 아닌 미적 가치만을 정의하는 CSS 배경 이미지 . 의미가있는 페이지에 이미지를 넣어야하는 경우 IMG 요소를 사용하고 alt 속성에 대체 텍스트를 제공하십시오.
나는 그와 동의합니다.
-------------------다른 답변에서 언급했듯이 img 태그에만 div 태그에 대한 (지원되는) alt 속성이 없습니다.
진짜 질문은 사이트의 모든 배경 이미지 에 alt 속성을 추가해야하는 이유 입니다. 이 답변을 바탕으로 접근 방식에서 어떤 경로를 선택할지 결정하는 데 도움이됩니다.
시각적 / 텍스트 : 이미지가로드되지 않는 경우 사용자를 위해 단순히 텍스트 대체를 추가하려는 경우 title 속성을 사용하면됩니다. 대부분의 브라우저는 사용자가 이미지 위로 마우스를 가져 가면 시각적 도구 설명 (메시지 상자)을 제공하며, 어떤 이유로 든 이미지가로드되지 않으면 이미지가 실패 할 때 텍스트를 표시하는 alt 속성과 동일하게 작동합니다. 이 기술을 사용하면 이미지를 배경으로 설정하여 사이트에서로드 시간을 단축 할 수 있습니다.
화면 판독기 : 도로 옵션의 중간입니다. 기술적으로 이미지를 배경으로 유지하고 제목 속성 접근 방식을 사용하는 것은 위에서 "오디오 사용자 에이전트가 비슷한 맥락에서 제목 정보를 말할 수 있습니다."에서 언급 한대로 작동해야하기 때문 입니다. 그러나 이것이 모든 경우에 작동한다고 보장되지는 않습니다. 일부 독자는 모두 함께 무시할 수 있습니다. 이 접근 방식을 선택한 경우 aria-labels를 추가하여 스크린 리더가이를 선택하도록 할 수도 있습니다.
SEO / 검색 엔진 : 여기에 큰 것이 있습니다. 저와 같으면 배경 이미지를 추가했습니다. 모두 좋았습니다. 그런 다음 몇 달 후 고객 (또는 자신)은 이미지에 대한 alt가 없어서 일부 주요 SEO 금을 놓치고 있다는 것을 깨달았습니다. 명심이, title 속성은 검색 엔진에 어떤 무게가없는 내 연구에서, 여기 기사에서 언급 한 바와 같이 : https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /. 따라서 SEO를 목표로하는 경우 alt 속성이있는 img 태그가 있어야합니다. 한 가지 가능한 접근 방식은 alt 속성이있는 매우 작은 실제 이미지를 사이트에로드하는 것입니다. 이렇게하면 모든 SEO를 얻을 수 있고 기존 CSS를 제자리에 다시 조정할 필요가 없습니다. 그러나 이것은 크기에 따라 추가로드 시간으로 이어질 수 있으며 Google은 실제로 인덱싱 할 때 이미지 경로를 확인합니다. 요컨대이 길을 가고 있다면해야 할 일을 받아들이고 배경을 사용하는 대신 실제 이미지를 포함하십시오.
-------------------일반적인 믿음은 의미있는 의미 값을 가진 사물에 배경 이미지를 사용해서는 안되므로 해당 이미지와 함께 대체 데이터를 저장하는 적절한 방법이 없다는 것입니다. 중요한 질문은 대체 데이터로 무엇을 할 것인가? 이미지가로드되지 않는 경우 표시 하시겠습니까? 페이지의 일부 프로그래밍 기능에 필요합니까? 의미가없는 (오류를 일으킬 수있는) CSS 속성을 구성하여 임의로 데이터를 저장하거나 이미지와 alt 태그가있는 숨겨진 이미지를 추가 한 다음 배경 이미지가 필요할 때 alt 이미지를 비교할 수 있습니다. 경로를 지정한 다음 필요한 것을 시뮬레이션하기 위해 일부 사용자 지정 스크립트를 사용하여 원하는 데이터를 처리합니다. 그래도 브라우저가 배경 이미지에 대한 일종의 alt 속성을 자동으로 처리하도록 할 방법은 없습니다.
-------------------이를 달성하는 고전적인 방법은 텍스트를 div에 넣고 이미지 대체 기술을 사용하는 것입니다.
<div class"ir background-image">Your alt text</div>
배경 이미지를 사용하여 배경 이미지를 할당하는 클래스와 ir는 아래의 HTML5boilerplates 이미지 대체 클래스가 될 수 있습니다.
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
W3C의이 기사는 그들이 당신이 무엇을해야한다고 생각하는지 알려줍니다. https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage
여기에 예제가 있습니다. http://mars.dequecloud.com/demo/ImgRole.htm
그중
<a href="http://www.facebook.com">
<span class="fb_logo" role="img" aria-label="Connect via Facebook">
</span>
</a>
그래도 위의 예에서와 같이 배경 이미지를 포함하는 요소가 빈 컨테이너 인 경우 개인적으로 여기에 텍스트를 넣고 CSS를 사용하여 숨기는 것을 선호합니다. 대신 이미지를 표시하는 위치 :
<a href="http://www.facebook.com"><span class="fb_logo">
Connect via Facebook
</span></a>
.fb_logo {
height: 37px; width: 37px;
background-image: url('../gfx/logo-facebook.svg');
color:transparent; overflow:hidden; /* hide the text */
}
이 유형의 문제에 대한 해결책은 다음과 같습니다.
CSS에서 새 클래스를 만들고 화면 밖으로 배치합니다. 그런 다음 배경 이미지를 호출하는 속성 바로 앞에 HTML로 대체 텍스트를 넣습니다. 어떤 태그가 될 수, H1, H2, p, 등
CSS
<style type="text/css">
.offleft {
margin-left: -9000px;
position: absolute;
}
</style>
HTML
<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image> </div>
당신이 원하는 것이 무엇인지는 분명하지 않습니다.
CSS 속성이 alt 속성 값을 렌더링하도록하려면 다음과 같은 CSS 속성 함수 를 찾고있을 수 있습니다 .
IMG:before { content: attr(alt) }
배경 이미지에 alt 속성을 넣으려면 ... alt 속성은 HTML 속성이고 배경 이미지는 CSS 속성이기 때문에 이상합니다. HTML alt 속성을 사용하려면 해당 HTML 요소가 필요하다고 생각합니다.
왜 "배경 이미지에 alt 태그를 사용해야합니까?"이것은 의미 론적 이유 때문입니까 아니면 시각적 효과 때문입니까 (그렇다면 어떤 효과 또는 이유)?
-------------------이미지가 나타날 때 alt태그를 삽입 div하면됩니다.
예:
<div id="yourImage" alt="nameOfImage"></div>
출처
https://stackoverflow.com/questions/22049911