“Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols, or simpler language.”
•
이미지
•
버튼과 같은 상호작용 가능안 요소
•
차트, 다이어그램과 같은 infographics
•
장식 및 예시 이미지
◦
이 요소들은 screen readers가 읽을 수 있도록 대체 텍스트 요소들을 필요로 한다.
•
HTML에서 흔한 방법 중 하나는 이미지 태그에 alt attribute를 제공 → 모두(대부분)의 브라우저와 assistive tetchonologies에서 지원하는 방법이다.
•
대체 텍스트는 짧고 간결해야 한다.
◦
Keep your alternative text as short as possible, while still being descriptive. If you need more characters, use caption text or further describe the image in the main text area on the page.
이미지의 목적 파악
•
Is it decorative? → assisstive technologies로 부터 숨겨야 함
•
Is it informative?
◦
Meaningful, descriptive, does not repeat
◦
차트, 다이어그램과 같은 infographic의 경우 긴 설명을 제공해야 한다.
•
Is it actionable? → 이미지 자체를 설명하는게 아니라 해당 이미지의 기능을 설명해야한다.
예시
Example 1: Pictures in context
•
강아지 사진의 예시로 “어린 강아지”란 alt text가 입력될 수 있지만, 사진이 존재하는 글의 문맥에 따라 강아지의 색 또는 목줄과 같은 부가 설명이 들어갈 수 있다.
Example 2: Functional images
•
이미지 속에 텍스트가 존재하는 기능적 이미지인 경우 텍스트를 설명해줘야 함.
Example 3: Decorative images
•
alt text를 입력하지 않아 assistive technologies들이 무시할 수 있음