WCAG 1.2.5: 오디오 설명(사전 녹화)

이 규칙의 의미

\n

WCAG 1.2.5 — 오디오 설명(사전 녹음)은 원칙 1: 지각 가능(Perceivable) 아래의 AA 레벨 성공 기준입니다. 이 기준은 비디오가 포함된 모든 사전 녹음된 동기화 미디어에 대해 오디오 설명을 제공할 것을 요구합니다. 오디오 설명은 비디오의 기본 오디오에 추가되는 내레이션 트랙으로, 기존 대사나 오디오만으로는 전달되지 않는 중요한 시각 정보 — 예를 들어 동작, 장면 전환, 화면의 텍스트, 표정, 기타 시각적 요소 — 를 설명합니다.

\n

이 기준은 WCAG에서 오디오와 비디오 트랙이 서로 또는 시간 기반의 인터랙티브 구성 요소와 동기화되어 결합된 콘텐츠로 정의하는 동기화 미디어에 적용됩니다. 여기에는 동영상 튜토리얼, 교육용 영화, 녹화된 웨비나, 홍보 영상, 제품 데모, 뉴스 방송 등이 포함됩니다. 오디오만 있는 콘텐츠, 비디오만 있는 콘텐츠(1.2.1에서 별도로 다룸), 또는 라이브 비디오 스트림(해당되는 경우 AAA 레벨의 1.2.6에서 다룸)에는 적용되지 않습니다.

\n

통과하려면, 오디오가 있는 모든 사전 녹음된 비디오에 대해 사용자가 활성화할 수 있는 추가 오디오 설명 트랙이 있거나, 내레이터가 복잡한 시각 콘텐츠를 설명할 수 있도록 일시 정지를 삽입한 확장 오디오 설명 버전의 비디오가 있어야 합니다. 또는, 기존 오디오 트랙이 이미 비디오에 존재하는 모든 시각 정보를 완전히 전달하고 — 즉, 기존 내레이션이나 대사에서 설명되지 않은 의미 있는 시각적 사건이 아무것도 없다면 — 추가 오디오 설명은 필요하지 않습니다.

\n

실패는 비디오 콘텐츠를 이해하는 데 중요한 시각 정보가 이미지 트랙에만 제시되고 이에 상응하는 음성 설명이 전혀 없을 때 발생합니다. 예를 들어, 발표자가 화면에서 소프트웨어 단계를 클릭하는 모습을 보여주면서 말로는 “여기를 클릭한 다음 이 옵션을 선택합니다”라고만 하는 교육 영상은, 오디오 트랙만 듣는 시각장애 사용자가 어떤 UI 요소를 클릭하는지, 무엇을 선택하는지 전혀 알 수 없기 때문에 이 기준을 충족하지 못합니다.

\n

공식적인 중요한 예외가 하나 있습니다. 미디어 자체가 텍스트의 미디어 대체물 — 즉, 텍스트 문서의 접근 가능한 동등물로 제공되도록 특별히 제작된 비디오 — 이고, 그렇게 명확히 표시되어 있는 경우, 해당 콘텐츠에는 오디오 설명이 요구되지 않습니다.

\n\n

왜 중요한가

\n

오디오 설명은 주로 시각장애가 있거나 심각한 시력 손상을 가진 사용자를 위한 요구 사항입니다. 세계보건기구(WHO)에 따르면 전 세계적으로 약 22억 명이 어떤 형태로든 시력 손상을 가지고 있습니다. 이러한 사용자에게 오디오 설명이 없는 비디오의 기본 경험은, 서사가 시각적 맥락에 의존할 때 혼란스럽거나 전혀 정보를 제공하지 못할 수 있습니다. 스크린 리더에 의존하는 시각장애 사용자는 페이지에 비디오가 있다는 사실은 인지할 수 있지만, 오디오 설명이 없으면 대사나 주변 환경음만 들을 수 있어, 콘텐츠를 무의미하거나 오해의 소지가 있게 만드는 정보 공백이 생길 수 있습니다.

\n

구체적인 실제 사례를 생각해 봅시다. 한 터키 은행이 모바일 앱에서 이중 인증을 설정하는 방법에 대한 동영상 튜토리얼을 게시합니다. 이 비디오는 내레이터가 “이제 설정 아이콘을 탭하세요” 또는 “확인 메시지가 보일 것입니다”와 같은 말을 하면서, 앱의 각 화면을 순서대로 보여줍니다. 오디오 설명이 없다면, 스크린 리더를 사용하는 시각장애 고객은 설정 아이콘이 화면 어디에 있는지, 확인 메시지에 무엇이 적혀 있는지, 화면이 어떻게 생겼는지 알 수 없습니다. 이들은 사실상 셀프 서비스 튜토리얼에서 배제되며, 고객 지원 센터에 전화를 해야 할 수도 있고 — 그 과정에서 마찰, 비용, 그리고 저하된 사용자 경험을 겪게 됩니다.

\n

완전한 시각장애가 있는 사용자뿐 아니라, 오디오 설명은 정보를 시각적으로 보여주는 것에 더해 말로 설명해 줄 때 더 쉽게 처리할 수 있는 인지 장애가 있는 사람들에게도 도움이 됩니다. 또한 운전 중처럼 화면을 볼 수 없는 오디오 전용 환경의 사용자나, 비디오에 나타나는 화면 텍스트를 충분히 빠르게 읽기 어려운 사용자에게도 유용합니다.

\n

SEO와 검색 가능성 측면에서, 전사본이나 설명 스크립트를 포함한 동영상 콘텐츠는 검색 엔진이 색인할 수 있는 추가 텍스트를 제공하여, 관련 검색어에 대한 순위를 개선할 가능성이 있습니다. 더 중요한 것은, 오디오 설명을 제공하는 것은 플랫폼이 포용성을 진지하게 고려하고 있음을 사용자와 규제 기관 모두에게 보여주는 신호이며 — 이는 많은 시장에서 점점 더 비즈니스적·법적 기대 사항이 되고 있습니다.

\n\n

관련 Axe-core 규칙

\n

WCAG 1.2.5는 수동 테스트를 요구합니다. axe-core 같은 자동화 도구는 비디오에 존재하는 오디오 설명이 정확하고 충분하며 의미 있는지 여부를 프로그램적으로 판단할 수 없습니다 — 이는 비디오를 시청하고 모든 시각 정보가 오디오를 통해 전달되는지 평가할 수 있는 사람의 판단이 필요합니다. 누락되었거나 부적절한 오디오 설명 트랙을 자동으로 표시할 수 있는 axe-core 규칙은 없습니다.

\n

\n
• 수동 검토 필요 — 시각 콘텐츠 감사: 사람 테스터는 화면을 가리거나 눈을 감은 상태로 전체 비디오를 시청(또는 오디오 설명 트랙만 활성화된 상태로 청취)하고, 화면 텍스트, 발표자의 동작, 장면 전환, 차트, 다이어그램, 비언어적 신호 등 모든 시각 전용 정보가 충분히 전달되는지 평가해야 합니다. 자동화 도구는 비디오 프레임의 의미를 해석하거나 내레이션이 시각적으로 표시되는 내용과 일치하는지 평가할 수 없습니다.
\n
• 수동 검토 필요 — 트랙 감지: axe-core는 <video> 요소에 kind='descriptions'가 설정된 <track> 요소가 존재하는지 여부는 확인할 수 있지만, 설명 트랙 파일에 실제로 의미 있고 정확한 설명이 들어 있는지는 검증할 수 없습니다. 비디오는 설명 트랙을 가지고 있을 수 있지만, 그 트랙이 비어 있거나, 기계가 생성한 의미 없는 내용이거나, 단순히 동기화되지 않았을 수 있습니다 — 이런 경우 모두 자동 감지에서는 통과하지만 실제로는 이 기준을 충족하지 못합니다.
\n
• 수동 검토 필요 — 대체 버전 확인: 일부 구현에서는 오디오 설명을 제공하기 위해, 설명이 기본 오디오 트랙에 포함된 별도의 URL 또는 비디오 버전을 제공합니다. 자동화 도구는 페이지의 다른 위치에 링크된 비디오 자산의 대체 버전이 존재하는지, 또는 그 위치를 탐색할 방법이 없습니다.
\n

\n\n

테스트 방법

\n

\n
1. 페이지의 모든 사전 녹음된 동기화 미디어를 식별합니다. <video> 요소, 임베디드 iframe(YouTube, Vimeo, 서드파티 플레이어), 그리고 모든 커스텀 비디오 플레이어 구현을 페이지에서 찾습니다. 오디오와 비디오 트랙이 모두 포함되어 있고 라이브가 아닌 사전 녹음된 각 비디오를 기록합니다.
\n
2. axe DevTools 또는 Lighthouse로 자동 스캔을 실행합니다. 브라우저 개발자 도구를 열고, 페이지에서 axe DevTools를 실행한 다음, 비디오나 미디어 요소와 관련된 규칙만 필터링합니다. 자동 스캔은 누락된 <track> 요소나 커스텀 비디오 플레이어의 ARIA 역할 등을 찾아낼 수 있지만, 오디오 설명의 적절성을 확인하지는 못합니다. 자동화 결과는 출발점으로만 취급하십시오.
\n
3. 화면을 가리거나 눈을 감은 채 각 비디오를 시청합니다. 제공된 경우 오디오 설명 트랙을 포함해 오디오만 듣습니다. 스스로에게 질문해 보십시오. 모든 의미 있는 시각 정보가 소리로 전달되는가? 오디오만으로 전체 서사를 따라갈 수 있고, 화면에서 일어나는 모든 동작을 이해하며, 표시되는 모든 텍스트와 그래픽을 식별할 수 있는가?
\n
4. 오디오 설명 트랙을 확인합니다. 비디오 플레이어 컨트롤에서 오디오 설명을 활성화하는 버튼이나 메뉴를 찾습니다. HTML5 비디오의 경우 DOM에서 <track kind='descriptions'> 요소를 검사합니다. 설명 트랙을 활성화하고 시각 콘텐츠에 대한 내레이션이 정확하고 동기화되어 재생되는지 확인합니다.
\n
5. 대체 설명 버전을 확인합니다. 비디오 인근에서 “오디오 설명과 함께 시청하기(Watch with Audio Description)” 또는 “오디오 설명 버전(Audio Described Version)”과 같이 표시된 명확한 링크나 버튼을 찾습니다. 해당 링크를 따라가, 대체 버전의 오디오 트랙에 정확하고 완전한 오디오 설명이 포함되어 있는지 확인합니다.
\n
6. 스크린 리더로 테스트합니다. Firefox의 NVDA, Safari의 VoiceOver, Chrome의 JAWS를 사용해 비디오 요소로 이동합니다. 스크린 리더가 비디오 컨트롤과 관련된 설명 트랙 옵션을 알리는지 확인합니다. 비디오를 재생하고 설명 트랙이 들리며 동기화되는지 검증합니다. 스크린 리더가 설명 오디오를 억제하거나 충돌을 일으키지 않는지도 확인합니다.
\n
7. 예외 사례를 평가합니다. 비디오가 텍스트 문서의 미디어 대체물로 제공되는 경우, 비디오 바로 인접한 위치에 그렇게 표시되어 있는지 확인합니다. 올바르게 표시되어 있고 텍스트와 동일한 콘텐츠를 완전히 표현한다면 오디오 설명은 요구되지 않습니다 — 다만 이 표시가 존재하며 모호하지 않은지 반드시 확인해야 합니다.
\n

\n\n

수정 방법

\n\n

오디오 설명 트랙이 없는 비디오 — 잘못된 예

\n

<!-- A training video with significant visual content and no audio description -->\n<video controls width='800'>\n  <source src='training-video.mp4' type='video/mp4'>\n  <track kind='subtitles' src='subtitles-en.vtt' srclang='en' label='English'>\n</video>\n<!-- Fails 1.2.5: subtitles are present but no descriptions track exists.\n     Visual-only information in the video is inaccessible to blind users. -->

\n\n

오디오 설명 트랙이 추가된 비디오 — 올바른 예

\n

<!-- A training video with an audio description track provided -->\n<video controls width='800'>\n  <source src='training-video.mp4' type='video/mp4'>\n  <track kind='subtitles' src='subtitles-en.vtt' srclang='en' label='English'>\n  <!-- Audio description track added with kind='descriptions' -->\n  <track kind='descriptions' src='audio-description-en.vtt' srclang='en' label='Audio Description (English)'>\n</video>\n<!-- Passes 1.2.5: screen readers and description-aware players can\n     activate the descriptions track to narrate visual content for blind users. -->

\n\n

설명된 대체물이 없는 임베디드 서드파티 비디오 — 잘못된 예

\n

<!-- A YouTube embed with no accessible described alternative -->\n<iframe\n  width='560'\n  height='315'\n  src='https://www.youtube.com/embed/VIDEOID'\n  title='Product Demo'\n  allowfullscreen>\n</iframe>\n<!-- Fails 1.2.5: if the YouTube video itself does not have an audio\n     description track uploaded, there is no way for blind users to\n     access visual-only content in the video. -->

\n\n

명확히 표시된 설명 대체물이 있는 임베디드 비디오 — 올바른 예

\n

<!-- A YouTube embed accompanied by a link to an audio described version -->\n<figure>\n  <iframe\n    width='560'\n    height='315'\n    src='https://www.youtube.com/embed/VIDEOID'\n    title='Product Demo'\n    allowfullscreen>\n  </iframe>\n  <figcaption>\n    Product Demo — visual walkthrough of the onboarding flow.\n    <!-- Alternative described version linked directly below the video -->\n    <a href='https://www.youtube.com/watch?v=DESCRIBED_VIDEOID'>\n      Watch the audio described version of this video\n    </a>\n  </figcaption>\n</figure>\n<!-- Passes 1.2.5: a clearly labeled alternative with audio description\n     is provided, allowing blind users to access the same content. -->

\n\n

설명 토글이 없는 커스텀 비디오 플레이어 — 잘못된 예

\n

<!-- Custom video player with no mechanism to enable audio description -->\n<div class='video-player' role='region' aria-label='Product Tutorial'>\n  <video id='tutorial-video'>\n    <source src='tutorial.mp4' type='video/mp4'>\n  </video>\n  <div class='controls'>\n    <button id='play-pause'>Play</button>\n    <button id='mute'>Mute</button>\n  </div>\n</div>\n<!-- Fails 1.2.5: no descriptions track, no AD toggle, no alternative. -->

\n\n

오디오 설명 토글이 있는 커스텀 비디오 플레이어 — 올바른 예

\n

<!-- Custom video player with accessible audio description toggle -->\n<div class='video-player' role='region' aria-label='Product Tutorial'>\n  <video id='tutorial-video'>\n    <source src='tutorial.mp4' type='video/mp4'>\n    <!-- Descriptions track linked; player JS activates it on toggle -->\n    <track id='desc-track' kind='descriptions' src='tutorial-desc.vtt'\n           srclang='en' label='Audio Description'>\n  </video>\n  <div class='controls'>\n    <button id='play-pause'>Play</button>\n    <button id='mute'>Mute</button>\n    <!-- Accessible toggle button for audio description -->\n    <button id='ad-toggle' aria-pressed='false'\n            aria-label='Toggle audio description'>\n      Audio Description\n    </button>\n  </div>\n</div>\n<!-- Passes 1.2.5: a descriptions track is present and the custom player\n     exposes an accessible toggle so users can enable it. Player JS\n     must set aria-pressed='true' when activated and enable the track. -->

\n\n

일반적인 실수

\n

\n\n

(토큰 한도 때문에 콘텐츠가 잘렸습니다 — 이 글을 다시 시도해 주세요.)