이 팁으로 보다 접근하기 쉬운 미디어를 만드는 방법

소개

진행 중인 시리즈의 일부로 보다 접근성 높은 미디어를 만드는 것과 관련된 몇 가지 모범 사례를 다룰 것입니다. 텍스트는 웹의 일류 시민이지만 점점 더 많은 비디오와 이미지가 온라인 콘텐츠 소비의 일반적인 형태가 되고 있습니다.

이전에 다른 기사에서 언급했듯이 HTML은 시작점으로 많은 옵션을 제공하지만 모든 항목에 좀 더 쉽게 액세스할 수 있도록 몇 가지 추가 작업을 수행해야 합니다.

접근 가능한 미디어: 이미지

이미지가 목적에 부합하는지 아니면 순전히 미학적 이유 때문인지 처음부터 확인해야 하는 몇 가지 중요한 구분이 있습니다. 스크린 리더가 이에 의존하므로 목적에 맞는 이미지에는 의미 있는 ALT 텍스트가 있어야 합니다!

대조적으로 순전히 미적인 이유를 위한 이미지는 다음 속성을 사용하여 이것이 필요하지 않은 화면에서는 생략되어야 합니다.

<img src="./randomimage.png" alt="Text describing the image" />

반응형 액세스 가능 미디어에 srcset 사용

널리 알려지지 않은 한 가지 작은 팁은 srcset 및 responsive 속성을 사용하여 이미지에 반응형 속성을 빠르게 추가할 수 있다는 것입니다.



Srcset Demo에서 Stefan Brechbühl(@pixelstrolch)의 펜CodePen을 참조하십시오.

이것은 네이티브 CSS 속성과 미디어 쿼리를 사용하여 반응형 이미지를 생성할 수 있는 유일한 솔루션이 아닙니다! 사용 사례에 가장 적합한 옵션을 결정합니다.

추가 면책 조항

이미지를 기능 버튼이나 링크로 사용할 때 화면 유형에 따라 이미지를 텍스트로 또는 그 반대로 바꾸는 CSS 마법이 있어야 합니다.

다음은 목표를 달성하기 위한 몇 가지 CSS 트릭입니다.

https://css-tricks.com/css-image-replacement/

이미지 교체를 위한 CSS 트릭

액세스 가능한 멀티미디어: 오디오 및 비디오

접근 가능한 미디어 컨트롤

HTML5에 오디오 및 비디오를 처리하는 컨트롤이 내장되어 있다는 사실을 알고 계셨습니까?

<audio controls> 
    <source /> 
    <p>Help text if it doesn't load</p> 
</audio> 

<video controls> 
   <source /> 
   <p>Help text if it doesn't load </p> 
</video>

이것들은 훌륭합니다! 안타깝게도 접근성이 좋지 않습니다. 일반적으로 생성 방법에 대한 짧은 코드 예제를 살펴보지만 이는 매우 불필요합니다. 내부적으로 어떻게 작동하는지 알면 좋겠지만 이미 접근성을 고려한 라이브러리를 만든 매우 재능 있는 개발자가 있습니다.

학습 목적이 아닌 한 나는 바퀴를 재발 명하지 않는 것을 강력하게 옹호합니다. 지원되는 접근성 기능이 있는 비디오 플레이어 목록은 다음과 같습니다(마지막 업데이트: 2016).

https://kensgists.github.io/apt/

다음은 AblePlayer가 어떻게 생겼는지에 대한 작은 시각적 예입니다.



https://ableplayer.github.io/ableplayer/demos/video1.html

액세스 가능한 미디어: 캡션

마지막 섹션에서 언급한 여러 비디오 플레이어는 비디오에 캡션을 추가하는 기능을 제공합니다. WebVTT 형식으로 캡션을 제공하기 위한 웹 표준에 대한 간략한 요약을 제공합니다.

다음은 WebVTT 파일의 예입니다.



이는 트랙 또는 경우에 따라 플레이어에 직접 연결될 수 있습니다.

<video controls src="myvideo.mp4">    
    <track default src="track.vtt"> 
</video>

접근 가능한 미디어: 성적표

모든 비디오 또는 오디오에는 페이지의 다른 곳에서 사용할 수 있는 대본이 있어야 합니다. 바로 그 부분입니다.



비디오가 웹 페이지의 콘텐츠에 충분히 중요하다면 대본을 갖는 것도 똑같이 중요해야 합니다! 이제 모든 비디오에 대본을 제공하는 것이 시간이 많이 걸리는 작업이라고 생각할 수 있습니다.

네, 보통은 그렇게 될 것입니다. 하지만! 우리를 도울 수 있는 많은 기술이 있습니다.

예를 들어 현재 Dev.to에서 Deepgram과 함께 진행 중인 해커톤이 있습니다. 이러한 기록을 만드는 기능을 자동화할 수 있습니다!

이것을 확인하십시오. (참고로 전 아무 관련 없습니다)

결론

이 팁이 모든 사람이 사이트에 더 쉽게 액세스할 수 있도록 만드는 데 도움이 되었기를 바랍니다.

매일 소비되는 수많은 콘텐츠가 비디오 또는 오디오 전용 옵션으로 이루어짐에 따라 멀티미디어 옵션이 점점 보편화되고 있습니다.

자세한 내용은 Relatable Code에서 확인하세요.

이 내용이 마음에 드셨다면 언제든지 저에게 연락하거나

2022년 3월 20일 https://relatablecode.com에서 원래 게시되었습니다.