Accessibility 본문

1.1.1 적절한 대체 텍스트 제공

텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.

필요성

시각장애인의 경우 PC web 콘텐츠를 화면낭독 프로그램에서 제공하는 음성읽기 기능을 활용하여 콘텐츠 정보를 인식할 수 있다. 하지만, 해당 콘텐츠를 텍스트 아닌 콘텐츠로 제공하면서 대체 텍스트를 함께 제공하지 않으면 시각장애인은 잘못된 정보를 얻거나 전혀 정보를 얻을 수 없다.

대상

  • 전맹
  • 저시력

적용기술

  • <img>, <input type="image">, <area>, <applet> : alt 속성으로 의미나 용도를 이해할 수 있도록 적절한 대체 텍스트 제공
  • 배경이미지 (IR기법) : 의미있는 배경 이미지를 사용하였을 경우, 배경이미지에 대한 대체 텍스트 제공
  • 링크, 버튼 : 용도가 명확한 이미지 링크, 이미지 버튼 등은 핵심기능에 대한 설명을 구체적으로 대체 텍스트 제공(아이콘 포함)
  • 웹 애플리케이션을 제공할 때, 동등한 기능을 수행 할 수 있는 대체 콘텐츠를 함께 제공해야 함

검사방법 및 QA 지표 산정방법

  • 자동 검사 방법 : 접근성 검사 도구를 통한 검사 방법
  • 수동 검사 방법 : 직접 수동으로 확인하는 검사 방법
  • 발견수(건) : 해당 콘텐츠 발견 수
  • 준수수(건) : 준수한 콘텐츠 수
  • 오류수(건) : 오류 콘텐츠(요소 또는 영역) 수
자동검사방법

<img>, <input type="image">, <area>, <applet> 요소의 alt 속성 유무 체크

발견수(건)

<img>, <input type="image">, <area>, <applet> 요소 수

준수수(건)

alt 속성이 있는 <img>, <input type="image">, <area>, <applet> 요소 수

수동검사방법
  • alt 속성 값이 있는 <img>, <input type="image">, <area>, <applet> 요소 중 alt 값을 적절한 대체텍스트로 제공하였는 지 체크
  • IR 기법내 적절한 대체텍스트를 제공 하였는지 체크
적절한 대체 텍스트
오류사례
적절한 대체 텍스트 오류사례이미지
<img src="..." alt="신규 상품평" />
개선방법

대체 텍스트를 이미지 텍스트와 맞게 제공해야 함

<img src="..." alt="상품평" />
우수사례
적절한 대체 텍스트 우수사례이미지
<img ... alt="new" />
오류수(건)
  • alt 속성 값이 적절하지 않은 <img>, <input type="image">, <area>, <applet> 요소 수
  • IR 기법 내에 대체텍스트가 적절하지 않은 콘텐츠 수
평가 점수

((자동 준수수 - 1 수동 오류수) / 자동 발견수) * 100 - (2 수동 오류수 * 5)점

사례

이미지, <input type="image">, <area> 대체 텍스트 사례
오류사례

적절하지 않은 대체텍스트가 사용되었으며, gmarket 으로 잘못 제공됨

대체텍스트 오류사례이미지
<img ... alt="gmarket">
개선방법

이미지 콘텐츠를 용도와 의미에 맞게 모두 대체 텍스트로 제공해야 함

<img ... alt="오늘만 특가 1. 9,999원 부티/플랫샌들. G마켓">
우수사례

이미지에 대한 적절한 대체 텍스트 제공

대체텍스트 우수사례이미지
<img ... alt="3일 오전 여의도 거리로 나선 여성장애인. 여성장애인도 유권자임을 강조하며 참정권 확보를 주장했다. ⓒ에이블뉴스">
배경이미지 대체 텍스트 사례
오류사례

배경이미지로 사용된 콘텐츠 대체 텍스트 미제공

배경이미지 대체텍스트 오류사례이미지
<div class="Notice"></div>
개선방법

이미지 콘텐츠를 용도와 의미에 맞게 모두 대체 텍스트로 제공

<div class="Notice">Daum 고객센터에서 알려드립니다.</div>
우수사례

배경이미지에 대한 적절한 대체 텍스트 제공

배경이미지 대체텍스트 우수사례이미지
<h1><a ...>Daum</a></h1>
<h2>Daum에서 제공하는 인터넷 익스플로러 9으로 더욱 안전하고 빠른 웹 환경을 경험하세요!</h2>

참고 URL : http://promotion.daum.net/ie9/ie9.html?t__nil_start=promotion