Plyr은 개발자가 사용하기 쉽고 사용자 친화적인 동영상 플레이어 라이브러리입니다. Plyr은 플레이어의 모양과 동작을 사용자 정의할 수 있으며, 모바일 및 데스크탑 환경에서도 정상적으로 작동합니다.
그러나 Plyr이 기본적으로 스크린 리더기와의 상호 작용을 지원하지 않습니다. 스크린 리더기는 시각 장애인 및 시각 장애가 있는 사용자들에게 웹 콘텐츠에 대한 정보를 제공하는데 필수적인 도구입니다.
따라서, 우리는 Plyr 플레이어를 스크린 리더기에 접근 가능하게 만들기 위해 몇 가지 조치를 취해야 합니다.
1. 동영상에 대한 대체 텍스트 제공
동영상은 텍스트 기반의 콘텐츠가 아니기 때문에 시각 장애인들은 그것에 대한 정보를 알 수 없습니다. 따라서, 우리는 동영상의 대체 텍스트를 제공하여 스크린 리더기로 읽힐 수 있도록 해야 합니다.
<video class="plyr__video-embed" controls autoplay>
<source src="video.mp4" type="video/mp4">
<track kind="captions" src="captions.vtt" srclang="en" label="English" default>
</video>
위의 예시 코드에서 captions.vtt 파일은 동영상의 자막 파일을 가리킵니다. 이 파일에서는 동영상의 대화 내용을 텍스트 형식으로 제공하며, 이는 스크린 리더기에 읽힐 수 있습니다.
2. 플레이어 컨트롤에 접근 가능한 레이블 추가
Plyr 플레이어의 컨트롤은 기본적으로 마우스 또는 터치 이벤트에 의해 작동합니다. 시각 장애인들은 이런 접근 방식을 사용할 수 없으므로, 접근 가능한 키보드 컨트롤을 추가해야 합니다.
const player = new Plyr('#player');
player.on('ready', event => {
const controls = event.detail.controls;
controls.forEach(control => {
const label = control.getAttribute('aria-label');
if (label) {
control.innerHTML = `<span class="plyr__sr-only">${label}</span>`;
}
});
});
위의 예시 코드에서 Plyr 플레이어를 생성하고, ready 이벤트를 감지하여 컨트롤에 접근 가능한 레이블을 추가합니다. 이 레이블은 스크린 리더기에게 컨트롤의 역할을 알려줍니다.
3. 스크린 리더기에게 플레이어의 상태 전달
시각 장애인들은 스크린 리더기를 통해 동영상 플레이어의 상태를 알 수 있어야 합니다. Plyr은 ready, play, pause, ended 등의 이벤트를 제공하므로, 이를 이용하여 상태를 스크린 리더기에 전달할 수 있습니다.
const player = new Plyr('#player');
player.on('play', event => {
const videoTitle = document.querySelector('.plyr__video-embed').getAttribute('title');
const message = `${videoTitle}이 재생되었습니다.`;
// 스크린 리더기에 상태 전달
alert(message);
});
위의 예시 코드에서 Plyr 플레이어를 생성하고, play 이벤트를 감지하여 재생 상태일 때 메시지를 생성하고 스크린 리더기에 전달합니다.
결론
Plyr을 사용하여 동영상 플레이어를 개발할 때는 접근 가능성을 고려해야 합니다. 동영상의 대체 텍스트를 제공하고, 컨트롤에 접근 가능한 레이블을 추가하고, 상태를 스크린 리더기에 전달하여 시각 장애인들도 웹 동영상을 원활하게 이용할 수 있도록 해야 합니다.
참고 자료: