이미지와 멀티미디어 접근성

alt 텍스트 — 판단 기준

Alt Text — How to Decide

이미지 접근성의 핵심은 alt 속성입니다(WCAG 1.1.1, Level A). 정보 이미지는 내용과 기능을 간결하게 전달하는 alt를, 장식 이미지는 alt=""(빈 alt)를 제공해 스크린리더가 건너뛰게 합니다. alt 속성 자체를 생략하면 스크린리더가 파일명을 읽습니다 — '빈 alt'와 'alt 없음'은 완전히 다릅니다.

The core of image accessibility is the alt attribute (WCAG 1.1.1, Level A). Informative images get concise alt conveying content and function; decorative images get alt="" (empty alt) so screen readers skip them. Omitting the attribute makes screen readers read the filename — 'empty alt' and 'no alt' are completely different.

판단 기준은 맥락입니다. 같은 사진이라도 본문이 이미 설명하는 분위기용이면 장식(alt=""), 내용을 전달하면 정보 이미지입니다. 기능 이미지(링크·버튼 안의 아이콘)는 모양이 아니라 기능을 씁니다 — 돋보기 아이콘의 alt는 '돋보기'가 아니라 '검색'입니다. '이미지', '사진' 같은 중복 표현은 넣지 않습니다(스크린리더가 이미 유형을 알림). W3C의 alt 결정 트리(alt Decision Tree)가 실무 판단에 유용합니다.

Context decides. The same photo is decorative (alt="") when the body text already tells the story, informative when it carries content. Functional images (icons inside links and buttons) describe the function, not the appearance — a magnifier icon's alt is 'Search,' not 'magnifying glass.' Skip redundant phrases like 'image of' (screen readers already announce the type). The W3C alt Decision Tree is a useful practical guide.

복잡한 이미지와 텍스트 이미지

Complex Images and Images of Text

차트·그래프·인포그래픽 같은 복잡한 이미지는 짧은 alt로 요약하고, 상세 데이터는 본문 텍스트, 데이터 테이블, 또는 aria-describedby로 연결한 별도 설명으로 제공합니다. '2024년 매출 추이 차트'라는 alt만으로는 데이터가 전달되지 않습니다 — 핵심 경향('3분기에 40% 증가')을 요약하거나 표를 병행하세요.

For complex images — charts, graphs, infographics — provide a short summarizing alt and put the detail in body text, a data table, or a description linked via aria-describedby. Alt reading 'Chart of 2024 revenue' conveys no data — summarize the key trend ('40% growth in Q3') or pair it with a table.

텍스트를 이미지로 만든 콘텐츠(배너 속 문구 등)는 가능하면 실제 텍스트로 구현해야 합니다(WCAG 1.4.5 텍스트 이미지, Level AA — 로고는 예외). 이미지 속 텍스트는 확대 시 깨지고, 사용자 스타일(글꼴·간격) 적용이 불가능하며, 번역도 되지 않습니다.

Content rendered as images of text (banner slogans, etc.) should be real text wherever possible (WCAG 1.4.5 Images of Text, Level AA — logos exempt). Text in images pixelates when zoomed, can't receive user styles (font, spacing), and can't be translated.

미디어 대안 — 기준 레벨 지도

Media Alternatives — The Level Map

시간 기반 미디어의 WCAG 요구는 레벨별로 외워둘 가치가 있습니다. Level A: 오디오 전용·비디오 전용 콘텐츠의 대안(1.2.1 — 팟캐스트엔 대본), 녹화 비디오의 자막(1.2.2), 녹화 비디오의 오디오 설명 또는 미디어 대안(1.2.3). Level AA: 실시간 자막(1.2.4), 녹화 비디오의 오디오 설명(1.2.5).

The WCAG requirements for time-based media are worth memorizing by level. Level A: alternatives for audio-only and video-only content (1.2.1 — transcripts for podcasts), captions for prerecorded video (1.2.2), audio description or media alternative for prerecorded video (1.2.3). Level AA: live captions (1.2.4) and audio description for prerecorded video (1.2.5).

오디오 설명(Audio Description)은 대사 사이에 화면에서 일어나는 시각 정보(장면 전환, 표정, 자막 없는 텍스트)를 내레이션으로 설명합니다. 대안으로 처음부터 시각 정보를 대사에 녹여 말하는 통합 설명(integrated description) 기법도 있습니다. 자동 재생 오디오는 3초 이상이면 정지 수단이 필요합니다(1.4.2).

Audio description narrates visual information between lines of dialogue — scene changes, expressions, on-screen text. An alternative technique is integrated description: scripting the visuals into the dialogue from the start. Auto-playing audio longer than three seconds needs a way to stop it (1.4.2).

SVG 접근성

SVG Accessibility

인라인 SVG는 `<svg role="img">`로 이미지 역할을 명시하고, `<title>`로 짧은 설명, 필요 시 `<desc>`로 긴 설명을 제공한 뒤 aria-labelledby로 연결합니다. `<img src="*.svg">`로 삽입하면 일반 이미지처럼 alt 속성을 사용합니다.

For inline SVG, declare image semantics with `<svg role="img">`, provide a short `<title>` and, when needed, a longer `<desc>`, connected via aria-labelledby. When embedding with `<img src="*.svg">`, use the alt attribute as with any image.

장식용 SVG는 aria-hidden="true"(그리고 focusable="false" — 일부 구형 브라우저의 SVG 포커스 방지)로 숨깁니다. 인터랙티브 SVG(차트에 호버·클릭)는 그 자체가 커스텀 위젯이므로 키보드 조작과 상태 낭독까지 별도로 설계해야 합니다.

Hide decorative SVGs with aria-hidden="true" (plus focusable="false" to prevent SVG focus in some legacy browsers). Interactive SVGs (hover/click charts) are custom widgets in their own right, requiring keyboard operation and state announcements by design.