CSS 배경 이미지 alt 속성

이것은 내가 전에 다룰 필요가 없었던 것입니다. CSS background-image 속성에서 사용하는 이미지를 포함하여 사이트의 모든 이미지에 alt 태그를 사용해야합니다.

내가 아는 한 이와 같은 CSS 속성이 없으므로 가장 좋은 방법은 무엇입니까?

배경 이미지는 확실히 데이터를 나타낼 수 있습니다! 실제로 이것은 시각적 아이콘을 제시하는 것이 동등한 텍스트 블 러브 목록보다 더 간결하고 사용자 친화적 인 경우에 종종 권장됩니다. 이미지 스프라이트를 사용 하면이 접근 방식의 이점을 얻을 수 있습니다.

호텔 목록 아이콘이 편의 시설을 표시하는 것은 매우 일반적입니다. 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 속성과 거의 동일한 용도로 사용됩니다.

표제

title 속성의 값은 다양한 방식으로 사용자 에이전트에 의해 렌더링 될 수 있습니다. 예를 들어, 시각적 브라우저는 제목을 "도구 설명"(포인팅 장치가 개체 위에 멈출 때 나타나는 짧은 메시지)으로 자주 표시합니다. 오디오 사용자 에이전트는 유사한 맥락에서 타이틀 정보를 말할 수 있습니다. 예를 들어 링크에 속성을 설정하면 사용자 에이전트 (시각적 및 비 시각적)가 사용자에게 링크 된 리소스의 특성을 알릴 수 있습니다.

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>