> 사진을 전화로 전한다면 어디부터 말할까?

대체 텍스트는 이미지를 볼 수 없을 때 그 이미지가 맡은 내용을 전하는 글이다. [[HTML]]에서는 이미지 요소의 `alt` 속성에 적는다. 이미지가 불러와지지 않거나 스크린 리더로 문서를 읽는 상황에서 이미지의 의미를 전달하는 데 쓰인다. 무엇을 적을지 정하려면 먼저 그 이미지가 설명인지 기록인지 장식인지 살펴야 한다. 같은 사진이라도 [[문서]] 안에서 맡은 역할에 따라 필요한 설명은 달라진다. [[새로운 질서]]는 대체 텍스트를 쓰는 일을 보이지 않는 조건에서도 의미를 남기는 [[글쓰기]]로 다룬다.

좋은 대체 텍스트는 사진 속 모든 것을 빠짐없이 나열하려 하지 않는다. 독자가 이 문서를 이해하는 데 필요한 장면과 역할을 골라 전한다. 단지 ‘이미지’라고만 쓰면 어떤 내용인지 알 수 없고 지나치게 긴 묘사는 정작 필요한 정보를 가릴 수 있다. 내용 전달과 무관한 장식 이미지에는 `alt=""`처럼 빈 값을 줄 수 있지만 의미 있는 이미지까지 일괄해서 비워두어서는 안 된다. 이미지와 함께 화면에 보이는 캡션은 대체 텍스트와 역할이 다르므로 캡션이 있다는 이유만으로 대체 텍스트가 불필요해지지는 않는다. 이미지를 제외하고도 필요한 내용을 이해할 수 있는지 살피는 일은 [[접근성]]을 확인하는 출발점이다.

## 같은 이미지의 다른 임무

- 이미지 하나를 작품 소개와 구매 안내에 각각 놓는다고 가정하자. 글에서 맡은 역할에 따라 필요한 설명을 달리 써본다.
- [WAI의 이미지 안내](https://www.w3.org/WAI/tutorials/images/)처럼 정보, 장식, 기능을 구분해 본다. 하이퍼링크인 이미지라면 생김새뿐 아니라 목적도 살핀다.
- [[설명의 초점 바꾸기]]에서 캡션과 대체 텍스트가 같은 일을 반복하는지 읽어보자. 이미지 없이 이해되는지만으로 접근성 검토 전체를 마쳤다고 하지는 않는다.

## 기타 등등

- `alt`를 아예 생략하면 일부 스크린 리더가 이미지 파일명을 읽기도 한다. `DSC_0042.jpg` 같은 이름이 독자에게 갑자기 소개될 수 있으므로, 빈 대체 텍스트와 속성의 생략은 구별할 필요가 있다. [출처](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img)
- 순수한 장식 이미지에는 `alt=""`처럼 빈 값을 쓰기도 한다. 모든 그림을 설명하는 것보다 읽을 필요가 없는 그림을 건너뛰게 하는 편이 나은 경우다. [출처](https://www.w3.org/WAI/tutorials/images/decorative/)

#개념 #웹 #HTML