[접근성] 1. 인식성 - 01. 적절한 대체 텍스트 제공

텍스트 아닌 콘텐츠(ex. 이미지)는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.

---

1) alt 제공

<img>, <input type="image">, <button>, <area>의 alt에는 적절한 대체 텍스트를 제공한다.

*<area>는 이미지맵에 사용되는 태그

 

[이미지가 이모티콘인 경우]

시각적으로 인식하는 것과 동일하게 대체 텍스트를 제공해야 한다.

 

[이미지가 이모티콘인 경우]

시각적으로 인식하는 것과 동일하게 대체 텍스트를 제공해야 한다.

 

[의미 없는 이미지의 경우]

속성에 alt=""는 무조건 필수로 넣어야 하기 때문에 아무것도 넣지 않는다.

<img src="bg.jpg" alt="">

Q. alt 속성을 넣지 않으면 어떻게 되나요?

NVDA - 누락된 이미지 설명을 확인하려면 컨텍스트 메뉴를 여세요. 출력.

보이스오더 - 이미지 출력.

 

Q. alt="", 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기법을 사용해서 시각적으로 보는 것과 동등하게 제공해야 한다.

---

[공부좌표]

1) 적절한 대체 텍스트 제공