[접근성] 1. 인식성 - 02. 자막 제공
멀티미디어 콘텐츠에는 이에 대한 대체 수단(자막, 대본, 수화 등)을 제공해야 합니다.
1) alt 제공
<img>, <input type="image">, <button>, <area>의 alt에는 적절한 대체 텍스트를 제공한다.
*<area>는 이미지맵에 사용되는 태그
[이미지가 이모티콘인 경우]
시각적으로 인식하는 것과 동일하게 대체 텍스트를 제공해야 한다.
[이미지가 이모티콘인 경우]
시각적으로 인식하는 것과 동일하게 대체 텍스트를 제공해야 한다.
[의미 없는 이미지의 경우]
<img src="bg.jpg" alt="">속성에 alt=""는 무조건 필수로 넣어야 하기 때문에 아무것도 넣지 않는다.
Q. alt 속성을 넣지 않으면 어떻게 되나요?
NVDA - 누락된 이미지 설명을 확인하려면 컨텍스트 메뉴를 여세요. 출력.
보이스오더 - 이미지 출력.
Q. alt=" "로 넣으면 어떻게 되나요? (가장 위험)
NVDA - 아무것도 출력하지 않음.
보이스오더 - 초점을 잡히지 않고, 읽지도 않음.
2) IR(Image Replace)기법
의미있는 이미지(특수문자, 기호 포함), 조직도, 차트, 복잡한 콘텐츠의 경우 숨김 처리로 대체 텍스트를 제공한다.
*display: block, visibility: hidden 접근성 보조 도구가 읽지 못한다.
*width, height, font-size - NVDA는 읽지만, 보이스오더는 초점을 잡지 못하면 읽지 못한다.
*숨김 텍스트를 사용하지 말 것 - 검색엔진 최적화에 좋지 영향을 주지 못한다. (black hat)
.a11y {
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
}
[대체 텍스트가 너무 긴 경우]
alt=""를 비우고 대체 텍스트로 별도의 마크업으로 제공하는 방법을 사용한다.
예시에서는 <p>로 마크업했지만, list인 경우에는 <ul><li>를 사용할 수 있다.
[의미있는 이미지가 이미지가 아닌 배경으로 처리된 경우]
IR기법을 사용해서 시각적으로 보는 것과 동등하게 제공해야 한다.
[공부좌표]