자막 제공 - by. UXKM

요약 설명

관련 지침 : 멀티미디어 콘텐츠에는 자막, 대본 또는 수어를 제공해야 한다.
멀티미디어 콘텐츠를 장애인도 비장애인과 동등하게 인식할 수 있도록 제작하려면, 자막, 대본 또는 수어를 제공해야 합니다. 여기서 가장 중요한 요소는 멀티미디어 콘텐츠와 동등한 내용을 제공하는 것입니다.
가장 바람직한 방법은 폐쇄자막을 오디오와 동기화하여 제공하는 것입니다. 대사 없이 영상만 제공하는 경우에는 화면 해설(텍스트, 오디오, 대본)을 제공해야 하며, 음성만 제공하는 경우에도 자막, 대본 또는 수어를 반드시 함께 제공해야 합니다.
또한, 자막·대본·수어는 단순 번역이 아닌 콘텐츠에 포함된 음성의 문맥과 동등한 수준을 갖춰야 합니다.

관련 WCAG 2.2 성공 기준

대체수단 제공: 다음 중 한 가지 이상의 대체수단을 제공해야 한다.

  • 자막 제공

    멀티미디어 콘텐츠를 재생시킬 때마다 자동적으로 자막을 화면에 표시할 수 있는 멀티미디어 콘텐츠는 본 검사항목을 준수한 것으로 간주할 수 있습니다. 자막은 멀티미디어 콘텐츠에 포함된 음성(대사)과 동등해야 합니다. 필요에 따라 자막을 여러 언어로 제공하면, 사용자는 자신이 사용하기를 원하는 자막을 선택할 수 있습니다.

  • 대본 제공

    자막과는 달리 멀티미디어가 재생되는 과정에서 시나리오를 제공하는 경우도 본 검사항목을 준수한 것으로 간주합니다. 대본은 멀티미디어 콘텐츠에 포함된 음성(대사)과 동등해야 합니다. 필요에 따라 대본을 여러 언어로 제공하면, 사용자는 자신이 사용하기를 원하는 대본을 선택할 수 있습니다.

  • 수어 제공

    비디오 콘텐츠에 수어를 중첩하여 녹화한 콘텐츠도 본 검사항목을 준수한 것으로 간주합니다. 수어는 멀티미디어 콘텐츠에 포함된 음성(대사)과 동등해야 합니다.

1.2.2 캡션(사전 녹화된 콘텐츠) (Level A) 1.2.1 오디오 전용 및 영상 전용 (Level A) 1.2.3 오디오 설명 또는 대본 (Level A) WAI - Understanding Captions MDN - HTML 요소

기대효과

  • 청각장애인은 자막을 통해 음성이나 음향 정보에 접근할 수 있습니다. 또한 자막을 활용하면 해당 콘텐츠에 대한 인덱스를 작성하거나 내용 검색도 용이하게 할 수 있습니다. 수어를 제공하는 콘텐츠도 청각장애인의 접근이 용이합니다.
  • 장애인이 아닌 경우에도 자막이 포함된 영상 매체를 다양한 방법으로 활용할 수 있습니다.
    예를 들어, 자막은 소란한 환경이나 오디오 재생기능이 갖추어져 있지 않은 환경에서 영상의 자세한 내용을 파악하는 데 유용합니다. 사용자가 자막을 언어별로 선택할 수 있게 하면 외국어 습득과 같이 언어능력이나 읽기능력을 향상시키는 데 도움이 됩니다.

필요성

영상 콘텐츠에는 청각 장애 사용자 또는 소리를 들을 수 없는 환경의 사용자를 위해 자막, 대본(script), 수어 등의 대체 수단을 제공해야 합니다. 자막은 음성 정보뿐만 아니라 중요한 소리 정보(예: 박수, 경고음 등)도 포함해야 하며, 사용자에게 명확하게 전달되어야 합니다.

  • 청각장애 사용자에게 음성 콘텐츠의 의미 전달
  • 지하철, 도서관 등 음소거 환경에서도 영상 시청 가능
  • 자막은 외국어 콘텐츠의 이해력 향상에도 도움
  • 대본, 수어 등 다양한 수단은 접근성 선택권 확대

대상

  • 사용자 유형
  • 이유

  • 청각장애 사용자

    영상 속 대사, 설명 등 이해 가능

  • 외국어 청취 어려운 사용자

    자막을 통해 이해도 향상

  • 환경적 제약 사용자

    음소거 환경, 소리 차단 기기 사용 시 유용

체크리스트

  • 영상 콘텐츠에 자막이 제공되는가?
  • 자막이 음성 정보뿐만 아니라 중요한 소리 정보도 포함하는가?
  • 자막이 시각적으로 명확하게 표현되는가?
  • 대본 또는 수어 영상이 함께 제공되는가?

테스트 방법

  • 영상 콘텐츠 재생 시 자막 표시 여부 확인
  • 음성 정보 없이 자막만으로 의미를 이해할 수 있는지 확인
  • 스크립트/수어 영상 제공 여부 확인

QA 지표

  • 전체 영상 중 자막 제공 비율
  • 수어/스크립트 제공 여부
  • 자막 내용 완성도(음성 외 정보 포함 여부)

개발방법

html 예시 - <track> 요소 사용

Vue 예시

React 예시

점검 기준

  • 모든 영상 콘텐츠에 적절한 자막 또는 대본이 포함되었는가?
  • 수어, 텍스트 대체 콘텐츠가 접근 가능하게 제공되는가?

점검 방법

  • 영상에서 <track> 요소 또는 별도 대본 링크 존재 여부를 확인합니다.
  • 음성 정보와 자막 싱크를 확인합니다.
  • 자막이 시각적으로 명확하게 표시되는지 테스트합니다.

준수/미준수 사례

미준수 사례

문제점 :
<track> 요소가 누락되어 있어 자막이 제공되지 않습니다.
청각 장애 사용자나 소리를 들을 수 없는 상황에 있는 사용자에게 콘텐츠 접근이 제한됩니다.
웹 접근성 기준을 충족하지 못하며, 사용자 경험이 저하될 수 있습니다.

준수 사례

설명 :
<track> 요소를 통해 자막 파일을 명시적으로 연결합니다.
kind="subtitles"로 자막 유형을 정의하고, srclang="ko"로 언어를 지정합니다.
label="Korean"은 사용자가 자막을 선택할 때 식별할 수 있도록 합니다.
자막을 제공함으로써 청각 장애가 있는 사용자도 콘텐츠를 이해할 수 있게 됩니다.

관련 영상

출처 : AOA11Y (Academy Of Accessibility)

접근성 테스트 도구 활용 점검방법

결론

접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다. 모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다. 무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.

접근성 작업 시 점검 필수사항

  • 접근성 가이드(WCAG, KWCAG, WAI-ARIA) 내용 숙지
  • 접근성 체크리스트 작성
  • 접근성 자동 및 수동 검사(스크린리더) 진행
  • 접근성 검사 툴(Lighthouse Accessibility 등) 활용 오류 항목 개선 및 내용 정리
  • 접근성 사용자 테스트
  • 접근성 정기적인 모니터링