WCAG 성공 기준 · Level A
WCAG 1.2.3: 오디오 설명 또는 미디어 대체 수단 (사전 녹화)
WCAG 1.2.3은 사전에 녹화된 동기화 미디어(오디오가 포함된 비디오)에 대해 시각적 콘텐츠의 오디오 설명 또는 전체 텍스트 대체물을 제공하도록 요구하여, 시각적으로 전달되는 정보를 시각장애인이나 저시력 사용자도 접근할 수 있도록 보장한다.
- Level A
- Wcag
- Wcag 2 2 a
- 지각 가능
- 접근성
이 규칙의 의미
WCAG 성공 기준 1.2.3은 시각장애인과 저시력 사용자가 동영상 콘텐츠를 이용할 때 마주치는 가장 근본적인 장벽 중 하나, 즉 말로 표현되지 않는 시각 정보의 손실을 다룬다. 이 기준은 모든 사전 녹화된 동기화 미디어 — 즉, 오디오와 함께 제공되는 동영상 콘텐츠 — 에 대해 웹 제작자가 시각 트랙에 대한 오디오 설명을 제공하거나 텍스트 형태의 완전한 미디어 대체 수단을 제공해야 한다고 규정한다.
오디오 설명은 동영상의 오디오 트랙에 추가되는 내레이션으로, 기본 오디오만으로는 이해할 수 없는 중요한 시각적 세부 정보를 설명한다. 이러한 설명은 일반적으로 대화의 자연스러운 공백에 삽입되거나, 복잡한 시각적 사건을 설명할 시간을 확보하기 위해 동영상이 잠시 일시정지될 수 있다. 예를 들어, 교육용 동영상에서 발표자가 화이트보드에 도표를 그리지만 이에 대해 말로 설명하지 않는 경우, 오디오 설명은 무엇이 그려지고 있는지, 그리고 그것이 왜 중요한지를 설명해 준다.
미디어에 대한 완전한 텍스트 대체 수단은 동기화 미디어에 포함된 모든 정보를 — 오디오 콘텐츠(대화, 내레이션, 음향 효과)와 시각 콘텐츠(행동, 배경, 화면의 텍스트, 화자 식별)를 모두 — 텍스트 형태로 전달하는 문서이다. 이는 단순한 대본보다 더 확장된 형태로, 동영상을 볼 수도 들을 수도 없는 사용자가 동영상이 전달하는 모든 정보를 이해할 수 있을 정도로 시각적 사건을 정확하게 설명해야 한다.
이 기준은 특히 사전 녹화된 동기화 미디어에 적용된다. 라이브 동영상 스트림은 다른 기준(자막에 대한 1.2.4)에서 다루며, 오디오 전용 콘텐츠는 1.2.1에 의해 다뤄진다. 중요한 점은, 동영상 트랙이 순수하게 장식적일 경우 — 예를 들어, 아무 정보도 전달하지 않는 애니메이션 배경 — 이 기준이 적용되지 않는다는 것이다. 마찬가지로, 동영상의 오디오 트랙이 이미 모든 의미 있는 시각 정보를 완전히 설명하는 경우(때때로 “동등한 오디오”라고 불리는 상황), 추가적인 오디오 설명은 필요하지 않다.
1.2.3을 충족하려면, 각 사전 녹화된 동기화 미디어에 대해 다음 중 적어도 하나는 참이어야 한다. 오디오 설명이 제공되거나, 모든 오디오 및 시각 정보를 전달하는 텍스트 대체 수단이 미디어에 링크되거나 바로 인접한 위치에 있어야 한다. 동영상 콘텐츠에 의미 있는 시각 요소 — 화면의 텍스트, 그래픽 데이터, 핵심 감정을 전달하는 표정, 시연 단계 — 가 포함되어 있음에도, 이를 전달하는 오디오나 텍스트 대체 수단이 전혀 없을 때 실패가 발생한다.
1.2.3은 레벨 A 요구사항이라는 점에 유의해야 하며, 이는 최소한의 기대 수준을 의미한다. 보다 강력한 레벨 AA 기준인 1.2.5(오디오 설명 — 사전 녹화)는 필요한 모든 경우에 오디오 설명을 요구하는 반면, 1.2.3은 레벨 A에서 텍스트 대체 수단을 그 대체재로 허용한다.
왜 중요한가
세계보건기구에 따르면 전 세계적으로 약 22억 명이 어떤 형태로든 시각 장애를 가지고 있다. 시각장애인 사용자에게 오디오 설명이나 텍스트 대체 수단이 없는 동영상 콘텐츠는 시각 정보의 원천으로서 완전히 접근 불가능하다. 스크린 리더는 동영상 요소가 존재한다는 사실과 관련 자막을 읽어 줄 수는 있지만, 동영상 프레임의 시각 콘텐츠 자체를 해석할 수는 없다. 오디오 설명이나 미디어 대체 수단이 없다면, 사용자는 동영상이 보여 주지만 말로 표현하지 않는 모든 내용을 그대로 놓치게 된다.
구체적인 상황을 생각해 보자. 한 터키 전자상거래 플랫폼이 스마트 홈 기기 제품 시연 동영상을 게시한다. 동영상에는 발표자가 스마트폰 앱과 기기를 페어링하고, 두 화면의 메뉴를 탐색하며, 특정 포트에 케이블을 꽂는 장면이 나온다. 발표자의 내레이션은 기기의 장점에 초점을 맞추고 있으며, 어떤 버튼을 누르는지, 어떤 메뉴 항목을 선택하는지는 설명하지 않는다. 스크린 리더를 사용하는 시각장애인 사용자가 이 동영상을 볼 경우, 내레이션만 들을 수 있을 뿐, 집에서 설정을 따라 할 수 있게 해 줄 절차적 시각 정보는 전혀 받지 못한다. 오디오 설명이나 상세한 텍스트 대체 수단이 있다면, 그 사용자는 동일한 안내 콘텐츠에 완전히 접근할 수 있게 된다.
시각장애인뿐 아니라, 상세한 텍스트 대체 수단은 빠르게 진행되는 동영상보다 글로 된 설명을 더 쉽게 처리하는 인지 장애 사용자에게도 도움이 된다. 또한 동영상을 스트리밍할 수 없는 대역폭 제약 환경의 사용자, 동영상이 차단된 기업 네트워크의 사용자, 특정 동영상 형식을 지원하지 않는 기기나 브라우저를 사용하는 사용자에게도 유익하다. 검색 엔진은 텍스트 대체 수단도 색인화하므로, 이를 제공하면 동영상 콘텐츠를 전체 텍스트 검색을 통해 찾을 수 있게 되어 SEO를 개선하는 효과도 있다. 이는 접근성 가치와 더불어 의미 있는 비즈니스 이점이다.
동영상 컨트롤을 정밀하게 조작하기 어려운 운동장애 사용자에게는, 텍스트 대체 수단이 있으면 일시정지, 되감기, 재생 컨트롤을 다루느라 애쓰지 않고도 자신의 속도에 맞춰 콘텐츠를 소비할 수 있다. 요약하면, 오디오 설명과 미디어 대체 수단은 매우 폭넓은 사용자 집단을 지원하며, 이들을 엄격히 필요로 하는 사용자 범위를 훨씬 넘어 동영상 콘텐츠의 전반적인 품질과 도달 범위를 향상시킨다.
관련 Axe-core 규칙
WCAG 1.2.3은 수동 테스트를 요구한다. 이 기준 위반을 자동으로 표시하는 axe-core 규칙은 없으며, 그 이유를 이해하면 테스터가 수동으로 무엇을 확인해야 하는지 더 명확해진다.
- 수동 테스트 필요 — 시각 콘텐츠 분석: 자동화 도구는
<video>요소,<track>요소, 또는 관련 대본 링크의 존재 여부는 감지할 수 있지만, 오디오 설명이나 텍스트 대체 수단의 내용이 충분한지는 평가할 수 없다. 충분성은 모든 의미 있는 시각 정보가 전달되는지에 달려 있으며, 이는 사람이 동영상을 보고, 대체 수단을 읽고, 둘을 비교해야 판단할 수 있는 문제다. axe 스캔은<track kind='descriptions'>요소가 존재하는지 확인할 수 있지만, 그 설명이 실제로 동영상의 모든 중요한 시각적 사건을 포괄하는지는 검증할 수 없다. - 수동 테스트 필요 — 동등성 평가: 기본 오디오 트랙이 이미 모든 시각 정보를 설명하고 있어(추가 오디오 설명이 불필요한)지 여부를 판단하는 것은 본질적으로 콘텐츠에 대한 판단이다. 사람 검토자가 동영상을 시청하고, 시각장애인이 오디오만 들었을 때 의미 있는 정보를 놓치지 않는지 평가해야 한다. 어떤 자동 규칙도 이를 신뢰할 수 있게 판단할 수 없다.
- 수동 테스트 필요 — 텍스트 대체 수단의 완전성: 오디오 설명 대신 텍스트 대체 수단(완전한 미디어 대체 수단)이 제공되는 경우, 사람이 텍스트 대체 수단을 읽고 동영상과 비교하여 모든 시각적 사건, 화면의 텍스트, 의미 있는 행동이 반영되어 있는지 확인해야 한다. 자동화 도구는 대본 링크가 존재하는지 여부는 확인할 수 있지만, 그 대본이 완전하고 정확한지는 평가할 수 없다.
테스트 방법
- 자동 스캔 기준선: 동영상을 포함한 페이지에 대해 axe DevTools 또는 Google Lighthouse를 실행한다. 두 도구 모두 1.2.3 위반을 직접 표시하지는 않지만, 1.2.2(자막)에 따라 표시되는 누락된
<track>요소나 이미지 기반 미디어에 대한 누락된 텍스트 대체 수단 등 관련 문제를 드러낼 수 있다. 페이지에 존재하는 동영상 요소를 모두 기록하여, 1.2.3에 따라 어떤 것들이 수동 검토가 필요한지 파악한다. - 동기화 미디어 식별: 페이지에서 모든
<video>요소(또는 YouTube, Vimeo iframe과 같은 임베디드 서드파티 플레이어)를 찾는다. 각 동영상이 사전 녹화된 것인지, 그리고 동기화된 것인지(즉, 의미 있는 오디오와 비디오 트랙을 모두 갖추었는지) 확인한다. 동영상이 오디오 전용이거나 장식적인 비디오 트랙만 가진 경우, 1.2.3의 범위에서 제외된다. - 소리를 켜고 동영상 시청: 동영상을 일반적으로 시청하면서, 오디오에서는 설명되지 않고 시각적으로만 전달되는 정보에 특히 주의를 기울인다. 일반적인 예로는 화면의 텍스트 오버레이, 그려지는 도표나 차트, 물리적 과정을 단계별로 시연하는 장면, 감정적 의미를 담은 표정이나 몸짓, 여러 사람이 화면에 등장할 때의 화자 식별 등이 있다.
- 오디오 설명 트랙 확인: 동영상 요소의 마크업에서
<track kind='descriptions'>요소를 찾는다. 존재한다면, 동영상 플레이어에서 설명을 활성화(또는 이를 표시하는 브라우저 사용)한 뒤 동영상을 다시 시청한다. 3단계에서 파악한 모든 의미 있는 시각적 사건이 적절한 시점에 오디오 설명 트랙에서 설명되는지 확인한다. - 완전한 텍스트 대체 수단 확인: 오디오 설명 트랙이 없다면, 동영상 인접 또는 바로 뒤에 있는 대본 링크나 완전한 미디어 대체 수단을 찾는다. 링크된 문서나 인라인 텍스트가 모든 오디오 콘텐츠(대화, 내레이션, 관련 음향 효과)와 모든 시각 콘텐츠(행동, 화면의 텍스트, 배경 설명, 화자 식별)를 설명하는지 확인한다.
- 스크린 리더 검증(NVDA + Firefox): NVDA를 실행한 상태에서 페이지를 연다. 동영상 요소로 이동하여 NVDA가 동영상의 존재와 관련 컨트롤을 알리는지 확인한다. 텍스트 대체 수단이 인라인 또는 링크로 제공되는 경우, 그 위치로 이동하여 NVDA가 내용을 빠짐없이 읽는지 확인한다. 참고: NVDA는 동영상 프레임의 시각 콘텐츠를 읽을 수 없으며, 이는 3단계에서 사람에 의한 비교가 필수적인 이유를 잘 보여 준다.
- 스크린 리더 검증(VoiceOver + macOS의 Safari): VoiceOver를 활성화하고 동영상으로 이동한다. VoiceOver의 로터를 사용해 동영상 요소와 관련 트랙 또는 링크 요소를 찾는다. 설명 트랙이 있는 경우, Safari의 미디어 컨트롤을 통해 접근 가능한지 확인한다.
- 서드파티 플레이어: YouTube 임베드의 경우, 동영상에 오디오 설명 버전(종종 설명란에 별도 동영상으로 링크됨)이 있는지, 또는 관련 대본이 제공되고 임베딩 페이지에 링크되어 있는지 확인한다. Vimeo의 경우, 동영상의 접근성 설정을 확인한다. 서드파티 플레이어를 사용한다고 해서 1.2.3이 자동으로 충족되는 것은 아니며, 페이지 제작자가 대체 수단을 제공하거나 링크하는 책임을 진다.
수정 방법
시나리오 1: 오디오 설명이 없는 HTML5 동영상 — 잘못된 예
<!-- A product demo video with meaningful visual content but no audio description or text alternative -->
<video controls width='800'>
<source src='product-demo.mp4' type='video/mp4'>
<track kind='captions' src='captions-en.vtt' srclang='en' label='English' default>
</video>
시나리오 1: 오디오 설명 트랙이 있는 HTML5 동영상 — 올바른 예
<!-- Audio description track added using kind='descriptions'.
The VTT file contains timed narrations of visual events
that are not conveyed through the main audio. -->
<video controls width='800'>
<source src='product-demo.mp4' type='video/mp4'>
<track kind='captions' src='captions-en.vtt' srclang='en' label='English' default>
<track kind='descriptions' src='descriptions-en.vtt' srclang='en' label='Audio Descriptions'>
</video>
시나리오 2: 텍스트 대체 수단이 없는 HTML5 동영상 — 잘못된 예
<!-- Tutorial video with on-screen steps and diagrams; no transcript provided -->
<section>
<h2>How to Configure Your Router</h2>
<video controls width='800'>
<source src='router-setup.mp4' type='video/mp4'>
<track kind='captions' src='captions-tr.vtt' srclang='tr' label='Turkish' default>
</video>
</section>
시나리오 2: 완전한 미디어 대체 수단이 있는 HTML5 동영상 — 올바른 예
<!-- Full media alternative linked immediately after the video.
The linked page contains both transcript text (all dialogue and narration)
and descriptions of all visual steps shown in the video. -->
<section>
<h2>How to Configure Your Router</h2>
<video controls width='800'>
<source src='router-setup.mp4' type='video/mp4'>
<track kind='captions' src='captions-tr.vtt' srclang='tr' label='Turkish' default>
</video>
<p>
<a href='router-setup-full-transcript.html'>
Full text alternative for this video (includes all dialogue and visual descriptions)
</a>
</p>
</section>
시나리오 3: 추가 대체 수단이 없는 YouTube 임베드 — 잘못된 예
<!-- Embedded YouTube video; the video on YouTube has no audio description
and no transcript is linked on this page -->
<iframe width='560' height='315'
src='https://www.youtube.com/embed/XXXXXXXXXXX'
title='Annual Report Highlights 2024'
allowfullscreen>
</iframe>
시나리오 3: 텍스트 대체 수단 링크가 있는 YouTube 임베드 — 올바른 예
<!-- Embedding page provides a link to a full text alternative.
The linked document describes all visual content in the video
(slides, charts, on-screen data) in addition to the spoken content. -->
<figure>
<iframe width='560' height='315'
src='https://www.youtube.com/embed/XXXXXXXXXXX'
title='Annual Report Highlights 2024'
allowfullscreen>
</iframe>
<figcaption>
<a href='annual-report-2024-full-transcript.html'>
Read the full text alternative for Annual Report Highlights 2024
</a>
</figcaption>
</figure>
시나리오 4: 오디오가 이미 모든 시각 콘텐츠를 설명하는 동영상(예외) — 올바른 예
<!-- This video features a narrator who explicitly describes every action
being performed on screen: 'I am now clicking the blue Settings button
in the top-right corner and selecting Account from the dropdown menu.'
Because the audio fully conveys all visual information, no separate
audio description is required under 1.2.3. -->
<video controls width='800'>
<source src='fully-described-tutorial.mp4' type='video/mp4'>
<track kind='captions' src='captions-en.vtt' srclang='en' label='English' default>
</video>
<!-- Document the rationale in an internal accessibility conformance note -->
자주 발생하는 실수
- 오디오 설명 대신 자막 제공: 자막은 청각장애인을 위해 말로 된 오디오를 텍스트로 옮기는 것이며, 시각장애인을 위한 시각 정보 설명을 제공하지 않는다.
<track kind='captions'>요소를 추가하면 1.2.2는 충족하지만 1.2.3은 충족하지 못한다. 이는 서로 다른 장애 집단을 대상으로 하는 두 개의 별도 요구사항이다. - 대화만 포함된 대본 링크 제공: 1.2.3을 위한 텍스트 대체 수단은 화면의 텍스트, 도표, 물리적 행동, 화자 식별 등 모든 의미 있는 시각 콘텐츠를 설명해야 하며, 말로 표현된 내용만 다루어서는 안 된다. 대본(스크립트)만 포함된 대본은 동영상에 시각 전용 정보가 포함된 경우 이 기준을 충족하지 못하는 경우가 많다.
- 텍스트 대체 수단 링크를 동영상에서 멀리 떨어진 곳에 배치: 완전한 미디어 대체 수단이 각주나 별도 페이지 깊숙한 곳에 있고, 명확하고 인접한 링크가 없다면 사용자가 이를 찾지 못할 수 있다. 링크는 스크린 리더 사용자가 자연스러운 읽기 순서에서 접할 수 있도록 동영상 요소 바로 앞이나 뒤에 배치해야 한다.
- YouTube 자동 생성 대본이 기준을 충족한다고 가정: YouTube 자동 생성 대본은 말로 된 오디오만 다루며, 시각 콘텐츠를 설명하지 않고, 부정확한 경우도 많다. 이는 1.2.3에 따른 충분한 완전한 미디어 대체 수단이 아니다.
<track kind='descriptions'>요소를 사용하지만 VTT 파일을 비워 두거나 불완전하게 작성: 트랙 요소가 존재하는 것만으로는 충분하지 않으며, VTT 파일에는 모든 의미 있는 시각적 사건에 대한 정확하고 적절한 타이밍의 설명이 포함되어야 한다. 비어 있거나 형식적인 수준의 VTT 파일은 기준을 충족하지 못한다.- 화면 텍스트 오버레이 설명 누락: 마케팅 동영상은 통계, 제품명, 행동 유도 문구 등을 애니메이션 오버레이로 자주 표시한다. 이러한 오버레이가 내레이터에 의해 읽히지 않는다면, 오디오 설명이나 텍스트 대체 수단에 포함되어야 하는데, 제작자가 이를 자주 간과한다.
- 너무 모호한 오디오 설명 작성: “발표자가 과정을 시연한다”와 같은 설명은 충분하지 않다. 효과적인 설명은 구체적인 행동, 인터페이스 요소, 의미 있는 경우 색상, 공간적 관계를 명시해야 한다. 예: “발표자가 도구 모음 오른쪽에 있는 빨간색 Delete 버튼을 클릭한 다음, 대화 상자에서 OK를 선택해 확인합니다.”
- 정보를 담은 자동 재생 또는 배경 동영상에 대체 수단을 제공하지 않음: 자동으로 재생되며 중요한 정보를 표시하는 동영상(예: 제품 기능을 텍스트 오버레이로 보여 주는 히어로 섹션)은 여전히 동기화 미디어이며, 의미 있는 콘텐츠를 전달한다면 기준을 준수해야 한다.
- 검증 없이 동영상을 장식용으로 간주: 팀이 실제로는 제품 정보나 안내 콘텐츠를 전달하는 동영상임에도, 요구사항을 피하기 위해 “장식용”이라고 표시하는 경우가 있다. 장식용 예외는 동영상이 인접 텍스트에서 이미 제공되는 정보 외에 의미 있는 정보를 전혀 추가하지 않을 때에만 적용된다.
- 동영상이 업데이트될 때 오디오 설명이나 텍스트 대체 수단을 갱신하지 않음: 동영상 콘텐츠가 변경되면 — 예를 들어, 제품 단계가 수정되거나 가격 데이터가 업데이트되는 경우 — 오디오 설명과 텍스트 대체 수단도 이에 맞게 업데이트해야 한다. 원래 대체 수단이 정확했더라도, 이후에 내용이 바뀌면 갱신되지 않은 대체 수단은 준수 실패에 해당한다.
터키 접근성 규정과의 관계
2025년 6월 21일 관보 제32933호에 게재된 터키 대통령령 2025/10은 터키에서 운영되는 광범위한 공공 및 민간 기관에 대해 의무적인 웹 접근성 기준을 수립한다. 이 대통령령은 국제적으로 인정된 접근성 표준을 참조하며, WCAG 2.2 레벨 A 및 레벨 AA를 준수의 기술적 기준선으로 삼는다. WCAG 1.2.3은 레벨 A 요구사항이기 때문에, 이 대통령령 하에서 가장 기본적인 의무 중 하나에 해당하며, 이를 무시할 수 있도록 허용하는 더 낮은 수준의 준수 단계는 존재하지 않는다.
대통령령은 다양한 유형의 기관을 포괄한다. 부처, 지방자치단체, 국립대학 및 기타 공공 기관을 포함한 공공기관과 정부 기관은 대통령령 공포일로부터 1년 이내에 준수를 달성해야 한다. 대통령령의 적용을 받는 민간 부문에는 전자상거래 플랫폼, 은행 및 금융기관, 병원 및 민간 의료 제공자, 가입자 200,000명 이상인 통신사, 허가받은 여행사, 민간 운송 회사, 그리고 교육부(MoNE)의 인가를 받은 사립학교 등이 포함된다. 이러한 민간 부문 조직은 공포일로부터 2년 이내에 준수를 달성해야 한다.
오늘날 사실상 모든 주요 터키 기관과 기업이 동영상 콘텐츠를 게시하고 있다는 점을 고려하면, WCAG 1.2.3은 동영상을 게시하는 모든 적용 대상 기관에 대해 구체적이고 집행 가능한 의무를 부과한다. 모바일 앱 사용 방법을 설명하는 동영상 튜토리얼을 게시하는 은행, 환자 등록 절차 안내 동영상을 게시하는 공공 병원, 요금제 비교를 화면에 표시하는 홍보 동영상을 공유하는 통신사, 제품 시연 동영상을 포함하는 전자상거래 사이트 등은 모두 각 사전 녹화된 동기화 미디어 자산마다 오디오 설명 또는 완전한 텍스트 대체 수단을 제공해야 한다.
대통령령 요구사항을 준수하지 않을 경우 규제 당국의 감시와 평판 훼손을 초래할 수 있으며, 터키의 디지털 접근성 집행이 성숙해짐에 따라 적용 대상 기관에 대한 법적 위험도 증가할 수 있다. 조직은 WCAG 1.2.3을 선택적 개선이 아니라 기본적인 법적 의무로 인식해야 한다. 실무적으로는 모든 동영상 콘텐츠의 목록을 작성하고, 어떤 동영상이 시각 전용 정보를 포함하는지 평가하며, 해당 동영상에 대해 체계적으로 오디오 설명이나 완전한 텍스트 대체 수단을 제작하는 것을 의미한다. 새로운 동영상 제작 워크플로에는 자막과 번역 자막과 함께 설명 스크립트와 텍스트 대체 수단을 표준 산출물로 포함하는 접근성 산출물이 포함되어야 한다.
출처 및 참고자료
- W3C Understanding 1.2.3 Audio Description or Media Alternative (Prerecorded)
- W3C Techniques for 1.2.3
- WebAIM: Captions, Transcripts, and Audio Descriptions
- MDN: HTMLTrackElement kind attribute
- MDN: The HTML track element
- W3C Technique G78: Providing a second, user-selectable, audio track
- W3C Technique G69: Providing an alternative for time-based media
