알트 속성

alt attribute

alt 속성은 HTML 및 XHTML 문서에서 적용되는 요소를 렌더링할 수 없을 때 렌더링할 대체 텍스트(alt text)를 지정하기 위해 사용되는 HTML 속성이다.

alt 속성은 "스크린 리더" 소프트웨어에 의해 사용되어 웹 페이지의 내용을 듣고 있는 사람(예: 시각장애자)이 이 요소와 상호 작용할 수 있다.또한 텍스트로 복사 붙여넣을 때 이미지를 대체하고 이미지를 기계 판독이 가능하도록 만들어 검색 엔진 최적화를 개선한다.[1]모든 이미지에는 액세스할 수 있는 Alt 속성이 있어야 하지만 텍스트를 포함할 필요는 없다.비어 있거나 null 속성일 수 있음:alt="".[2]

이 속성은 텍스트 기반 브라우저를 지원하기 위해 HTML 1.2 초안에 도입되었고 HTML 4.01에서는 이 브라우저를 위해 필요했다.img그리고area 태그.[4] 이 태그는 다음 항목에 대해 선택 사항이다.input술래잡기와 불용자. applet꼬리표를 달다

예

In the sky flies a red flag with a white cross whose vertical bar is shifted toward the flagpole.

여기 알트 속성이 "하늘에 깃대 쪽으로 수직 막대가 이동되는 흰색 십자가가 달린 붉은 깃발을 날린다"는 이미지가 있다.

이 이미지의 HTML은 다음과 같은 것일 수 있다.

<img  알트="하늘에는 세로 막대가 깃대 쪽으로 옮겨진 하얀 십자가가 달린 붉은 깃발을 펄럭인다." src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Dannebrog.jpg/180px-Dannebrog.jpg">
이 단락은 이미지 대신 alt 텍스트를 표시하는 텍스트 기반 Lynx 웹 브라우저에서 볼 수 있다.

Orca와 같은 화면 판독기를 사용하는 시각 장애인 독자는 이미지 대신에 alt 텍스트를 들을 것이다.링스 같은 텍스트 기반 웹 브라우저에는 이미지 대신 alt 텍스트가 표시된다.그래픽 브라우저는 일반적으로 영상만 표시하며, 사용자가 이미지의 속성을 표시하도록 요청하거나 이미지를 표시하지 않도록 브라우저를 구성한 경우에만 Alt 텍스트를 표시하거나 브라우저가 이미지를 검색하거나 디코딩할 수 없는 경우에만 표시한다.

대체 alt 속성 값은 "덴마크 국기"가 될 것이다.

일반적인 오해

그alt속성이 항상 말 그대로 이미지의 내용을 설명할 필요는 없다.이미지의 목적과 맥락, 그리고 그것을 볼 수 없는 사람에게 무엇이 유용할 것인가를 명심하라.alt 속성은 일반적으로 그 목적을 나타내는 이미지의 대안이 되어야 한다.예를 들어 경고 기호의 이미지에는 "노란색 배경, 검은색 테두리, 느낌표가 있는 삼각형"이라는 알트 텍스트가 아니라 "경고!"라고만 표시되어야 한다.—물론 이 이미지의 목적이 경고 기호가 실제로 어떻게 보이는지 보여주는 것이 아니라면.

IE7은 Alt 속성을 툴팁으로 렌더링한다.

Internet Explorer 7 이하에서는 alt 속성의 텍스트를 표준에 맞지 않는 도구 설명 텍스트로 렌더링한다.[5][6]이러한 행동으로 인해 많은 웹 개발자들은 이미지들에 대한 추가 정보가 들어 있는 툴팁을 표시하고자 할 때 alt를 사용하지 않고 오용하게 되었다.[7]title그러한 용도로 의도된 [8]속성Internet Explorer 8에서 alt 속성은 더 이상 툴팁으로 렌더링되지 않는다.[9]

alt 속성은 일반적으로 "alt tag"[6][10][11]라고 하지만 부정확하다.

장식 이미지

W3C는 정보를 전달하지는 않지만 순전히 장식적인 이미지를 HTML 마크업이 아닌 CSS에 명시할 것을 권고한다.[12]단, HTML로서 장식적인 이미지를 포함할 필요가 있을 때도 있다.img이 경우, 이미지가 실제로 콘텐츠에 추가되지 않는 경우, 빈 alt 속성이 다음 형식에 포함되어야 한다.alt=""이렇게 하면 화면 판독기 또는 그래픽이 아닌 브라우저 사용자가 페이지를 탐색할 수 있다.(표준을 위반하여) alt 속성이 제공되지 않은 경우, 이미지를 표시할 수 없는 브라우저에는 이미지의 URL 또는 고정 텍스트 문자열과 같은 것이 계속 표시된다.

참고 항목

메모들

  1. ^ "Google Images SEO Best Practices Search Central".
  2. ^ "대체 텍스트" WebAIM은 2015년 9월 3일에 마지막으로 업데이트되었다.
  3. ^ Berners-Lee, Tim; Connolly, Daniel (June 1993). "Hypertext Markup Language (HTML) Internet Draft version 1.2". IETF IIIR Working Group. Retrieved 18 September 2010.
  4. ^ "13 Objects, Images, and Applets". World Wide Web Consortium. 24 December 1999.
  5. ^ "Why doesn't Mozilla display my alt tooltips?". Archived from the original on 15 October 2008. Retrieved 22 July 2009.
  6. ^ a b Anne van Kesteren (16 December 2004). "Alt attribute (alt tag, alt tooltip)". Retrieved 22 July 2009.
  7. ^ Bug 25537 - Alt 텍스트가 <img>, Mozilla bugzilla 위에 도구 설명으로 표시되지 않음
  8. ^ W3C HTML WG (24 December 1999). "7.4.3 The title attribute". HTML 4.01 Specification. W3C. Retrieved 22 July 2009.
  9. ^ "What's New in Internet Explorer 8 – Accessibility and ARIA". MSDN. Microsoft. Archived from the original on February 28, 2009. Retrieved 22 July 2009.
  10. ^ Roger Johansson (7 November 2005). "It's alt attribute, not alt tag". 456 Berea Street. Archived from the original on 8 June 2009. Retrieved 22 July 2009.
  11. ^ Tommy Olsson (20 July 2004). "Alt tags". The Autistic Cuckoo. Archived from the original on 25 December 2007. Retrieved 22 July 2009.
  12. ^ W3C. "Embedded content - HTML 5".

참조

외부 링크