새로운 질서 위키

대체 텍스트

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

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

같은 이미지의 다른 임무

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

기타 등등

  • alt를 아예 생략하면 일부 스크린 리더가 이미지 파일명을 읽기도 한다. DSC_0042.jpg 같은 이름이 독자에게 갑자기 소개될 수 있으므로, 빈 대체 텍스트와 속성의 생략은 구별할 필요가 있다. 출처
  • 순수한 장식 이미지에는 alt=""처럼 빈 값을 쓰기도 한다. 모든 그림을 설명하는 것보다 읽을 필요가 없는 그림을 건너뛰게 하는 편이 나은 경우다. 출처

#개념 #웹 #HTML