1.1 적절한 대체 텍스트 제공

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

필요성

시각장애인은 Mobile Web 콘텐츠를 Mobile 접근성 도구에서 제공하는 화면 낭독 기능을 활용하여 콘텐츠 정보를 인식할 수 있다. 하지만 해당 콘텐츠를 텍스트 아닌 콘텐츠로 제공하면서 대체 텍스트를 함께 제공하지 않으면 시각장애인은 잘못된 정보를 얻거나 전혀 정보를 얻을 수 없다.

대상

• 전맹
• 저시력

적용기술

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

본 "적절한 대체 텍스트 제공" 검사항목 진행 시, "적절한 링크 텍스트" 검사항목 확인 가능함으로 함께 진행함

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

자동 검사방법

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

수동 검사방법

alt 속성값이 있는 <img>, <input type="image">, <area>, <applet> 요소 중 alt 값을 적절한 대체텍스트로 제공하였는지 체크

적절한 대체 텍스트

오류사례

<img src="..." alt="신규 상품평" />

개선방법

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

<img src="..." alt="상품평" />

우수사례

<img ... alt="new" />

오류수(건)

• alt 속성값이 적절하지 않은 <img>, <input type="image">, <area>, <applet> 요소 수
• IR 기법 내에 적절하지 않은 콘텐츠 수

사례

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

오류사례

각 쇼핑몰의 로고 이미지에 alt 값이 없음

<img src="..." />

개선방법

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

<img src="..." alt="G마켓" />
<img src="..." alt="AUCTION" />
...

우수사례

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

text

<img ... alt="상지도수근력검사로 인해 전동스쿠터를 처방받은 서동엽씨. 실제 전동스쿠터를 사용하지 못해 내구연한이 지난 낡은 전동휠체어를 타고 있다. ⓒ에이블뉴스" />

※출처 : http://darum.daum.net