[html] CSS 배경 이미지 alt 속성

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

호텔 목록 아이콘이 편의 시설을 표시하는 것은 매우 일반적입니다. 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 속성을 사용하여 페이지의 중요한 섹션을 놓치지 않도록합니다.

답변

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

<div class"ir background-image">Your alt text</div>

/* ==========================================================================
   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%;
}

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

<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 */
}