WCAG 1.2.4: 자막 (실시간)

이 규칙의 의미

\n

WCAG 1.2.4(자막 — 실시간)는 모든 실시간 오디오 콘텐츠에 대해 동기화된 미디어에 자막을 제공할 것을 요구합니다. 동기화된 미디어는 웹캐스트, 라이브 스트림, 웹에서의 실시간 방송처럼, 정보를 제시하는 다른 형식이나 시간 기반의 상호작용 구성요소와 동기화된 오디오 또는 비디오 콘텐츠로 정의됩니다.

\n

실질적으로 이는 뉴스 사이트에서 스트리밍되는 기자회견, 회사 전체 회의 방송, 정부 청문회, 실시간 온라인 수업, 스포츠 중계 스트림 등 웹사이트나 웹 애플리케이션에 게시된 모든 실시간 오디오가 포함된 이벤트에는, 진행과 동시에 말해지는 내용을 정확하게 반영하는 실시간 자막이 표시되어야 함을 의미합니다.

\n

통과로 인정되는 경우: 실시간 스트림은 재생 중에 동기화되고 정확한 실시간 자막이 사용자에게 보일 때 이 기준을 충족합니다. 자막은 모든 대화와 관련 있는 비음성 오디오 정보(예: "[applause]" 또는 "[alarm sounds]")를 표현해야 합니다. 일반적인 방식으로는 전문 자막 작성자가 제공하는 CART(Communication Access Realtime Translation), 자격을 갖춘 실시간 자막 서비스에서 제공하는 자동 음성 인식(ASR) 자막, 또는 스트리밍 플랫폼에서 제공하는 서드파티 통합 등이 있습니다.

\n

실패로 인정되는 경우: 실시간 스트림에 자막이 전혀 없거나, 자막이 음성 오디오와 동기화되어 있지 않거나, 자막이 대화의 중요한 부분을 누락하거나, 자막의 정확도가 너무 낮아 이해가 심각하게 저해되는 경우 이 기준을 충족하지 못합니다. 사후에 대본(transcript)을 제공하는 것만으로는 이 요구사항을 충족하지 못합니다. 자막은 실시간으로, 실제 진행과 동시에 제공되어야 합니다.

\n

공식 예외: WCAG는 이 규칙에 대해 하나의 예외를 정의합니다. 텍스트에 대한 미디어 대체물 자체인 미디어이며, 그렇게 명확히 표시된 경우에는 예외가 됩니다. 예를 들어, 인터뷰의 상세한 텍스트 대본을 게시하고, 동일한 콘텐츠의 실시간 오디오 버전을 텍스트의 오디오 대체물로 명시적으로 표시하여 제공하는 경우, 자막이 엄격히 요구되지 않을 수 있습니다. 그러나 이 예외는 범위가 매우 좁고 실제로 적용되는 경우는 드뭅니다.

\n

이 기준은 웹에 게시된 모든 동기화된 미디어에 적용됩니다. 비디오가 사전에 제작되었는지, 진정한 실시간인지와 관계없이 적용됩니다. 실시간처럼 재생되는 사전 녹화 웨비나 다시보기는 여전히 1.2.3 또는 1.2.5에 해당하지만, 진정한 실시간 방송은 명확히 1.2.4에 해당합니다.

\n\n

중요한 이유

\n

세계보건기구에 따르면 전 세계적으로 약 4억 3,000만 명이 장애 수준의 청각 손실을 가지고 있으며, 이 수는 2050년까지 7억 명 이상으로 증가할 것으로 예상됩니다. 농인 및 난청 사용자에게 실시간 자막은 편의 기능이 아니라, 실시간 상황에서 오디오 콘텐츠에 접근할 수 있는 주요하거나 유일한 수단입니다. 자막이 없으면 이 사용자들은 어떤 실시간 미디어 이벤트에도 참여하거나 이해하는 데서 완전히 배제됩니다.

\n

농 및 청각 손실을 넘어, 실시간 자막은 훨씬 더 넓은 사용자층에 도움이 됩니다. 공항, 오픈 오피스, 대중교통 등 소음이 많은 환경에 있는 사용자는 오디오를 사용할 수 없을 수 있습니다. 조용한 환경에서 헤드폰 없이 시청하는 사용자나, 기기를 음소거한 사용자는 자막에 의존해 내용을 따라갑니다. 비원어민 사용자는 특히 화자가 복잡한 어휘, 억양, 기술 용어를 사용할 때 이해를 위해 자막이 필수적인 경우가 많습니다. 인지 및 언어 처리 차이로 인해 정확한 이해를 위해 자막이 필수적인 경우도 있습니다.

\n

구체적인 상황을 생각해 봅시다. 터키의 한 지방자치단체가 공식 웹사이트에서 시의회 회의를 실시간으로 스트리밍합니다. 한 농인 주민이 자신의 동네 용도 변경에 대한 토론을 따라가고 싶어 합니다. 실시간 자막이 없다면, 그 주민은 시민 참여에서 완전히 배제됩니다. 이는 사립학교의 학습 관리 시스템에서 실시간 온라인 수업에 참여하는 농인 학생이나, 은행의 실시간 제품 발표 웨비나를 따라가려는 고객에게도 마찬가지입니다.

\n

실무적인 관점에서, 실시간 자막 인프라는 검색 엔진이 색인할 수 있는 대본을 함께 생성하여 비디오 콘텐츠의 검색 가능성을 향상시킵니다. 실시간 자막에 투자하는 조직은 종종 이 대본 산출물이 행사 후 문서화, 요약, 아카이브 검색을 위한 귀중한 자료가 된다는 것을 발견합니다.

\n\n

관련 Axe-core 규칙

\n

WCAG 1.2.4는 수동 테스트를 요구합니다. 어떤 자동화된 axe-core 규칙도 실시간 자막의 존재 여부나 품질을 신뢰할 수 있게 감지할 수 없으며, 이는 접근성 감사 전략을 계획할 때 이해해야 할 중요한 차이점입니다.

\n

\n
• 수동 테스트 필요 — 실시간 자막 존재 여부: axe-core 같은 자동화 도구는 <video> 요소에 kind='captions'가 설정된 <track> 요소가 있는지 DOM을 스캔할 수 있지만, 실시간 스트림은 거의 항상 <track>이 있는 단순 HTML <video> 요소로 제공되지 않습니다. 일반적으로 HLS, DASH 같은 적응형 비트레이트 포맷을 사용하며, Video.js, JW Player, 네이티브 플랫폼 플레이어 같은 JavaScript 기반 플레이어를 통해 제공됩니다. 이 플레이어들은 axe-core가 내부를 들여다볼 수 없는 방식으로 자막을 동적으로 렌더링합니다. 도구는 실시간으로 스트림을 시청하거나, 자막 정확도를 평가하거나, 동기화 지연을 측정하거나, 자막 오버레이가 실제로 음성 콘텐츠를 반영하는지 아니면 정적인 플레이스홀더인지 판단할 수 없습니다.
\n
• 수동 테스트 필요 — 자막 품질과 정확도: 설령 자동화 도구가 자막 피드의 존재를 감지할 수 있다고 해도, 자막이 정확한지, 완전한지, 허용 가능한 수준으로 동기화되어 있는지 평가할 방법이 없습니다. CART로 생성된 자막과 품질이 낮은 자동 생성 자막은 도구 입장에서는 모두 "자막 존재"로 보일 수 있지만, 이 중 하나만이 WCAG 1.2.4를 충족합니다. 실시간 이벤트 중 사람에 의한 검토만이 준수 여부를 검증하는 유일하게 신뢰할 수 있는 방법입니다.
\n
• 수동 테스트 필요 — 플레이어 내 자막 접근성: 자동화 도구는 일반적으로 커스텀 미디어 플레이어 내 자막 컨트롤이 키보드로 접근 가능한지, 자막 표시를 사용자가 크기 조절하거나 사용자 정의할 수 있는지, 자막 스타일이 사용자의 요구를 충족하는지 여부를 판단할 수 없습니다. 이러한 측면은 실제 키보드 내비게이션과 스크린 리더 사용을 통한 직접 테스트가 필요합니다.
\n

\n\n

테스트 방법

\n

\n
1. 페이지의 모든 실시간 미디어 식별: 페이지에서 모든 실시간 비디오 또는 오디오 스트림을 확인합니다. 임베디드 플레이어, iframe, 동적으로 로드되는 미디어 구성요소를 확인합니다. 콘텐츠가 진정한 실시간(실시간 방송)인지, 사전 녹화인지 기록합니다. 진정한 실시간 오디오 콘텐츠가 동기화된 미디어에 포함된 경우에만 1.2.4에 해당합니다.
\n
2. axe DevTools 또는 Lighthouse로 자동 스캔 실행: Chrome DevTools에서 axe DevTools를 열고 전체 페이지 스캔을 실행합니다. axe는 실시간 자막을 검증할 수는 없지만, 미디어 플레이어 컨트롤에 aria-label이 없는 경우, 재생/일시정지 버튼이 접근 불가능한 경우, 포커스 관리 누락 등 관련 문제를 표시할 수 있습니다. 표시된 문제를 보조 증거로 기록하되, axe 보고서가 깨끗하다고 해서 1.2.4 준수가 확인되는 것은 아니라는 점을 이해해야 합니다.
\n
3. 실시간 이벤트 중 자막 제공 여부 수동 확인: 실제 방송 중에 실시간 스트림에 접속합니다. 자막이 표시되는지 확인합니다. 플레이어에 자막 토글(CC 버튼)이 있다면 이를 활성화하고, 화자가 말할 때 자막이 거의 실시간으로 나타나고 업데이트되는지 확인합니다. 자막 지연이 허용 가능한지 확인합니다. 일반적으로 CART는 몇 초 이내, ASR은 이보다 약간 더 길 수 있습니다.
\n
4. 자막 정확도 평가: 오디오를 들으면서 자막을 읽습니다. 누락된 단어, 체계적인 오류, 중요한 생략이 있는지 확인합니다. 자막이 반드시 완전한 문자 그대로일 필요는 없지만, 말해진 콘텐츠의 전체 의미를 전달해야 합니다. 여러 화자가 있는 경우 화자 식별에 유의합니다. 자막은 화자가 명확하지 않을 때 누가 말하고 있는지 표시해야 합니다.
\n
5. NVDA + Firefox로 테스트: Tab 키를 사용해 미디어 플레이어로 이동합니다. 자막 토글을 포함한 모든 플레이어 컨트롤이 키보드로 도달 가능하고 조작 가능한지 확인합니다. NVDA가 자막 버튼의 상태(켜짐/꺼짐)를 알려주는지 확인합니다. 자막을 활성화하고, 사용자가 플레이어로 탭하거나 주변을 탐색할 때 NVDA가 읽을 수 있는 DOM 요소에 자막 텍스트가 나타나는지 확인합니다.
\n
6. VoiceOver + Safari(macOS 또는 iOS)로 테스트: VoiceOver 제스처나 키보드 명령을 사용해 플레이어를 탐색합니다. 자막 토글이 안내되고 조작 가능한지 확인합니다. 자막 텍스트 변경 사항이 플레이어의 접근 가능한 영역 내에서 적절히 노출되는지 확인합니다.
\n
7. JAWS + Chrome으로 테스트: Tab 키를 사용해 플레이어 컨트롤로 이동합니다. JAWS가 모든 컨트롤 레이블을 읽는지 확인합니다. 자막 토글이 적절한 레이블과 상태를 가진 버튼으로 인식되는지 확인합니다. 자막을 활성화하고 자막 표시가 예상대로 업데이트되는지 확인합니다.
\n
8. 자막 표시 사용자 설정 확인: 플레이어가 사용자가 자막 텍스트 크기를 조절하거나 색상을 변경하거나 대비를 조정할 수 있도록 하는지 확인합니다. 이는 1.2.4에서 엄격히 요구되는 사항은 아니지만, 모범 사례 평가 항목이며 WCAG 1.4 기준과 관련이 있습니다.
\n

\n\n

수정 방법

\n

자막 트랙이 없는 실시간 스트림 — 잘못된 예

\n

<!-- A live HLS stream embedded with no caption configuration -->\n<video id='live-player' controls autoplay>\n  <source src='https://stream.example.com/live/event.m3u8' type='application/x-mpegURL'>\n  <!-- No <track> element and no caption configuration in the player -->\n</video>

\n

통합 CART 자막 트랙이 있는 실시간 스트림 — 올바른 예

\n

<!-- Live stream using Video.js with a live WebVTT caption track fed by a CART service.\n     The src for the track points to a live caption endpoint that updates in real time. -->\n<video\n  id='live-player'\n  class='video-js vjs-default-skin'\n  controls\n  autoplay\n  aria-label='Live conference stream with real-time captions'>\n  <source src='https://stream.example.com/live/event.m3u8' type='application/x-mpegURL'>\n  <track\n    kind='captions'\n    src='https://captions.example.com/live/event.vtt'\n    srclang='tr'\n    label='Turkish captions'\n    default>\n</video>\n<script>\n  var player = videojs('live-player');\n  // Enable captions by default for accessibility\n  player.ready(function() {\n    player.textTracks()[0].mode = 'showing';\n  });\n</script>

\n

임베드에서 자막이 비활성화된 플랫폼의 실시간 스트림 — 잘못된 예

\n

<!-- YouTube live embed with closed captions explicitly disabled via cc_load_policy=0.\n     This removes the user's ability to enable captions, causing a 1.2.4 failure. -->\n<iframe\n  src='https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID&cc_load_policy=0'\n  title='Company all-hands live stream'\n  allowfullscreen>\n</iframe>

\n

임베드에서 자막이 활성화된 플랫폼의 실시간 스트림 — 올바른 예

\n

<!-- YouTube live embed with closed captions enabled by default (cc_load_policy=1).\n     The platform's native caption infrastructure is used, which supports live auto-captions\n     and human-reviewed CART when configured in the YouTube Studio settings.\n     The host page also provides a direct link to the captioned stream for users\n     who cannot interact with the iframe. -->\n<iframe\n  src='https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID&cc_load_policy=1'\n  title='Company all-hands live stream with captions enabled'\n  allowfullscreen>\n</iframe>\n<p>\n  <a href='https://www.youtube.com/watch?v=LIVE_VIDEO_ID'>\n    Watch with captions directly on YouTube\n  </a>\n</p>

\n

키보드로 접근할 수 없는 자막 토글이 있는 커스텀 플레이어 — 잘못된 예

\n

<!-- Caption toggle implemented as a non-interactive <div>.\n     Keyboard users and screen reader users cannot activate this control. -->\n<div class='player-controls'>\n  <div class='cc-button' onclick='toggleCaptions()'>CC</div>\n</div>

\n

접근 가능한 자막 토글이 있는 커스텀 플레이어 — 올바른 예

\n

<!-- Caption toggle implemented as a <button> with an explicit label and\n     ARIA pressed state so keyboard and screen reader users can discover\n     and operate it. The state updates dynamically when captions are toggled. -->\n<div class='player-controls'>\n  <button\n    class='cc-button'\n    id='captions-toggle'\n    aria-pressed='false'\n    aria-label='Toggle captions'\n    onclick='toggleCaptions(this)'>\n    CC\n  </button>\n</div>\n<script>\n  function toggleCaptions(btn) {\n    var isActive = btn.getAttribute('aria-pressed') === 'true';\n    btn.setAttribute('aria-pressed', String(!isActive));\n    // logic to show/hide the caption track\n  }\n</script>

\n\n

흔한 실수

\n

\n
• 실시간 자막 대신 행사 후 대본만 제공하는 경우: 실시간 이벤트가 끝난 후 텍스트 대본을 게시하는 것만으로는 1.2.4를 충족하지 못합니다. 자막은 실시간 오디오와 동시에 제공되어야 하며, 농인 사용자가 시각 및 청각 사용자와 함께 실시간으로 콘텐츠를 따라갈 수 있어야 합니다.

(Content truncated due to token limit — please retry this article.)