대체 텍스트는 해당 콘텐츠의 목적, 내용, 기술과 동일하게 제공되어야 합니다.
기술설명
이 기술의 목적은 '비텍스트 콘텐츠(Non-text content) '와 동일한 목적과 정보를 제공하는 '대체 텍스트'를 만드는 것입니다.
결과적으로 '비텍스트 콘텐츠'를 제거 했을 때 동일한 목적과 정보를 제공하는 '대체 텍스트'가 나와야 합니다.
이는 '대체 텍스트'가 '비텍스트 콘텐츠'의 목적과 내용을 설명할 수 있을 때 가장 좋은 방법입니다.
가능하면 '짧은 대체 텍스트(Short text alternative)'가 목적과 정보를 온전히 전달해야 합니다.
짧은 문구나 문장으로 이를 수행할 수 없다면 '짧은 대체 텍스트'는 간략한 개요를 제공해야 합니다.
그리고 전체 정보를 전달할 수 있는 '긴 대체 텍스트'를 추가로 제공해야 합니다.
'대체 텍스트'는 '비텍스트 콘텐츠'를 대체할 수 있어야 합니다.
'비텍스트 콘텐츠'가 제거하고 '대체 텍스트'가 나와도 동일하 기능과 정보를 제공해야 합니다.
'대체 텍스트'는 간결하면서도 가능한 많은 정보를 제공해야 합니다.
'대체 텍스트'에는 어떤 내용이 들어가야 하는지 질문을 통해 알아봅니다.
- 왜 여기에 텍스트가 아닌 콘텐츠가 있는가?
- 그 콘텐츠는 어떤 정보를 담고 있는가?
- 그 콘텐츠는 어떤 목적을 가지고가?
- 그 콘텐츠를 사용할 수 없다면 동일한 기능 및 내용을 전달하기 위해 어떤 단어를 사용해야 하는가?
‘비텍스트 콘텐츠’에 내용을 이해하는데 중요한 단어가 포함되어 있는 경우, '대체 텍스트'에 그 단어가 포함되어야 합니다.
이미지에 있는 텍스트가 '짧은 대체 텍스트'안에 들어가기에는 너무 긴 경우, '짧은 대체 텍스트'는 짧게 설명해 주어야 하며 '긴 대체 텍스트'를 제공하여 전체 텍스트를 제공해야 합니다.
예시
검색 버튼에 돋보기 아이콘을 사용했습니다. 이 버튼의 대체 텍스트는 '검색'이라고 해야 합니다.
'돋보기'라고 하면 안 됩니다.
매듭 묶는 이미지가 있습니다. 이미지에서는 매듭 줄의 이동 방형을 화살표로 표현하고 있습니다.
대체 텍스트에서는 매듭 묶는 방법을 설명할 뿐 그림이 어떻게 생겼는지는 설명하지 않습니다.
장난감의 정면을 보여주는 이미지가 있습니다. 대체 텍스트에서는 장난감의 정면도를 설명합니다.
타이어 교체 방법을 알려주는 애니메이션이 있습니다. 짧은 대체 텍스트에서는 애니메이션의 내용을 간단히 설명합니다. 긴 대체 텍스트에서는 타이어 교체 방법을 자세히 설명합니다.
테크트론 회사의 로고는 회사에서 만든 제품의 목록에서 제품명 앞에 표시되어 있습니다. 회사 로고의 짧은 대체 테스트는 '테크트론'이라고 되어있습니다.
10월 매출을 보여주는 차트가 있습니다. 짧은 대체 텍스트에는 '10월 매출 차트'라고 되어있습니다. 그리고 차트에 대한 모든 설명을 제공하는 긴 설명도 있습니다.
이미지에 '전쟁의 역사'라는 글자가 있습니다. 이미지의 대체 텍스트는 '전쟁의 역사'입니다.
선반에 정렬된 책 이미지가 있습니다. 책을 선택하면 해당 웹페이지로 이동하는 대화형(=상호작용) 영역입니다.
대체 텍스트의 내용은 다음과 같습니다. '이 섹션에서 구매할 수 있는 책들입니다. 책을 선택하면 자세한 내용을 볼 수 있습니다.' 이미지와 대화형 특성을 살린 내용으로 만들었습니다.
관련기술
- G92: 동일한 목적을 제공하고 동일한 정보를 제공하는 비텍스트 콘텐츠에 대한 긴 설명 제공
- G95: 텍스트가 아닌 콘텐츠에 대한 간략한 설명을 제공하는 짧은 텍스트 대체 제공
- G196: 그룹 이미지 내의 한 항목에 대해 그룹의 모든 항목을 설명하는 텍스트 대체 사용
- H2: 동일한 리소스에 대한 인접한 이미지 및 텍스트 링크 결합
- H24: 이미지 맵의 영역 요소에 대한 텍스트 대체 제공
- H36: 제출 버튼으로 사용되는 이미지에 alt 속성 사용
- H35: 애플릿 요소에 텍스트 대체 제공
- H37: img 요소에 alt 속성 사용
- H53: 객체 요소의 본문 사용
- H86: ASCII 아트, 이모티콘 및 leetspeak에 대한 텍스트 대체 제공
점검절차
1. 텍스트가 아닌 콘텐츠를 제거, 숨김, 마스크 등으로 보이지 않게 합니다.
2. 대체 텍스트가 나오게 합니다.
3. 대체 텍스트가 콘텐츠의 목적과 정보를 동일하게 제공하는지 확인합니다.
4. 텍스트가 아닌 콘텐츠를 이해하는데 중요한 단어가 포함되어 있는 경우, 대체 텍스트에도 포함되어 있는지 확인합니다.
나의 정리
이미지(<img>요소) 같은 '비 텍스트 콘텐츠(Non-text content)'에는 '대체 텍스트'가 제공 됩니다.
'alt'속성으로 제공되며 짧은 글이 들어갈 수 있습니다.
그래서 '짧은 대체 텍스트(Short text alternative)'라고도 합니다.
이 '짧은 대체 텍스트'는 해당 콘텐츠의 목적과 내용을 짧은 글로 표현해야 합니다.
그래야 스크린 리더를 사용하거나 '비 텍스트 콘텐츠'를 볼 수 없는 환경에 있는 사용자들이 '짧은 대체 텍스트'를 통해 정보를 얻을 수 있기 때문입니다.
예를 들어 보겠습니다. 좌측의 아이콘은 돋보기 모양을 하고 있습니다.
이 이미지를 클릭하면 검색 페이지로 이동합니다. 이 이미지의 대체 텍스트는 '돋보기'라고 하면 안됩니다.
목적과 내용에 맞게 다음과 같이 '검색'이라고 제공해야합니다.
<img src="./icon_search.png" alt="검색" />
하지만 '짧은 대체 텍스트'도 한계가 있습니다. 설명이 긴 경우에는 '짧은 대체 텍스트'로 표현할 수 없습니다.
그런 경우에는 '긴 대체 텍스트(Long text alternative)' 를 추가로 제공해 주어야 합니다.
그리고 '짧은 대체 텍스트'에는 전체 내용의 '개요'를 제공해야 합니다.
'긴 대체 텍스트'를 사용하는 방법은 [일반기술 G92]를 참고합니다.
대체 텍스트는 해당 콘텐츠의 목적, 내용, 기술과 동일하게 제공되어야 합니다.
G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G94.html
G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the
The objective of this technique is to create a text alternative that serves the same purpose and presents the same information as the original non-text content. As a result, it is possible to remove the non-text content and replace it with the text alterna
www.w3.org
