적절한 대체 텍스트 제공 검사 방법

어떤 기준에 해당하나요

한국 기준 (KWCAG 2.2)

5.1.1 적절한 대체 텍스트 제공

인식의 용이성

국제 기준 (WCAG 2.2)

1.1.1 비텍스트 콘텐츠 (A) ↗

어떻게 검사하나요

대체 텍스트의 존재 여부는 자동으로 검사되지만, 내용이 이미지의 의미·용도를 적절히 설명하는지는 사람이 판단해야 합니다. 스크린 리더(NVDA, VoiceOver, 센스리더)로 이미지·버튼·아이콘을 읽어 실제 의미가 전달되는지 확인하세요. 장식용 이미지는 alt=""로 비어 있는지 확인합니다.

자동 검사로 잡히는 부분

이 항목은 9개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.

• 이미지에 대체 텍스트가 없습니다 image-alt

  모든 <img> 요소에는 이미지의 의미를 전달하는 alt 속성이 필요합니다. 스크린 리더 사용자는 alt가 없으면 파일명을 듣거나 이미지의 존재조차 알 수 없습니다.

  <!-- 잘못된 예 -->
  <img src="chart.png">
  
  <!-- 올바른 예: 의미 있는 이미지 -->
  <img src="chart.png" alt="2026년 분기별 매출 그래프: 1분기 대비 4분기 32% 증가">
  
  <!-- 올바른 예: 장식용 이미지는 빈 alt -->
  <img src="divider.png" alt="">

  장식 목적의 이미지는 alt=""(빈 값)로 지정해 스크린 리더가 건너뛰게 하세요. CSS background-image로 옮기는 것도 방법입니다.

• 이미지 버튼에 대체 텍스트가 없습니다 input-image-alt

  <input type="image">는 버튼 기능을 하므로 그 기능을 설명하는 alt가 필수입니다.

  <input type="image" src="search.png" alt="검색">

• 이미지 맵 영역에 대체 텍스트가 없습니다 area-alt

  이미지 맵의 각 <area>는 링크 역할을 하므로 목적지를 설명하는 alt가 필요합니다.

  <area shape="rect" coords="..." href="/seoul" alt="서울 지역 안내">

• object 요소에 대체 콘텐츠가 없습니다 object-alt

  <object> 안에 대체 텍스트를 넣거나 aria-label을 제공하세요.

  <object data="map.svg" type="image/svg+xml">회사 위치 약도: 지하철 2호선 강남역 3번 출구 도보 5분</object>

• img 역할의 SVG에 접근 가능한 이름이 없습니다 svg-img-alt

  role="img"인 SVG에는 <title> 요소나 aria-label로 이름을 제공하세요.

  <svg role="img" aria-label="별점 5점 만점에 4점">…</svg>

• role=img 요소에 대체 텍스트가 없습니다 role-img-alt

  role="img"를 지정한 요소에는 aria-label 또는 aria-labelledby로 이미지의 의미를 제공해야 합니다.

• 이미지 대체 텍스트가 주변 텍스트와 중복됩니다 image-redundant-alt

  이미지 바로 옆에 같은 텍스트가 있으면 스크린 리더가 같은 내용을 두 번 읽습니다. 이 경우 이미지는 alt=""로 처리하세요.

• 서버 사이드 이미지 맵을 사용하고 있습니다 server-side-image-map

  <img ismap> 서버 사이드 이미지 맵은 키보드로 사용할 수 없습니다. 클라이언트 사이드 이미지 맵(<map>+<area>)이나 일반 링크 목록으로 대체하세요.

• 대체 텍스트가 파일명이거나 의미 없는 값입니다 a11ychk:alt-quality

  대체 텍스트는 '있는 것'만으로는 부족하고 이미지의 의미를 전달해야 합니다. 파일명(예: photo01.jpg)이나 "이미지"·"사진" 같은 일반어는 스크린 리더 사용자에게 아무 정보도 주지 못합니다(WCAG 실패 사례 F30).

  <!-- 잘못된 예 -->
  <img src="chart.png" alt="chart.png">
  <img src="banner.jpg" alt="이미지">
  <!-- 올바른 예 -->
  <img src="chart.png" alt="2025년 분기별 매출 추이 — 4분기 32% 증가">

  장식 목적의 이미지라면 alt=""(빈 값)로 두어 스크린 리더가 건너뛰게 하세요.

관련 검사항목

• 6.1.1 키보드 사용 보장
• 5.3.1 색에 무관한 콘텐츠 인식
• 5.3.2 명확한 지시사항 제공
• 5.4.1 텍스트 콘텐츠의 명도 대비