접근성 준수 컴포넌트 - 비디오(Video) (영상용 자막 등 접근성 준수하기)

비디오 요소가 접근성(A11Y) 표준에 호환되도록 하기 위한 최선의 방법은 다음과 같습니다:

1. 자막과 대본 제공:
   • 자막: 모든 비디오에 대해 자막을 제공해야 하며, 이는 대화 내용뿐만 아니라 관련된 비언어적 정보(예: 효과음)도 포함해야 합니다.
   • 대본: 비디오의 전체 텍스트 대본을 제공해야 하며, 시각 장애인이나 저시력 사용자를 위해 시각적 내용에 대한 설명도 포함해야 합니다.
2. 접근 가능한 플레이어 사용:
   • 비디오 플레이어 자체가 접근 가능해야 하며, 키보드를 사용하여 탐색할 수 있고 스크린 리더와 호환되어야 합니다.
3. ARIA 역할 및 속성 추가:
   • 비디오 요소와 그 제어 장치가 접근 가능하도록 ARIA(Accessible Rich Internet Applications) 역할 및 속성을 사용하십시오. 예를 들어:

     <div role="region" aria-label="비디오 플레이어">
       <video id="exampleVideo" controls>
         <!-- 비디오 내용 -->
       </video>
     </div>

4. 키보드 탐색:
   • 비디오 플레이어의 모든 기능이 키보드로 작동 가능해야 합니다. 사용자가 키보드 컨트롤을 사용하여 재생, 일시 정지, 볼륨 조절 및 비디오 탐색을 할 수 있도록 하십시오.
5. 설명적인 제목 및 라벨 제공:
   • 비디오 요소에 대해 설명적인 제목이나 라벨을 제공하십시오. title 속성 또는 ARIA 라벨을 사용하여 비디오의 내용 및 목적을 설명합니다.

     <video controls aria-label="접근성 모범 사례 교육 비디오">
       <!-- 비디오 내용 -->
     </video>

6. 대체 형식 제공:
   • 비디오 내용을 대체 형식(예: 오디오 전용 버전, 텍스트 기반 요약)으로 제공하여 비디오 내용을 접근할 수 없는 사용자도 이용할 수 있도록 합니다.
7. 색상 대비 및 시각적 표시기 보장:
   • 비디오 위에 오버레이된 모든 텍스트, 버튼 또는 컨트롤이 충분한 색상 대비를 가지며 쉽게 볼 수 있도록 합니다.
8. 자동 재생 피하기:
   • 특히 소리와 함께 비디오를 자동 재생하지 않도록 합니다. 이는 스크린 리더 사용자 및 인지 장애가 있는 사용자에게 혼란을 줄 수 있습니다. 자동 재생이 필요한 경우, 사용자가 빠르게 중지할 수 있도록 합니다.
9. 스크린 리더 지원:
   • 모든 인터랙티브 요소(예: 재생 버튼, 볼륨 조절)에 스크린 리더가 해석할 수 있는 적절한 라벨이 있어야 합니다.
10. 보조 기술로 테스트:
    • 스크린 리더, 화면 확대기 및 음성 인식 소프트웨어와 같은 다양한 보조 기술로 정기적으로 비디오 콘텐츠 및 플레이어를 테스트합니다.

접근 가능한 비디오 요소의 예:

<div role="region" aria-label="접근성 튜토리얼 비디오">
  <video id="tutorialVideo" controls aria-describedby="videoDescription">
    <track kind="captions" src="captions_ko.vtt" srclang="ko" label="한국어">
    <!-- 비디오 내용 -->
  </video>
  <div id="videoDescription" class="sr-only">
    이 비디오 튜토리얼은 자막, 대본 및 키보드 탐색을 포함한 웹 비디오 접근성 모범 사례를 다룹니다.
  </div>
  <a href="transcript.txt" download="transcript.txt">대본 다운로드</a>
</div>

이러한 실천 방법을 따르면, 장애를 가진 사용자도 포함하여 모든 사용자가 비디오 콘텐츠를 접근할 수 있도록 할 수 있습니다.