본문 바로가기

웹접근성지침(WCAG2.0)

[웹접근성 지침-일반기술 G166] 중요한 '비디오 콘텐츠'에 '대체 오디오'가 제공되어야 한다.

728x90

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G166.html


시각 장애인들을 위해 '비디오 전용 콘텐츠'옆에 '대체 오디오'를 제공해 주자.


기술설명

시력이 안 좋은 사용자나 시각 장애인 들은 '비디오 전용 콘텐츠'를 볼 수 없습니다.

그래서 대체 콘텐츠로 '오디오'가 제공되어야 합니다. 즉 비디오의 정보를 설명하는 오디오 트랙을 제공하자는 것입니다.

오디오는 'MP3'와 같이 인터넷에서 일반적으로 사용되는 파일형식이어야 합니다.

 

 

예시

웹 페이지에 '화성에서 우주선이 착륙하는 내용의 비디오 전용 프레젠테이션'에 대한 링크가 있습니다.

우주선 사진에 해당 링크가 걸려 있습니다.

비디오 링크 근처에는 비디오를 설명하는 '오디오 파일'이 링크로 제공되고 있습니다.

HTML코드로 보면 다음과 같습니다.

<a href="../video/marslanding.mp4"><img src="../images/spaceship.jpg" alt="화성 착륙 영상"></a>
<br />
<a href="Mars_landing_audio.mp3">'화성 착륙'에 대한 오디오 설명</a>

 

 

 

관련기술

G159: 비디오 전용 콘텐츠에 대한 시간 기반 미디어의 대안 제공

 

 

점검절차

웹페이지에 비디오 전용 콘텐츠가 있는 경우,

1. 비디오 전용 콘텐츠 바로 앞이나 뒤에 비디오 내용을 설명하는 오디오가 링크로 제공 되고 있는지 확인합니다.

 


 

나의 정리

시각적인 불편함이 있는 사용자들의 경우 영상보는 것이 어려울 수 있습니다.

특히 소리가 없는 '비디오 전용 콘텐츠'의 경우 영상의 내용을 전혀 알 수가 없습니다.

그래서 이런 분들을 위해 영상의 내용을 설명하고 있는 '오디오'를 '대체 콘텐츠'로 제공해야 합니다.

 

웹페이지 내에 '비디오 전용 콘텐츠'를 제공 하고 있다면, 그 콘텐츠를 보여주고 있는 '프레젠테이션'에서 오디오를 제공해 주거나 '비디오 전용 콘텐츠' 옆에 ]오디오]와 연결된 링크를 제공해야 합니다.

만약 '비디오 전용 콘텐츠'를 링크로 제공 하고 있다면, 그 링크 옆에 오디오 링크도 제공하면 됩니다.

 

오디오의 파일은 MP3와 같이 대중적인 파일로 제공되어야 합니다. 그래야 누구나 들을 수 있습니다.

 

 


 

G166: Providing audio that describes the important video content and describing it as such

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G166.html

 

G166: Providing audio that describes the important video content and describing it as such | Techniques for WCAG 2.0

Video-only content is inaccessible to people who are blind and to some who have low vision. Therefore, it is important for them to have an audio alternative. One way of doing this is to provide an audio track describing the information in the video. The au

www.w3.org

 


공짜로 혼자서도 할 수 있는 웹퍼블리싱 공부 방법을 알려드립니다.

홈페이지 만들기, 혼자하기 힘들다면 무로 스터디에 들어오세요.

공부 방향을 모르겠다면 무료 과외를 신청하세요.

 

https://blog.naver.com/redoxup/223134941372

 

혼자서 웹퍼블리싱(HTML+CSS)입문과정 마스터 할 수 있다! + 도움을 받으면 더 잘 할 수 있다!!

웹디자이너, 웹퍼블리셔, 웹프로그램을 준비하시는 분들이라면, 다른 건 몰라도 HTML+CSS 입문과정...

blog.naver.com

 

 

728x90