5.1.1 적절한 대체 텍스트 제공

요구 사항

이미지 등 텍스트 아닌 콘텐츠를 사용할 때는 그 의미나 용도를 동등하게 인식할 수 있도록 적절한 대체 텍스트를 제공하고, 대체 텍스트는 간단명료하게 씁니다. 표준은 다음 경우를 구체적으로 요구합니다.

• 구체적인 정보가 필요한 경우: 이미지 링크·이미지 버튼은 용도가 명확하므로 핵심 기능(이동할 곳, 실행할 동작)을 짧은 대체 텍스트로 제공합니다.
• 의미 있는 배경 이미지: 배경 이미지의 의미가 전달되어야 한다면 그 의미가 보조기술로 전달되도록 대체 텍스트를 제공합니다.
• 충분한 정보가 필요한 경우: 데이터 차트처럼 복잡한 콘텐츠는 의미를 충분히 파악할 수 있는 대체 텍스트(필요하면 상세 설명)를 제공합니다.

다음 경우에는 대체 텍스트를 제공하지 않거나 제한적으로 제공할 수 있습니다.

• 대체 콘텐츠: 텍스트와 동등한 내용의 수어 동영상처럼 그 자체가 대체 콘텐츠라면 대체 텍스트가 반드시 필요하지는 않습니다.
• 내용을 설명할 수 없는 경우: 생방송처럼 계속 바뀌는 콘텐츠, 색맹·청각·시력 검사나 받아쓰기 같은 시험은 간략한 용도만 알려 주면 충분합니다.
• 특정 감각으로만 제공되는 콘텐츠: 플루트 독주, 시각 예술 작품 등은 간략한 용도를 알려 주는 대체 텍스트로 충분합니다.
• 불필요한 설명: 장식용 콘텐츠는 오히려 혼란을 주므로 대체 텍스트로 공백 문자(alt="")를 제공합니다.
• 중복 정보: 같은 정보가 보조기술로 반복 전달되지 않도록 구현하는 것이 바람직합니다.

왜 필요한가요

화면낭독기 사용자는 이미지를 볼 수 없으므로 대체 텍스트가 없으면 그 정보에 전혀 접근할 수 없습니다. 대체 텍스트는 음성뿐 아니라 점자로도 변환되어 시청각 중복장애인도 이용할 수 있고, 이미지를 불러오지 못한 환경이나 검색에도 도움이 됩니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 시청각 중복장애인(점자정보단말기 사용자)
• 지적장애·학습장애가 있는 사용자
• 이미지를 끄거나 불러오지 못한 환경의 사용자

적용 방법

HTML 요소가 가진 대체 텍스트 수단을 먼저 씁니다. <img>는 alt, 이미지 버튼은 <input type="image" alt>, 이미지 맵 영역은 <area alt>를 사용합니다. 대체 텍스트를 정하는 기준은 접근 가능한 이름 가이드를 참고하세요.

<!-- 정보 이미지: 이미지가 전하는 내용을 씁니다 -->
<img src="map.png" alt="본사 위치: 서울역 1번 출구에서 도보 5분, 한빛빌딩 3층">

<!-- 이미지 링크: 이동할 곳을 씁니다 -->
<a href="/"><img src="logo.svg" alt="한빛몰 홈"></a>

<!-- 장식 이미지: 공백 문자 -->
<img src="divider.png" alt="">

<!-- 아이콘 버튼 -->
<button type="button"><svg aria-hidden="true" focusable="false">…</svg><span class="sr-only">검색</span></button>

복잡한 차트는 짧은 대체 텍스트와 함께 표나 본문으로 자세한 내용을 제공하고, aria-describedby로 연결할 수 있습니다. CSS 배경 이미지에 의미가 있다면 화면에 숨긴 텍스트를 함께 둡니다.

<figure>
  <img src="sales.png" alt="2024년 분기별 매출 막대 그래프" aria-describedby="sales-desc">
  <figcaption id="sales-desc">1분기 120억, 2분기 150억, 3분기 140억, 4분기 190억 원으로 4분기 매출이 가장 높습니다.</figcaption>
</figure>

사례

<button type="submit"><img src="search.png" alt="검색"></button>

<img src="IMG_0412.jpg" alt="IMG_0412.jpg">
<img src="banner.png" alt="이미지">

<img src="bullet.png" alt="빨간 동그라미 아이콘">

자주 하는 실수

• alt 속성을 아예 생략해 화면낭독기가 파일 이름을 읽습니다.
• 이미지 링크의 대체 텍스트가 링크 목적지가 아닌 이미지 모양(“화살표”)을 설명합니다.
• 텍스트가 들어간 배너 이미지의 대체 텍스트가 이미지 안 글자와 다릅니다.
• 장식 이미지에 대체 텍스트를 넣어 같은 정보가 두 번 읽힙니다.
• 아이콘 글꼴이나 SVG 아이콘만 있는 버튼에 이름이 없습니다.

검사 방법

• 페이지의 모든 img, input type="image", area에 alt 속성이 있는지 확인합니다.
• 각 대체 텍스트가 이미지의 의미·용도와 같은지 이미지와 비교해 확인합니다(자동 도구는 존재 여부만 알려 줍니다).
• 장식 이미지는 alt=""이거나 CSS 배경으로 처리되었는지 확인합니다.
• 의미 있는 CSS 배경 이미지·아이콘 글꼴·SVG에 대응하는 텍스트가 있는지 확인합니다.
• NVDA 또는 센스리더로 해당 영역을 탐색하며 실제로 읽히는 내용을 확인합니다.
• 인증 심사에서는 전문가 심사와 장애인 사용자 심사로 확인하므로, 자동 검사 도구 결과만으로 준수를 판단하지 않습니다.

관련 ARIA

다른 지침의 대응 항목