도입 스토리
"김개발 씨, 우리 메인 페이지 이미지 좀 볼게요." 박멘토가 화면을 가리켰습니다.
<img src="/images/hero-banner.jpg">"뭐가 문제인지 보여요?"
김개발은 화면을 보았습니다. 배너 이미지가 멋지게 표시되고 있었습니다. "잘 나오는데요?"
"시각장애인에게는 이 이미지가 어떻게 들릴까요?" 박멘토가 스크린리더를 켰습니다. 잠시 후 기계 음성이 흘러나왔습니다.
"이미지. hero-banner.jpg."
"파일명을 읽어주네요." 김개발이 말했습니다. "이게 뭔지 전혀 모르겠죠?"
"맞아요. 이게 바로 대체 텍스트가 필요한 이유예요."
핵심 개념 설명
alt 속성이란
<img> 태그의 alt 속성은 이미지를 대신하는 텍스트 설명입니다.
<img src="/images/hero-banner.jpg" alt="스마트폰을 사용하는 다양한 연령대의 사람들">스크린리더는 이 alt 텍스트를 읽어줍니다. 이미지가 로드되지 않을 때도 alt 텍스트가 표시됩니다. 검색엔진도 alt 텍스트를 통해 이미지 내용을 이해합니다.
이미지 유형별 alt 작성법
이미지는 성격에 따라 alt를 다르게 작성해야 합니다.
정보 이미지: 내용을 설명하는 텍스트를 제공합니다.
<!-- 잘못된 예 --><img src="chart.png" alt="차트"><!-- 올바른 예 --><img src="chart.png" alt="2026년 1분기 매출: 1월 120만원, 2월 145만원, 3월 160만원으로 증가 추세">장식 이미지: 내용 전달에 기여하지 않는 이미지는 alt를 빈 문자열로 설정합니다.
<!-- 장식용 구분선 이미지 --><img src="divider.png" alt="">alt=""로 설정하면 스크린리더가 이 이미지를 건너뜁니다. alt 속성 자체를 생략하면 파일명을 읽어버리므로 반드시 alt=""를 명시해야 합니다.
링크 이미지: 링크로 사용되는 이미지는 링크의 목적지를 설명합니다.
<!-- 홈 버튼 이미지 --><a href="/"> <img src="home-icon.png" alt="홈으로 이동"></a>텍스트를 포함한 이미지: 이미지 안의 텍스트를 그대로 alt에 넣습니다.
<img src="sale-banner.png" alt="여름 특별 세일 50% 할인">SVG 이미지 접근성
SVG는 별도 처리가 필요합니다.
<!-- 방법 1: role과 aria-label 사용 --><svg role="img" aria-label="회사 로고"> <!-- SVG 내용 --></svg><!-- 방법 2: title 요소 사용 --><svg> <title>회사 로고</title> <!-- SVG 내용 --></svg><!-- 장식용 SVG: aria-hidden으로 숨기기 --><svg aria-hidden="true"> <!-- SVG 내용 --></svg>alt 작성의 5가지 원칙
- 간결하게: 125자 이내. 불필요한 "이미지" "사진" 같은 단어 제외.
- 구체적으로: "남자" 보다 "헬멧을 쓴 건설 노동자".
- 맥락에 맞게: 같은 이미지도 문맥에 따라 alt가 달라질 수 있음.
- 기능을 설명: 링크나 버튼 이미지는 내용이 아닌 기능을 설명.
- 장식은 빈 alt:
alt=""사용.
단계별 실습
따라하기: alt 속성 추가하기
다음 HTML에서 적절한 alt 텍스트를 추가해봅니다.
<!-- 수정 전 --><img src="profile.jpg"><img src="icon-search.svg"><a href="/products"><img src="btn-view-more.png"></a><img src="wave-decoration.png"><!-- 수정 후 --><img src="profile.jpg" alt="CEO 김철수, 회사 창립자"><img src="icon-search.svg" alt="" aria-hidden="true"><a href="/products"><img src="btn-view-more.png" alt="상품 더보기"></a><img src="wave-decoration.png" alt="">변형하기: 기존 페이지 alt 감사하기
현재 작업 중인 프로젝트 또는 자주 방문하는 웹사이트에서 alt 문제를 찾아봅니다.
Chrome DevTools 콘솔에서 다음 코드를 실행하면 alt가 없는 이미지 목록을 볼 수 있습니다.
document.querySelectorAll('img:not([alt])').forEach(img => { console.log('alt 없음:', img.src);});응용하기: axe로 이미지 접근성 검사하기
axe DevTools를 실행해 "Images must have alternative text" 위반 항목을 찾아봅니다. 각 이미지의 맥락을 고려해 적절한 alt 텍스트를 작성합니다.
정리와 확인
핵심 내용 요약
alt속성: 이미지의 텍스트 설명. 스크린리더, 검색엔진, 이미지 로드 실패 시 사용.- 정보 이미지: 내용을 구체적으로 설명하는 alt.
- 장식 이미지:
alt=""(빈 문자열) 사용. - 링크 이미지: 링크의 목적지(기능)를 alt로.
alt속성 생략 금지: 파일명이 읽힘.
확인 문제
문제 1. 장식용 이미지에 올바른 alt 설정 방법은?
<img src="decoration.png" alt=""><!-- alt="" 빈 문자열을 명시. 속성 자체를 생략하면 안 됨 -->문제 2. 다음 중 잘못된 alt는?
A: alt="그래프" ← 잘못됨 (너무 모호)
B: alt="2026년 매출 증가 추세" ← 올바름
C: alt="사진" ← 잘못됨 (불필요한 '사진' 단어)
D: alt="그래프 이미지" ← 잘못됨 ('이미지' 단어 불필요)
다음 챕터에서는 영상과 음성 콘텐츠의 접근성을 다룹니다. 청각장애인을 위한 자막, 영상 대본 제공 방법을 알아봅니다.