웹 접근성 지침(KWCAG에 대해) - 1 / 적절한 대체 텍스트 제공
텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.
준수 사례
텍스트가 있는 이미지를 이미지 요소로 마크업할 때 대체 텍스트는 이미지 요소의 alt 속성에 적용하면 된다.
비장애인들은 이미지를 보면 시각적으로 내용 인식이 가능하지만 시각적으로 인식이 불가능한 사용자를 위해 청각적으로 내용을 인식할 수 있도록 보는 것과 듣는 것이 같게끔 대체 텍스트를 제공해야 한다.
img 요소 뿐만 아니라 input의 type이 image이거나 button인 경우, 또는 이미지맵의 area에도 대체 텍스트가 존재한다면 alt로 제공하면 된다.
대체 텍스트가 너무 긴 경우에는 이미지에는 대체 텍스트를 빈 값으로 제공하고 대체 텍스트를 마크업으로 제공하는 방법도 있다.
이미지 내부의 콘텐츠가 구조적 마크업으로 표현 가능할 때(예를 들어 리스트로 표현이 가능할 때)는 이런 식으로 마크업을 통해 대체 텍스트를 제공해주는 것이 좋다.
여기서 주의할 점은 해당 마크업을 보이지 않게 처리할때 'display: none'이나 'visibility: hidden'을 사용하면 스크린 리더가 읽어주지 않기 때문에 다른 방법으로 보이지 않게 처리해야 한다.
데이터 차트나 복잡한 콘텐츠도 사용자가 해당 콘텐츠의 의미를 충분히 파악할 수 있도록 대체 텍스트를 제공해야 한다.
위의 이미지에서는 콘텐츠가 데이터 차트 이미지이기 때문에 테이블 마크업으로 대체 텍스트를 제공하고 있다.
의미 있는 이미지의 경우에도 대체 텍스트를 시각적으로 보는 것과 동일하게 제공해야 한다.
의미 있는 이미지가 이미지 요소가 아닌 배경 이미지로 처리된 경우에도 위와 같이 대체 텍스트를 제공해야 한다.
이미지 요소에 alt속성을 아예 제공하지 않으면 스크린 리더는 이미지의 파일 명을 읽게 된다.
또한 alt속성을 제공하지만 alt값에 띄어쓰기가 하나라도 있으면 마찬가지로 스크린 리더가 이미지의 파일 명을 읽는다.
따라서 단순히 장식이나 시각적인 형태를 위해 사용되는 콘텐츠의 경우 대체 텍스트를 공백 문자, alt를 빈 값으로 제공해야 한다.
이모티콘의 경우 모든 이모티콘의 대체 텍스트를 '이모티콘'이라고 하지 말고 이모티콘을 잘 설명해주는 대체 텍스트를 제공해야 한다.
QR코드의 경우 시각적으로 인식할 수 없는 사용자들을 위해 해당 링크의 주소를 알 수 있도록 대체 텍스트를 제공해야 한다.
썸내일 이미지와 텍스트를 각각 링크로 구현하는 경우 이미지의 대체 텍스트와 링크 텍스트가 중복되기 때문에
이미지와 텍스트를 하나의 링크로 묶어주고 대체 텍스트가 이미 존재하기 때문에 alt를 빈 값으로 제공해주는 것이 좋다.
캡차란 사용자가 실제 사람인지 컴퓨터 프로그램인지를 구별하기 위해 사용되는 방법이다.
캡차 이미지에 대체 텍스트로 이미지에 있는 텍스트를 제공하면 정답을 알려주는 것이 되므로
캡차 이미지에는 대체 텍스트로 '캡차' 또는 '보안 문자'라고 제공하고 따로 음성으로 들을 수 있도록 청각적 캡차를 사용해야 한다.
사용자가 업로드하는 이미지의 경우 사용자가 직접 대체 텍스트를 입력할 수 있도록 안내와 함께 툴을 제공해야 한다.
부스트 코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/web344
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org
'공부 > 웹 UI 개발' 카테고리의 다른 글
| 웹 접근성 지침(KWCAG에 대해) - 4 / 명확한 지시 사항 제공 (0) | 2023.03.13 |
|---|---|
| 웹 접근성 지침(KWCAG에 대해) - 3 / 색에 무관한 콘텐츠 인식 (0) | 2023.03.13 |
| 웹 접근성 지침(KWCAG에 대해) - 2 / 자막 제공 (0) | 2023.03.13 |
| 웹 접근성 지침(KWCAG에 대해) - 0 (0) | 2023.03.13 |
| 웹 접근성 (0) | 2023.03.13 |
