대체 텍스트

개요

대체 텍스트는 이미지, 아이콘, 그래프, 버튼 그림처럼 눈으로 보는 비텍스트 콘텐츠의 의미나 기능을 텍스트로 전달하는 접근성 장치이다. 영어권에서는 alternative text, 줄여서 alt text라고 부른다.

웹에서는 HTML img 요소의 alt 속성이 대표적이다. 하지만 대체 텍스트는 단순히 “이미지에 설명을 붙이는 일”에 그치지 않는다. 콘텐츠가 전달하는 정보, 사용자가 해야 할 행동, 화면에서 해당 요소가 맡는 기능을 텍스트로 동등하게 제공하는 일이다.¹

왜 필요한가

대체 텍스트는 화면 읽기 프로그램 사용자에게 이미지를 음성이나 점자 표시 장치로 전달할 수 있게 한다. 이미지를 볼 수 없는 사용자뿐 아니라, 느린 네트워크에서 이미지를 끄고 보는 사용자, 검색엔진, 음성 명령 사용자에게도 도움이 된다.

WCAG 2.2의 성공 기준 1.1.1은 사용자에게 제시되는 모든 비텍스트 콘텐츠에 동등한 목적을 수행하는 텍스트 대안을 제공하라고 요구한다. 다만 장식 이미지, CAPTCHA, 시험·감각 경험 등에는 상황별 예외와 별도 요구가 있다.²

작성 원칙

대체 텍스트의 핵심은 이미지의 “모양”이 아니라 문맥 속 “역할”이다.

• 정보 이미지: 이미지가 전달하는 핵심 정보를 짧게 쓴다.
• 기능 이미지: 아이콘의 생김새보다 버튼이나 링크가 하는 일을 쓴다.
• 장식 이미지: 정보가 없고 장식 목적만 있다면 빈 대체 텍스트(alt="")로 보조기술이 건너뛰게 한다.
• 글자가 들어 있는 이미지: 로고 등 예외를 제외하면 이미지 안의 글자를 텍스트로 제공한다.
• 복잡한 이미지: 그래프, 도표, 지도처럼 정보가 많은 경우 짧은 대체 텍스트와 별도의 긴 설명을 함께 제공한다.

예를 들어 돋보기 아이콘이 검색 버튼으로 쓰인다면 “돋보기”보다 “검색”이 더 적절하다. 반대로 전시 현장의 사진처럼 분위기와 맥락이 중요한 콘텐츠에서는 누가, 어디서, 무엇을 하고 있는지 설명해야 한다.

흔한 오해

대체 텍스트는 항상 길수록 좋은 것이 아니다. 이미지 옆 본문에서 이미 같은 내용을 설명했다면, 같은 말을 반복하지 않는 편이 낫다. 반대로 “이미지”, “사진”, “버튼”처럼 정보가 없는 말만 넣으면 접근성은 좋아지지 않는다.

또한 자동 생성 대체 텍스트는 초안으로는 도움이 될 수 있지만, 문맥 판단을 대신할 수는 없다. 접근성에서 중요한 것은 이미지 인식 자체가 아니라, 그 이미지가 해당 문서에서 어떤 의미를 맡는지 판단하는 일이다.

함께 볼 개념

• 웹 접근성
• 화면 읽기 프로그램
• 점자 표시 장치
• 접근성

참고 자료

Footnotes

1. W3C Web Accessibility Initiative, “Images Tutorial.” WAI는 이미지의 목적에 따라 정보 이미지, 장식 이미지, 기능 이미지, 글자 이미지, 복잡한 이미지 등으로 나누어 적절한 텍스트 대안을 제공하라고 설명한다. https://www.w3.org/WAI/tutorials/images/ ↩

2. W3C Web Accessibility Initiative, “Understanding Success Criterion 1.1.1: Non-text Content.” WCAG 2.2의 비텍스트 콘텐츠 기준은 비텍스트 정보가 더 많은 사람에게 전달되도록 텍스트 대안을 제공하는 것을 목표로 한다. https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html ↩