1.1.1 비텍스트 콘텐츠

요구 사항

사용자에게 제시되는 모든 비텍스트 콘텐츠(이미지, 그래픽 버튼, 아이콘, 차트, 이미지 맵, 오디오·비디오 등)에는 동등한 목적을 하는 텍스트 대체 수단이 있어야 합니다. 단, 콘텐츠 종류에 따라 다음과 같이 요구 수준이 달라집니다.

• 컨트롤·입력: 이미지 버튼처럼 컨트롤이거나 사용자 입력을 받는 경우, 그 목적을 설명하는 이름이 있어야 합니다(자세한 요구는 4.1.2).
• 시간 기반 미디어: 오디오·비디오는 최소한 무엇인지 알 수 있는 설명적 식별 정보(제목 등)를 제공합니다. 내용 대체는 지침 1.2가 다룹니다.
• 시험·연습: 텍스트로 바꾸면 의미가 없어지는 시험(예: 그림을 보고 답하기)은 설명적 식별 정보만 제공합니다.
• 감각적 경험: 음악 연주, 미술 작품처럼 특정 감각 경험을 주려는 콘텐츠는 설명적 식별 정보만 제공합니다.
• CAPTCHA: 사람인지 확인하는 목적임을 알리는 텍스트를 제공하고, 시각용·청각용처럼 다른 감각으로 풀 수 있는 대안을 함께 제공합니다.
• 장식·서식·보이지 않는 콘텐츠: 순수한 장식, 시각적 서식용, 사용자에게 보이지 않는 콘텐츠는 보조기술이 무시할 수 있게 구현합니다(예: alt="").

왜 필요한가요

화면낭독기는 이미지 자체를 읽을 수 없고 대체 텍스트만 읽습니다. 대체 텍스트가 없으면 파일 이름(“img_0231.png”)을 읽거나 아무것도 읽지 않아, 아이콘 버튼은 무엇을 하는지 알 수 없게 됩니다. 텍스트는 음성·점자·확대 등 어떤 형태로든 바꿀 수 있어 가장 범용적인 대체 수단입니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 시청각장애인(점자정보단말기 사용자)
• 저시력 사용자(화면 확대 사용자)
• 인지·학습 장애가 있는 사용자
• 이미지가 로드되지 않는 환경의 사용자
• 음성 인식 사용자(버튼 이름으로 조작)

적용 방법

이미지가 문맥에서 하는 역할을 먼저 판단한 뒤 대체 텍스트를 정합니다.

• 정보를 전달하는 이미지: 이미지가 전하는 정보를 간결하게 씁니다. “이미지”, “사진” 같은 말은 붙이지 않습니다(화면낭독기가 이미 “그래픽”이라고 알려 줍니다).
• 기능이 있는 이미지(링크·버튼 안의 이미지): 생김새가 아니라 동작이나 목적지를 씁니다. 돋보기 아이콘 버튼은 “돋보기”가 아니라 “검색”입니다.
• 장식 이미지: alt=""로 빈 대체 텍스트를 주거나 CSS 배경 이미지로 넣습니다. alt 속성 자체를 빼면 안 됩니다.
• 복잡한 이미지(차트, 도표): 짧은 대체 텍스트로 요지를 알리고, 자세한 데이터는 본문·표·<figcaption>·aria-describedby로 연결한 설명에 제공합니다.
• SVG 아이콘: 의미가 있으면 role="img"와 aria-label(또는 <title>)을, 장식이면 aria-hidden="true"를 줍니다.

대체 텍스트를 쓰는 요령은 접근 가능한 이름 계산 가이드도 참고하세요.

<!-- 정보 이미지 -->
<img src="chart.png" alt="2024년 분기별 매출: 1분기 120억, 2분기 150억, 3분기 140억, 4분기 180억">

<!-- 기능 이미지: 목적을 씁니다 -->
<a href="/"><img src="logo.svg" alt="한빛쇼핑 홈"></a>

<!-- 아이콘 버튼 -->
<button type="button" aria-label="검색">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

<!-- 장식 이미지 -->
<img src="divider.png" alt="">

사례

<button type="button"><img src="icon-close.png"></button>

<button type="button"><img src="icon-close.png" alt="닫기"></button>

자주 하는 실수

• alt 속성을 아예 빼서 화면낭독기가 파일 이름을 읽게 합니다.
• 기능 이미지에 생김새(“X 아이콘”, “화살표”)를 대체 텍스트로 씁니다.
• 장식 이미지에 “장식”, “이미지” 같은 의미 없는 대체 텍스트를 넣어 불필요하게 읽히게 합니다.
• 차트·인포그래픽에 “차트”처럼 내용이 없는 대체 텍스트만 제공합니다.

검사 방법

• 페이지의 모든 <img>, role="img", <svg>, <input type="image">, CSS 배경으로 넣은 의미 있는 이미지를 찾습니다.
• 각 이미지가 정보·기능·장식 중 무엇인지 판단하고, 대체 텍스트가 그 역할에 맞는지 확인합니다.
• 브라우저 개발자 도구의 접근성 패널이나 화면낭독기로 아이콘 버튼·링크의 접근 가능한 이름을 확인합니다.
• 이미지를 끈 상태(또는 대체 텍스트 표시 도구)로 페이지를 보고 정보가 빠지지 않는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 1.1.1 (새 창)