이미지와 멀티미디어 접근성
한국어 해설 KO
장식 이미지 vs 정보 이미지 구분, 자막, 오디오 설명 제공 방법을 학습합니다.
학습 목표
장식 이미지와 정보 이미지의 alt 텍스트 차이를 설명할 수 있다
복잡한 이미지(차트, 그래프)의 대체 텍스트 제공 방법을 이해한다
자막과 오디오 설명의 WCAG 요구사항을 설명할 수 있다
SVG 접근성 마크업 방법을 이해한다
이미지 접근성의 핵심은 alt 속성입니다(WCAG 1.1.1, Level A). 정보 이미지는 내용을 간결하게 전달하는 alt 텍스트를 제공합니다. 장식 이미지(순수 시각 장식)는 alt=""(빈 alt)로 설정하여 스크린리더가 건너뛰도록 합니다. alt 속성 자체를 생략하면 스크린리더가 파일명을 읽어버립니다.
복잡한 이미지(차트, 그래프, 인포그래픽): 짧은 alt로 이미지를 요약하고, 상세한 데이터는 본문 텍스트, 데이터 테이블, 또는 aria-describedby로 연결된 별도 설명을 제공합니다. 텍스트로 된 이미지(로고 제외)는 가능하면 실제 텍스트를 사용해야 합니다.
비디오 자막: 미리 녹화된 비디오는 자막 필수(WCAG 1.2.2, Level A). 실시간 비디오는 자막 필수(WCAG 1.2.4, Level AA). 오디오 설명(Audio Description)은 시각적으로만 전달되는 정보를 음성으로 설명합니다(WCAG 1.2.5, Level AA). 음성 전용 콘텐츠(팟캐스트)는 텍스트 대본(Transcript)이 필요합니다(WCAG 1.2.1, Level A).
SVG 접근성: `<svg>` 요소에 role="img"를 추가하고, `<title>` 요소로 짧은 설명을, `<desc>` 요소로 긴 설명을 제공합니다. aria-labelledby로 title과 desc를 연결합니다. 장식용 SVG는 aria-hidden="true"로 숨깁니다.
Original Text EN
Learn how to distinguish decorative vs informative images, and provide captions and audio descriptions.
Learning Objectives
Explain the difference in alt text for decorative vs informative images
Understand how to provide text alternatives for complex images
Describe WCAG requirements for captions and audio descriptions
Understand SVG accessibility markup methods
The key to image accessibility is the alt attribute (WCAG 1.1.1, Level A). Informative images need concise alt text describing their content. Decorative images (pure visual decoration) use alt="" (empty alt) so screen readers skip them. Omitting the alt attribute entirely causes screen readers to read the filename.
Complex images (charts, graphs, infographics): Provide a short alt summarizing the image, and detailed data through body text, data tables, or a separate description connected via aria-describedby. Images of text (except logos) should use actual text whenever possible.
Video captions: Prerecorded video requires captions (WCAG 1.2.2, Level A). Live video requires captions (WCAG 1.2.4, Level AA). Audio descriptions narrate visually-only conveyed information (WCAG 1.2.5, Level AA). Audio-only content (podcasts) requires a text transcript (WCAG 1.2.1, Level A).
SVG accessibility: Add role="img" to the `<svg>` element, provide a short description with `<title>` and a long description with `<desc>`. Connect them using aria-labelledby. Decorative SVGs should use aria-hidden="true".