🖼️
EPISODE 04
alt 작성법 · WebVTT 자막 · 색맹 배색 · prefers-reduced-motion
이미지·미디어 접근성
alt 텍스트 작성 원칙(장식 vs 정보 vs 링크 vs 버튼), 비디오 자막(WebVTT), 색맹을 고려한 배색, 그리고 움직임 민감 사용자를 위한 prefers-reduced-motion까지.
altWebVTTcolor blindnessreduced-motion
소요 시간
⏱ 45분
난이도
📊 중급
선수 조건
🎯 a11y-03
결과물
이미지·영상·애니메이션 모두 접근성 준수
이 강의에서 배우는 것
- 1장식/정보/링크/버튼 이미지의 alt 작성 원칙을 안다
- 2<track>으로 비디오 자막(WebVTT)을 추가한다
- 3색맹을 고려해 색상 + 아이콘 + 텍스트로 정보를 전달한다
- 4@media (prefers-reduced-motion) 으로 움직임을 제어한다
1. alt 텍스트 작성 원칙
장식용: alt=""
html
<img src="decoration-wave.svg" alt="">
<img src="spacer.gif" alt="">정보 전달: 구체적인 설명
html
<!-- ✗ -->
<img src="chart.png" alt="차트">
<img src="photo.jpg" alt="사진">
<!-- ✓ -->
<img src="sales-chart.png" alt="2024년 1분기 매출: 1월 800만원, 2월 950만원, 3월 1,200만원. 전분기 대비 50% 성장.">
<img src="profile.jpg" alt="김철수, 개발팀 시니어 엔지니어">링크 이미지: 목적지 설명
html
<!-- ✗ 이미지 설명 -->
<a href="/home"><img src="logo.png" alt="파란색 로고"></a>
<!-- ✓ 링크의 목적지 -->
<a href="/home"><img src="logo.png" alt="메인 페이지로 이동"></a>버튼 이미지
html
<!-- ✗ -->
<button><img src="close.svg" alt="X"></button>
<!-- ✓ 동작 설명 -->
<button><img src="close.svg" alt="닫기"></button>
<!-- 또는 -->
<button aria-label="닫기"><img src="close.svg" alt=""></button>복잡한 이미지
html
<figure>
<img src="complex-chart.png" alt="월별 판매 추이 차트" aria-describedby="chart-desc">
<figcaption id="chart-desc">
2024년 1~6월 판매 데이터. 1월 800, 2월 950, 3월 1200,
4월 1100, 5월 1350, 6월 1500건. 전반적 상승 추세.
</figcaption>
</figure>2. 비디오 자막 (WebVTT)
html
<video controls>
<source src="lecture.mp4" type="video/mp4">
<track
kind="captions" <!-- captions: 청각 장애인용 (말+음향), subtitles: 외국어 -->
src="lecture-ko.vtt"
srclang="ko"
label="한국어 자막"
default
>
</video>.vtt 파일 형식
text
WEBVTT
00:00:00.000 --> 00:00:03.500
안녕하세요. 오늘은 웹 접근성에 대해 알아봅니다.
00:00:03.500 --> 00:00:07.000
첫 번째 주제는 이미지 alt 텍스트입니다.
00:00:07.000 --> 00:00:10.500
[화면 전환음]
alt 속성은 이미지를 텍스트로 설명합니다.3. 색맹을 고려한 배색
약 8%(남성 기준)가 색각 이상. 적록 색맹이 가장 흔함.
html
<!-- ✗ 색상만으로 -->
<p style="color: red">오류가 발생했습니다.</p>
<p style="color: green">성공했습니다.</p>
<!-- ✓ 색상 + 아이콘 + 텍스트 -->
<p class="error">
<span aria-hidden="true">✗</span>
오류가 발생했습니다.
</p>
<p class="success">
<span aria-hidden="true">✓</span>
성공했습니다.
</p>도구: Color Oracle (https://colororacle.org) — 화면 전체를 색맹 시뮬레이션으로 볼 수 있음.
4. prefers-reduced-motion
전정기관 장애·간질 등으로 움직임에 민감한 사용자를 위해.
css
.spinner { animation: spin 1s linear infinite; }
.slide { transition: transform 0.3s ease; }
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; }
.slide { transition: none; }
video[autoplay] { animation: none; }
}javascript
const prefersReducedMotion =
window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!prefersReducedMotion) {
element.classList.add('animate');
}