본문 바로가기
정보 접근성/접근성 (A11Y) - 컴포넌트

접근성 준수 컴포넌트 - 비디오(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>

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

반응형
❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝