[웹접근성 지침-일반기술 G58] '텍스트'가 아닌 '콘텐츠' 옆에 '시간 기반 미디어의 대안'에 대한 링크 제공하기

미디어가 보이지 않는 경우를 대비하여 미디어의 대안을 제공해야 한다.

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

---

기술설명

시간 기반의 미디어, 즉 동영상이나 오디오 서비스를 제공하는 경우, 대안(=미디어를 대체할 수 있는 정보)이 제공되어야 합니다.

'대안'은 '미디어 내용에 대한 설명' 또는 '미디어의 대본이나 대사'가 제공됩니다.

'미디어의 내용'과 '대안'의 내용이 동일해야 합니다.

이런 '대안'은 해당 미디어가 있는 페이지에 안에 같이 있을 수도 있고 다른 페이지에 있을 수도 있습니다.

'대안'으로 이동할 수 있는 링크는 해당 미디어의 앞이나 뒤에 제공되어야 합니다.

'대안'이 다른 페이지에서 제공되는 경우, 사용자가 해당 부분까지만 읽고 이전 위치로 돌아갈 수 있도록 내용의 끝이 어디인지 표시해 주어야 합니다.

브라우저에서 '뒤로 가기' 버튼을 눌러서 이전 지점으로 돌아가지 못한다면, 해당 콘텐츠 위치로 돌아가게 하는 링크가 제공되어야 합니다.

 

 

예시

올림픽 영상이 제공 되는 소스입니다. 

<!-- Olympic_Sports.html -->
<a name="Olympic_Wrestling"></a>
<p>
    <a href="olympic_wrestling.mov">올림픽 레슬링 영상 보기</a>, 
    <a href="olympic_wrestling_transcript.html">올림픽 래슬링 영상의 대조 녹취록</a>
</p>

<!-- olympic_wrestling_transcript.html -->
<p>아나운서: 오늘 밤 영국의 웰존슨선수와 아르헨티나 데링고선수 간의 멋진 대결이 있을 예정입니다.  </p>
<p>상황: 경기장 중앙에 500석이 마련되어 있습니다.</p>
<p>..이하 생략..<p>
<p>
    아나운서: 웹존스 선수가 금메달을 땄습니다. 오늘 경기 여기 까지입니다. 시청해 주셔서 감사합니다.
    <a href="Olympic_Sports.html#Olympic_Wrestling">영상 페이지로 돌아가기</a>
</p>

 

  

관련기술

G69: 시간 기반 미디어에 대한 대안 제공

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

H46: 포함된 noembed 사용

H53: 개체 요소의 본문 사용

 

 

점검절차

1. 텍스트가 아닌 콘텐츠 바로 앞이나 뒤에 링크가 있는지 확인합니다.

2. 특정 동기화 미디어에 대한 대조 문서로 이동할 수 있는 링크가 있는지 확인합니다.

3. 대조 문서에서 사용자가 원래 위치로 되돌아갈 수 있는 링크 또는 기능을 제공하는지 확인합니다.

 

모든 절차를 따라야 합니다.

 

 

---

나의 정리

텍스트가 아닌 콘텐츠는 이미지, 동영상, 오디오 등을 말합니다.

이렇게 외부에서 불러온 미디어들은 사용자의 환경에 따라 보이지 않을 수 있습니다.

(예를 들어 브라우저에서 이미지를 불러들이지 못하게 막았거나, 보안을 위해서 서버가 특정 IP를 차단한 경우 등)

이럴 때를 대비하여 대안 문서 또는 대체 텍스트를 제공하게 되어 있습니다.

대안 문서는 해당 동영상이나 오디오의 설명이나 대사 및 녹취록을 담고 있습니다.

이런 대안 문서로 이동할 수 있는 링크는 해당 미디어의 앞이나 뒤에 배치됩니다.

대안 문서는 미디어와 같은 웹페이지에 있을 수도 있고, 다른 웹페이지에 있을 수 있습니다.

 

대안 문서가 다른 웹페이지에 있는 경우를 보겠습니다.

미디어 옆에 대안 문서로 이동할 수 있는 링크가 있습니다. 사용자가 링크를 대안 문서가 있는 페이지로 이동하였습니다. 사용자가 대안 문서 내용을 모두 읽었습니다.

그리고 마지막에 /이전으로 돌아가기/ 버튼이 있습니다. 버튼을 누르자 미디어와 대체 문서 링크가 있던 이전 화면 그대로 돌아왔습니다.

 

이렇게 사용자가 대안 문서 내용을 모두 읽은 후 이전화면으로 돌아갈 수 있는 기능을 제공해 주어야 합니다.

예시의 코드를 보면 책갈피 기능을 이용하여 이전화면으로 돌아 갈 수 있게 만들었습니다.

<!-- Olympic_Sports.html -->
<a name="Olympic_Wrestling"></a>
<p>
    <a href="olympic_wrestling.mov">올림픽 레슬링 영상 보기</a>, 
    <a href="olympic_wrestling_transcript.html">올림픽 래슬링 영상의 대조 녹취록</a>
</p>

<a name="Olympic_Wrestling"></a>으로 책갈피 지점을 지정하였습니다.

<a href="olympic_wrestling_transcript.html">올림픽 레슬링 영상의 대조 녹취록 </a></a> 부분을 클릭하면 해당 대안 문서가 있는 웹페이지로 이동합니다.

 

<!-- olympic_wrestling_transcript.html -->
<p>아나운서: 오늘 밤 영국의 웰존슨선수와 아르헨티나 데링고선수 간의 멋진 대결이 있을 예정입니다.  </p>
<p>상황: 경기장 중앙에 500석이 마련되어 있습니다.</p>
<p>..이하 생략..<p>
<p>
    아나운서: 웹존스 선수가 금메달을 땄습니다. 오늘 경기 여기 까지입니다. 시청해 주셔서 감사합니다.
    <a href="Olympic_Sports.html#Olympic_Wrestling">영상 페이지로 돌아가기</a>
</p>

<a href="Olympic_Sports.html#Olympic_Wrestling">영상 페이지로 돌아가기 </a>에서 href 속성 값을 보면

Olympic_Sports.html파일의 #Olympic_Wrestling 책갈피 지점으로 이동되도록 설정되어 있습니다.

 

---

G58: Placing a link to the alternative for time-based media immediately next to the non-text content

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

G58: Placing a link to the alternative for time-based media immediately next to the non-text content | Techniques for WCAG 2.0