CSS 배경 이미지 대체 속성

CSS 배경 이미지 대체 속성

---

이것은 내가 전에 다루지 않는 것입니다. CSS background-image 속성에 사용되는 이미지를 포함하여 사이트의 모든 이미지에 alt 태그를 지정합니다.

내가 아는 한 이와 같은 CSS 속성이 격리를 수행하는 가장 좋은 방법은 무엇입니까?

---

배경 이미지는 반드시 데이터를 표현할 수 있습니다! 더 사용하기 쉬운 경우에는 더 사용하기 쉽습니다. 이미지 스프라이트를 사용 하면 접근 방식의 이점이 있습니다.

호텔 목록 아이콘이 편의 시설을 표시하는 것이 일반적입니다. 50 개의 호텔을 사용하는 페이지와 각 호텔에 10 개의 편의 시설이 존재하는 상상해. CSS Sprite는 이런 종류의 작업에 적합합니다. 더 빠르기 때문에 더 나은 사용자 경험입니다. 그러나 ALT 태그를 어떻게 구현합니까? 사이트 예 .

대답은 텍스트를 전혀 사용하지 않고 div 의 속성을 사용하지 않고 포함 합니다.alttitle

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 속성은 객체에 해당하는 텍스트를 제공 할 수 있습니다. 태그 세트 (즉, img, area 및 선택적으로 입력 및 애플릿에)로 정의됩니다.

텍스트에 같은 내용하는 내용은 다음과 일반적인 상황에서 웹 사이트 및 해당 방문자에게 다음과 같은 이점을 제공합니다.

• 라이센스 웹 브라우저는 용량이 매우 다양합니다. 일부는 이미지를 전혀 표시 할 수없는 유형의 이미지 세트 만 표시 할 수 없습니다. 일부는 이미지를로드하지 않아도 구성 할 수 있습니다. 코드에 이미지에 alt 속성이 설정되어 있으면 브라우저에 이미지 대신 제공되는 설명이 표시됩니다.
• 방문자 중 일부는 이미지를 볼 수 없습니다. 시각 장애인, 시각 장애인, 시력이 좋지 않은 사람; alt 속성은 페이지에 무엇이 있는지 잘 알고 자하는 사람들에게 큰 도움이됩니다.
• 검색 엔진 봇은 위의 두 가지 범주에 속합니다. 웹 사이트를 인덱싱하고 자격을 갖추어야합니다.

---

Christian Heilmann이 글 을 읽어야합니다 . 그는 배경 이미지는 미적 용도 로만 사용하는 데이터를 표현하는 데 사용되는 모든 이미지에 대체 텍스트가 고정 규칙에서 제외됩니다.

발췌 (강조 광산) :

CSS 배경 이미지는 문서 자체의 내용 내용이 아닌 심미적 가치만을 의미합니다 . 의미가있는 페이지에 이미지를 넣어야하는 경우 IMG 요소를 사용하고 alt 속성에 대체 텍스트를 제공하십시오.

나는 그에게 동의한다.

---

이 야후 개발자 네트워크 ( 보관 된 링크 ) 기사 에서 IMG 요소 및 ALT 대신 배경 이미지 속성를 반드시 사용해야하는 경우 다음과 같이 ARIA 속성을 사용하는 것이 좋습니다.

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

이 기사의 유스 케이스는 모바일 디바이스에서 성능이 크게 향상 되었기 때문에 Flickr가 백그라운드 이미지를 사용하기로 선택한 방법을 설명합니다.

---

이전 답변에서 언급했듯이 img 태그에 댓글 div 태그에 대한 (지원되는) alt 속성이 있습니다.

실제 질문은 왜 사이트의 모든 배경 이미지 에 alt 속성을 추가해야 합니까? 이 답변을 바탕으로 접근 할 경로를 결정하는 데 도움이됩니다.

/ 텍스트 : 텍스트 사용자에게 텍스트 대체를 추가하려는 경우 제목 속성을 사용하십시오. 대부분의 브라우저는 사용자가 이미지를 가리킬 때 사용하는 도구 설명 (테두리 상자)을 제공하며 어떤 이미지가로드되지 않는 이미지가 실패 할 때 텍스트를 표시하는 대체 속성과 동일하게 동작합니다. 이 기술을 사용하면 이미지를 배경으로 설정하여 사이트에서로드 시간을 단축 할 수 있습니다.

화면으로 기 : 도로 옵션의 중간에는 기술적으로 이미지를 배경으로 유지하고 제목 속성 접근 방식을 사용하여 언급 한대로 "오디오 사용자 에이전트가 어느 상황에서 제목 정보를 말할 수 있습니다." 그러나 일부 독자가 함께 무시할 수도 있습니다. 선택할 수 있습니다. 아리아 레이블을 추가하여 붙잡을 수 있도록하거나 배경을 실제 이미지로 대체하여 안전 할 수도 있습니다.

SEO / 검색 엔진 : 여기 큰 이미지가 있습니다. 나와 같은 경우 배경 이미지를 추가하면 좋았습니다. 몇 달 후 고객 (또는 아마도 당신 자신)은 당신이 당신의 이미지를 대체하지 않는 서구 골드가 부족하다는 것을 깨달았습니다. 명심이, title 속성은 검색 엔진에 어떤 무게가없는 내 연구에서, 여기 기사에서 언급 한 바와 같이 : https://www.searchenginejournal.com/how-to-uselink-title-attribute-correctly / . 따라서 SEO를 목표로하는 경우 alt 속성을 img 태그가 있어야합니다. 가능한 접근 방법 중 하나는 사이트에 alt 속성으로 매우 작은 실제 이미지를로드하는 것입니다. 이렇게하면 모든 SEO를 얻을 수있는 기존 CSS를 다시 필요가 없습니다. 그러나 이는 크기에 따라 추가로드 시간을 초래할 수 있으며 Google은 색인 생성시 실제로 이미지를 확인합니다. 간단히 말해서이 경로로가는 경우에 수행해야 할 작업을 수락하고 배경을 사용하는 대신 실제 이미지를 포함하십시오.

---

이를 달성하는 고전적인 방법은 텍스트를 div에 다수 교체 기술을 사용하는 것입니다.

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

background-image를 사용하면 배경 이미지를 할당하는 클래스가되고 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%;
}

---

The general belief is that you shouldn't be using background images for things with meaningful semantic value so there isn't really a proper way to store alt data with those images. The important question is what are you going to be doing with that alt data? Do you want it to display if the images don't load? Do you need it for some programmatic function on the page? You could store the data arbitrarily using made up css properties that have no meaning (might cause errors?) OR by adding in hidden images that have the image and the alt tag, and then when you need a background images alt you can compare the image paths and then handle the data however you want using some custom script to simulate what you need. 그래도 브라우저가 배경 이미지에 대한 일종의 alt 속성을 자동으로 처리하도록 만드는 방법은 없습니다.

---

이 유형의 문제에 대한 해결책은 다음과 같습니다.

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>

---

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 속성이 alt 속성 값을 렌더링하도록하려면 다음과 같은 CSS 속성 함수 를 찾고있을 수 있습니다 .

IMG:before { content: attr(alt) }

배경 이미지에 alt 속성을 넣으려면 ... alt 속성은 HTML 속성이고 배경 이미지는 CSS 속성이기 때문에 이상합니다. HTML alt 속성을 사용하려면 해당 HTML 요소가 필요하다고 생각합니다.

"배경 이미지에 대체 태그를 사용해야"하는 이유는 무엇입니까? 의미 론적 이유 때문입니까 아니면 시각적 효과 때문입니까 (그렇다면 어떤 효과 또는 이유)?

---

이미지가 나타날 때 alt태그를 삽입 div하면됩니다.

예:

<div id="yourImage" alt="nameOfImage"></div>

참고 URL : https://stackoverflow.com/questions/4216035/css-background-image-alt-attribute