대체 텍스트(alt) 제대로 쓰는 법

이미지 유형별 실전 가이드 · WCAG 2.1 성공기준 1.1.1 · 2026년 9월

alt 속성은 "이미지를 보지 못하는 사람에게 대신 읽어 줄 문장"입니다. 화면낭독기 사용자만이 아니라, 이미지가 로딩에 실패했을 때, 데이터를 아끼려고 이미지를 끈 사용자, 그리고 검색엔진도 이 문장을 읽습니다. 그런데 alt는 "무조건 채우면 되는" 속성이 아닙니다. 이미지가 하는 역할에 따라 정확한 문장을 쓸 때도 있고, 일부러 비워야 할 때도 있습니다.

1. 시작은 한 가지 질문

모든 이미지는 아래 질문 하나로 갈라집니다.

이 이미지가 화면에서 사라진다면, 페이지의 의미가 달라지는가?

• 달라진다 → 정보 전달 이미지. 사라진 정보를 대신할 문장을 alt에 쓴다.
• 달라지지 않는다 → 장식 이미지. alt=""로 비워 화면낭독기가 건너뛰게 한다.
• 클릭할 수 있다(링크·버튼 안) → 기능 이미지. alt에는 이미지 설명이 아니라 어디로 가는지·무엇을 하는지를 쓴다.

핵심은 alt 속성 자체는 항상 있어야 한다는 점입니다. 값이 비더라도(alt="") 속성은 존재해야 합니다. 속성을 아예 빼면 많은 화면낭독기가 파일 이름(IMG_20260901_final2.jpg)을 그대로 읽습니다.

2. 정보 전달 이미지

사진, 스크린샷, 다이어그램처럼 내용을 담고 있는 이미지입니다. "무엇이 보이는가"가 아니라 "이 이미지가 여기 있는 이유"를 쓰는 것이 요령입니다. 같은 사진이라도 문맥에 따라 alt가 달라집니다.

<!-- 쇼핑몰 상품 사진 -->
<img src="chair.jpg" alt="원목 4각 다리에 진회색 패브릭을 씌운 1인용 라운지 체어">

<!-- 같은 의자가 '조립 방법' 문서에 있을 때 -->
<img src="chair-step2.jpg" alt="다리 4개를 좌판 밑면 모서리 구멍에 끼운 상태">

지침:

• 보통 한두 문장이면 충분합니다. 필요한 정보만 담고 인상 비평("멋진", "감각적인")은 뺍니다.
• 문장 끝에 "이미지", "사진", "그림"이라고 덧붙이지 않습니다. 화면낭독기가 이미 "그래픽"이라고 알려 줍니다.
• 사진 속 글자가 정보라면 그 글자를 alt에 옮깁니다. (아래 5번 참고)
• 같은 페이지에 비슷한 이미지가 여러 장이면 서로 구별되게 씁니다. "제품 사진 1/2/3"은 구별에 도움이 안 됩니다.

3. 장식 이미지

구분선, 배경 질감, 제목 옆 장식 아이콘, 이미 옆 텍스트로 충분히 설명된 삽화 등입니다. 이런 이미지에 alt 문장을 넣으면 화면낭독기 사용자에게는 "잡음"이 됩니다.

<!-- 빈 alt: 화면낭독기가 조용히 건너뛴다 -->
<img src="divider.svg" alt="">

<!-- 배경 장식은 아예 CSS로 -->
<div class="hero" style="background-image:url(texture.png)">...</div>

"이 삽화, 설명해 주면 좋지 않을까?"라는 마음이 들어도, 바로 옆 본문이 같은 내용을 이미 말하고 있다면 중복이므로 비웁니다. 판단이 어려울 땐 "이 문장을 소리로 두 번 듣고 싶은가?"를 기준으로 삼으세요.

4. 기능 이미지 — 링크·버튼 안의 이미지

클릭할 수 있는 이미지에서 alt는 "그림 설명"이 아니라 동작이나 목적지의 이름입니다. 화면낭독기는 링크 전체를 하나의 이름으로 읽기 때문입니다.

<!-- 로고 링크: 목적지를 쓴다 -->
<a href="/"><img src="logo.svg" alt="홈으로"></a>

<!-- 아이콘 버튼: 동작을 쓴다 -->
<button type="button">
  <img src="trash.svg" alt="이 댓글 삭제">
</button>

<!-- 이미지 + 텍스트가 같은 링크 안에 있으면, 이미지는 비운다 -->
<a href="/notice/42">
  <img src="thumb.jpg" alt="">
  8월 정기 점검 안내
</a>

마지막 예처럼 링크 안에 이미 텍스트가 있으면 이미지의 alt는 비워야 합니다. 비우지 않으면 "8월 정기 점검 안내 썸네일 8월 정기 점검 안내"처럼 이름이 두 번 읽힙니다.

5. 복잡한 이미지 — 차트·그래프·인포그래픽

막대그래프 하나에 "2024년 3분기 매출이 정점, 4분기 소폭 하락, 전년 대비 12% 성장" 같은 정보가 통째로 들어 있을 수 있습니다. 이걸 한 줄 alt에 다 담으려 하면 너무 길어지고, 담지 않으면 그 데이터가 사라집니다. 해법은 짧은 alt + 본문에서 데이터 제공입니다.

<figure>
  <img src="sales-2024.png"
       alt="2024년 분기별 매출 막대그래프. 자세한 수치는 아래 표 참고.">
  <figcaption>
    <table>
      <caption>2024년 분기별 매출(억 원)</caption>
      <thead><tr><th scope="col">분기</th><th scope="col">매출</th></tr></thead>
      <tbody>
        <tr><th scope="row">1분기</th><td>120</td></tr>
        <tr><th scope="row">2분기</th><td>138</td></tr>
        <tr><th scope="row">3분기</th><td>165</td></tr>
        <tr><th scope="row">4분기</th><td>151</td></tr>
      </tbody>
    </table>
  </figcaption>
</figure>

데이터 표는 눈으로 보는 사용자에게도 정확한 수치를 주므로 손해가 아닙니다. 공간이 부담되면 <details>로 접어 두거나, 별도 페이지로 링크해도 됩니다(1.1.1의 "긴 설명" 허용 방식).

6. 글자가 들어간 이미지

가능하면 이미지 속 글자는 실제 텍스트로 만드는 것이 원칙입니다(WCAG 1.4.5). 확대해도 안 깨지고, 번역·검색·복사가 되고, 다크모드 대응도 쉽습니다. 로고처럼 불가피한 경우에만 이미지로 두고, alt에 그 글자를 그대로 옮깁니다.

• 회사 로고 → alt="(주)가나다". "로고"라는 말은 필요 없습니다.
• "여름 세일 최대 50%" 배너 → alt="여름 세일, 최대 50% 할인". 배너의 문구를 빠짐없이.
• 배너가 링크라면 alt는 목적지 기준: alt="여름 세일 상품 보기".

7. 아이콘 — SVG와 아이콘 폰트

인라인 SVG와 아이콘 폰트는 img 태그가 아니므로 alt를 쓸 수 없습니다. 대신:

<!-- 의미 있는 아이콘 (단독으로 정보를 전달) -->
<svg role="img" aria-label="검증됨" ...>...</svg>

<!-- 텍스트 옆 장식 아이콘 -->
<button>
  <svg aria-hidden="true" ...>...</svg>
  저장
</button>

<!-- 아이콘 폰트 (장식) -->
<i class="icon-download" aria-hidden="true"></i> 내려받기

규칙은 단순합니다. 아이콘이 혼자서 의미를 전달하면 이름을 주고, 옆 텍스트의 장식이면 aria-hidden="true"로 숨깁니다. 아이콘만 있는 버튼인데 aria-hidden만 붙이고 이름을 안 주면, 화면낭독기에는 "버튼"이라고만 읽혀 무슨 버튼인지 알 수 없습니다.

8. CSS 배경 이미지

background-image로 넣은 이미지는 화면낭독기가 인식하지 못합니다. 그래서 장식은 배경으로 두는 편이 오히려 접근성에 유리합니다. 반대로 정보를 담은 이미지를 배경으로 넣으면 안 됩니다. 꼭 필요하면 이렇게 보완합니다.

<div class="map" style="background-image:url(map.png)"
     role="img" aria-label="매장 위치: 2호선 강남역 3번 출구에서 도보 4분">
</div>

9. 자주 나오는 실수

10. 30초 자가 점검

1. 페이지의 모든 <img>에 alt 속성이 있는가? (없는 것 = 오류)
2. 의미 있는 이미지의 alt를 소리 내어 읽어 보면 문맥이 통하는가?
3. 장식 이미지는 alt=""인가, 아니면 배경으로 옮겼는가?
4. 클릭 가능한 이미지의 alt가 "그림 설명"이 아니라 "동작/목적지"인가?
5. 차트·표·인포그래픽의 데이터가 텍스트로도 어딘가에 존재하는가?

이 도구의 자동 검사는 1·3·4번(속성 누락, 빈 링크 이름, 의심스러운 alt 값)을 잡아 줍니다. 2·5번은 사람이 읽어 봐야 하는 영역입니다.