적절한 대체 텍스트 제공

무엇을 요구하나요?

글자가 아닌 콘텐츠(이미지, 아이콘 버튼, 이미지 링크, 그래프 등)에는 그 콘텐츠가 전하는 내용이나 기능을 글자로 알려주는 대체 텍스트가 있어야 합니다. 화면을 보지 못하는 사용자는 화면 낭독기가 읽어주는 대체 텍스트로 이미지를 이해합니다.

판단 기준은 “이 이미지가 사라지면 무엇을 잃는가”입니다.

이미지 종류	대체 텍스트
정보를 전하는 이미지 (배너, 사진, 그래프)	전하는 내용을 짧게
기능이 있는 이미지 (이미지 링크, 아이콘 버튼)	눌렀을 때 일어나는 일 (“검색”, “장바구니”)
장식 이미지 (구분선, 배경 무늬)	alt="" (빈 값)
글자가 들어간 이미지	이미지 속 글자 그대로

자주 틀리는 예

1. alt 속성이 아예 없음

<img src="logo.png">

<img src="logo.png" alt="한빛상사">

2. 파일명이나 의미 없는 말을 씀

alt="banner_01.png", alt="이미지", alt="img"는 아무 정보도 주지 않습니다. 배너라면 배너에 적힌 내용을 씁니다.

<img src="banner_01.png" alt="banner_01.png">

<img src="banner_01.png" alt="신규 회원 3천 원 할인 쿠폰 증정, 11월 30일까지">

3. 아이콘만 있는 버튼·링크에 이름이 없음

아이콘 폰트나 SVG만 들어 있는 버튼은 화면 낭독기가 “버튼”이라고만 읽습니다.

<button><svg>…</svg></button>
<a href="/cart"><i class="icon-cart"></i></a>

<button aria-label="메뉴 열기"><svg aria-hidden="true">…</svg></button>
<a href="/cart"><i class="icon-cart" aria-hidden="true"></i><span class="sr-only">장바구니</span></a>

sr-only는 화면에는 숨기고 화면 낭독기에는 읽히게 하는 흔한 CSS 클래스입니다.

4. 이미지와 바로 옆 글자가 같은 내용을 두 번 읽힘

이미지 옆에 같은 글자가 이미 있으면 이미지는 장식으로 처리해 중복을 없앱니다.

<a href="/event"><img src="event.png" alt="가을 이벤트"> 가을 이벤트</a>

<a href="/event"><img src="event.png" alt=""> 가을 이벤트</a>

확인하는 방법

1. 확장 프로그램 페이지 검사로 열린 페이지를 검사하면 alt 없음, 파일명 같은 alt를 찾아줍니다.
2. 북마클릿의 “이미지 alt” 보기로 실제 페이지 위에서 이미지마다 alt를 확인할 수 있습니다.
3. alt 내용이 적절한지는 자동으로 판단할 수 없습니다. 이미지를 가리고 alt만 읽었을 때 같은 정보를 얻을 수 있는지 직접 확인하세요.

CSS 배경 이미지(background-image)로 넣은 정보는 대체 텍스트를 줄 수 없습니다. 정보를 전하는 이미지라면 <img>로 넣거나, 같은 내용을 글자로 함께 제공하세요.