적절한 대체 텍스트 제공
: 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공하여야 한다.
alt로 대체 텍스트 제공
텍스트가 있는 이미지를 이미지 요소로 마크업할 때 대체 텍스트는 이미지 요소의 alternative속성인 'alt'에 적용해주시면 됩니다.
ex: <img src="imgfile.png" alt="해당 이미지에 대하여 적절한 대체 텍스트를 제공합니다.">
비장애인들은 이미지를 보면 시각적으로 내용 인식이 가능하지만 시각적으로 인식이 불가능한 사용자들은 청각적으로 내용을 인식할 수 있도록 보는 것과 듣는 것이 동등하게 대체 텍스트를 제공해야 합니다. 스크린 리더로 들으면 alt 값을 읽어줍니다.
img 요소뿐만 아니라 추가적으로 input type이 image이거나 button인 경우,
또는 이미지맵의 area에도 대체 텍스트가 존재한다면 alt로 제공해 주시면 됩니다.
마크업으로 대체 텍스트 제공
대체 텍스트가 너무 긴 경우에는 이미지에는 대체 텍스트를 빈 값으로 제공하고 대체 텍스트를 마크업으로 제공하는 방법도 있습니다.
ex: <img src="imagefile.png" alt="">
<p class="blind">해당 이미지에 대하여 적절한 대체 텍스트를 제공합니다.</p>
위 예시에는 <p>태그를 이용하여 대체 텍스트를 제공하였지만 이미지 내부 콘텐츠가 리스트로 되어 있어서 <ul>, <li>로 마크업하면 스크린리더에서 목록이라고 알아서 읽어주며 기본적으로 스크린리더는 해당 요소에 따라 내용을 읽어주기 때문에 구조적 마크업이 가능한 콘텐츠는 마크업으로 대체 텍스트를 제공해주는 것이 좋습니다.
여기서 주의할 점은 해당 마크업을 보이지 않게 처리할 때 "display:none"이나 "visibility:hidden"을 사용하면 스크린리더에서 읽어주지 않기 때문에 다른 방법으로 보이지 않게 처리해야 합니다.
데이터 차트나 복잡한 콘텐츠
데이터 차트나 복잡한 콘텐츠도 사용자가 해당 콘텐츠의 의미를 충분히 파악할 수 있도록 대체 텍스트를 제공해야 합니다. 현재는 콘텐츠가 데이터 차트 이미지이기 때문에 테이블 마크업으로 다음과 같이 대체 텍스트를 재공해주고 있습니다.
의미 있는 이미지
의미 있는 이미지의 경우에도 대체 텍스트를 시각적으로 보는 것과 동등하게 제공해야 합니다.
배경 이미지
의미 있는 이미지가 이미지 요소가 아닌 배경으로 처리된 경우에도 다음와 같이 대체 텍스트를 제공해야 합니다.
의미 없는 이미지
의미 없는 이미지는 alt를 제공하지 않아도 될까요?
우선 기본적으로 이미지 요소에는 alt속성을 필수로 제공해야 합니다. alt속성을 아예 제공하지 않으면 스크린리더는 src에 있는 파일명을 읽어줍니다. (ex. imagefile.jpg)
또한 alt 속성을 제공하지만 alt 값에 띄어쓰기가 하나라도 적용되어 있는 경우도 마찬가지로 파일명을 읽어줍니다.
따라서 단순히 장식이나 시각적인 형태를 위해 사용되는 콘텐츠의 경우는 대체 텍스트로 공백 문자, 즉 다음와 같이 파일명을 읽는 일이 없이 아무것도 읽어주지 않도록 alt를 빈 값으로 제공해야 합니다.
이모티콘 이미지
이모티콘의 의미가 다 다른 만큼 ‘미안해하는 브라운’처럼 시각적으로 인식하는 것과 동일하게 대체 텍스트를 제공해야 합니다.
QR코드 이미지
QR코드의 경우 비장애인들은 이미지를 찍어서 링크를 연결할 수 있지만 시각적으로 인식할 수 없는 사용자들은 해당 링크 주소를 알 수 있도록 대체 텍스트를 제공해야 합니다.
썸네일 이미지
썸네일 이미지와 텍스트를 각각 링크로 구현하는 경우 이미지의 대체 텍스트와 링크 텍스트가 중복이 되기 때문에 스크린리더에서 동일한 내용을 2번 읽어줍니다.
따라서 다음과 같이 이미지와 텍스트를 하나의 링크로 묶어주고 대체 텍스트가 이미 존재하기 때문에 이미지에는 alt를 빈 값으로 제공해 주는 것이 좋습니다.
캡차 이미지
캡차란 사용자가 실제 사람인지 컴퓨터 프로그램인지를 구별하기 위해 사용되는 방법입니다.
캡차 이미지에 대체 텍스트로 이미지에 있는 텍스트를 제공하면 스크린리더를 사용하는 분들에게는 정답을 알려주는 것이 되므로 캡차 이미지에는 대체 텍스트로 '캡차' 또는 '보안 문자'라고 제공하고 따로 음성으로 들을 수 있도록 청각적 캡차를 제공해야 합니다.
사용자가 업로드하는 이미지
사용자가 업로드하는 이미지의 경우 사용자가 직접 대체 텍스트를 작성할 수 있도록 안내와 함께 툴을 제공해야 합니다. 사용자가 입력한 내용이 대체 텍스트로 제공되도록 구현하면 됩니다.
'Spec UP - Frontend > 부스트코스_UI 개발' 카테고리의 다른 글
| 웹 접근성_색에 무관한 콘텐츠 인식 (0) | 2020.03.31 |
|---|---|
| 웹 접근성_자막 제공 (0) | 2020.03.31 |
| 웹 접근성 지침 소개 (0) | 2020.03.31 |
| 웹 접근성_장애환경 (0) | 2020.03.31 |
| 웹 접근성이란? (0) | 2020.03.31 |
댓글