Как должна быть видна стенограмма видео для достижения WCAG 2.0?

Question

Я создаю веб-сайт, который должен обеспечить соответствие AA WCAG.

Мы собираемся предоставить видео, и чтобы сделать это прямо, должна быть стенограмма этого видео, мой вопрос в том, где в html был правильный порядок размещения этой стенограммы до, после. есть действующий тег, чтобы соответствовать этому.

Спасибо за ваше время.

Answer 1

Спасибо за помощь ребята! Я сделал свое исследование, и окончательный ответ соответствовал правильным атрибутам арии и некоторому html5.

<figure>
            <div class="video">
                <video id="main_video" controls >
                    <source src="<?php echo $source_video?>" type="<?php echo $video_source['mime_type']?>">
                    <source src="<?php echo $source_video_2; ?>" type="video/webm">
                </video>
            </div>

            <details >
                <summary aria-controls="transcript_content" tabindex="0" aria-expanded="false" id="show-hide-transcript" > Transcript </summary>
                <div id="transcript_content" aria-live="off" aria-atomic="true" aria-relevant="all" tabindex="0" aria-expanded="false" role="article"  ><?php echo $video_transcript ?></div>
            </details>
        </figure>

Answer 2

В идеале стенограмма должна быть размещена перед видео. Специально для транскриптов тега нет - вам нужно разметить речь и описания, используя теги абзаца и любую другую полезную разметку, такую ​​как заголовки, сильный, выделение и т. Д. Мне нравится использовать ссылку чуть выше видео, чтобы показать / скрыть расшифровка стенограммы, поэтому она не займет много места на странице, пока пользователь не решит, что хочет ее прочитать. Этот список доступных ресурсов медиа-плеера должен дать вам несколько хороших примеров.

Answer 3

WCAG предоставляет два метода для критерия успеха 1.2.2 - титры (предварительно записанные)

• G93: Предоставление открытых (всегда видимых) подписей

• G87: Предоставление скрытых титров внутри видео

Лучший способ справиться с обеими ситуациями - использовать HTML5 <track> тег для указания подписей.

Если ваше видео является "медиа-альтернативой для текста", вы должны четко обозначить его как таковое. Проблема в том, что " Использование aria-labelledby для предоставления текстовой альтернативы нетекстовому контенту " не поддерживает браузер, но вы все равно можете его использовать. Мое мнение таково, что стенограмма должна быть связана aria-describedby, Но, тем не менее, для пользователей, не использующих программу чтения с экрана, вы должны прояснить (и заметную) роль текста. Всегда неприятно начинать смотреть видео после прочтения текста и понимания, что текст является его расшифровкой.

Я бы сказал, что лучше всего использовать что-то вроде следующего (используя track для скрытых подписей и / или стенограммы, четко объявленной перед видео и обозначенной как таковой после):

  <h2 id="title">Title of my video</h2> (<a href="#transcript">see transcript</a>)
  <video src="foo.ogv" aria-labelledby="title" aria-describedby="transcript">
    <track kind="subtitles" label="English subtitles" src="subtitles.vtt" srclang="en" default></track>
  </video>
  <div id="transcript">
      <strong>Transcript of the video:</strong>
      Transcript here
  </div>

Примечание: вы не должны использовать тело object ( Метод H53), поскольку это не поддерживается современными программами чтения с экрана, которые могут обрабатывать навигацию с помощью апплетов