Улучшение доступности видео-плеера HTML5

Титры и стенограммы

Как крайне важное свойство доступности, каждый плеер видео/мультимедиа должен предоставлять поддержку для титров и/или стенограмм. К сожалению, текущая спецификация W3C HTML5 не содержит ничего с этим связанного. С другой стороны спецификация WHATWG HTML5 (да, существует две спецификации HTML5) недавно добавила элемент <track> для титров. Это "позволяет авторам определить явные внешние размеченные по времени дорожки для элементов медиа ". Поэтому, по существу, вы можете определить внешний файл, содержащий титры, подзаголовки, описания или другие размеченные по времени дорожки. Можно определить несколько элементов <track> для различных дорожек, таких как различные языки.

Текущий формат файла называется WebSRT (http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#websrt), и является, по сути, улучшенной версией формата SRT для SubRip.

Можно прочитать больше об этом в спецификации WHATWG HTML5 (http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element).

Этот элемент отсутствует в спецификации W3C, в связи с "политическими" проблемами, в основном, потому что текущий предложенный формат (WebSRT) конфликтует с примерно 50 другими форматами, включая форматы W3C, такие как smilText и TTML.

Одной из основных проблем является то, что он не реализован сейчас ни в одном браузере, но не бойтесь – мы собираемся реализовать элемент самостоятельно, используя JavaScript. Это лучший защищенный от будущих изменений способ использовать титры сейчас. Когда однажды проблемы разрешатся, и браузеры реализуют элемент, нам не понадобиться изменять существующую разметку для использования собственных титров.

Техника, которую мы собираемся использовать, является в какой-то степени обратной версией техники создания титров Брюса Лоусона. Если вы не знакомы с ней, прочтите статью Улучшение доступности видео в HTML5 с помощью титров на основе JavaScript (http://dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/) на сайте Dev Opera.

Описанная в этой статье техника описывает использование разметки HTML для определения титров, использование специальных атрибутов data для задания смещения времени для каждого титра. Затем выполняется синтаксический анализ элементов и создается объект JavaScript, который используется для отображения каждого титра в правильное время. Она использует также генерируемый с помощью CSS контент для вставки отметок времени в контент.

Мы собираемся изменить технику на прямо противоположную, и интерпретировать элементы <track> таким же образом, как может браузер.

Прежде всего, нам потребуется интерпретатор для файлов, так как мы собираемся использовать анализатор SRT Сильвии Пфайффер (http://silvia-pfeiffer.de/) – посмотрите его обсуждение в следующей статье (http://blog.gingertech.net/2009/07/29/first-experiments-with-itext/), и демонстрационный пример анализатора SRT (http://www.annodex.net/~silvia/itext/).

Теперь в функции инициирования титров мы собираемся найти элементы <track>. Если мы найдем более одного элемента, мы сгенерируем разметку и позволим пользователю выбирать титры из списка. Спецификация включает атрибут label для элемента <track>, определяя его как "читаемый пользователем заголовок дорожки", который "используется агентами пользователя при перечислении дорожек подзаголовков, титров, и аудио описаний в своем пользовательском интерфейсе". Поэтому мы собираемся использовать этот атрибут в своем UI.

<ul>
  <li>
    <label>
      <input type="radio" name="acornCaptions" checked="checked" />
      None
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="acornCaptions" />
      English <!-- это атрибут "label" элемента <track> -->
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="acornCaptions" />
      Romani <!-- это атрибут "label" элемента <track> -->
    </label>
  </li>
</ul>

Мы используем неупорядоченный список с кнопками <input type="radio">.

Мы помещаем элементы <input> и текст в элементы <label>, чтобы вспомогательные технологии ассоциировали метку с кнопкой, не определяя <label> отдельно и присваивая ему уникальный ID и кнопку.

Реальный текст метки является контентом атрибута label элемента <track>.

Когда пользователь выбирает титры, мы загружаем их с помощью вызова Ajax, анализируем, создаем с каждым титром привязанный к времени объект, и генерируем также стенограмму.

Это звучит сложнее, чем является в действительности.

$.ajax({
  url: url,
  success: function(data) {
    // используем анализатор SRT на загруженных данных 
    captions = parseSrt(data);
    
  // находим управляющую кнопку стенограммы и отображаем ее  

    video.$transcript = video.$container.next('.acorn-transcript');
    video.$transcriptBtn.show();
    
    // генерируем разметку для стенограммы и добавляем ее

    var transcriptText = '';
    $(captions).each(function() {
      transcriptText += '' + this.content.replace("'","") + '';
    });
    video.$transcript.html(transcriptText);
    
    captionsActive = true;
    video.$captions.show();
    
    // в случае паузы видео и 
// при отключенном timeUpdate, 
// мы будем updateCaption (обновлять титры) вручную 
    
if(video.$self.attr('paused')) updateCaption();  
        
    video.$captionsBtn.addClass('acorn-captions-active').removeClass('acorn-captions-loading');
  },
  error: function() {

    // в случае ошибки при загрузке титров
// не отображайте ничего и покажите сообщение 
// об ошибке, если присутствует консоль 
    
    captionsActive = false;
    captions = '';
    video.$transcriptBtn.hide();
    video.$captionsBtn.removeClass('acorn-captions-active').removeClass('acorn-captions-loading');
    
    if(console) console.log('Error loading captions');
  }
});

Код достаточно просто понять, поэтому я собираюсь сосредоточиться больше на стенограммах. Можно видеть, что мы генерируем разметку и используем функцию jQuery html(), чтобы добавить их в контейнер стенограмм. Мы используем такую же разметку, как и техника Брюса Лоусона, но теперь для стенограммы, а не для титров.

Таким образом, мы генерируем стенограмму на основе титров, и можем иметь столько версий стенограммы, сколько имеется версий титров.

Клавиши доступа?

Большинство доступных плееров мультимедиа и RIA реализуют некоторую форму клавиш доступа, либо с помощью стандартного атрибута accesskey, либо присваивая сложные комбинации клавиш с помощью JavaScript. Хотя это может показаться отличным решением для большинства разработчиков, обследования и примеры использования говорят об обратном.

Это "свойство", нацеленное на улучшение доступа к страницам и приложениям, оказались плохо спроектированными и реализованными, создавая путаницу у пользователей вспомогательных технологий, а не помогая им.

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

Окончательная отделка

Наш плагин берет стандартный элемент <video> из HTML5 и создает для него доступные элементы управления, поддержку титров и стенограммы, и другие средства, но он не предоставляет никакой поддержки для описания видео. Это необходимо сделать без использования плагина.

Я предлагаю использовать элемент <figure> из HTML5 вместе с <figcaption>, и использовать атрибут aria-describedby для соединения элемента <video> с описанием. В этом случае, когда, например, считыватель экрана достигнет видео, он получит также его описание.

<figure>
  <video controls="controls" width="300" height="200" preload="metadata" aria-describedby="videodescription">
    <source src="/path/to/video.webm" />    
    <track src="/path/to/caption.srt" kind="captions" srclang="rom" label="Romani" />          
  </video>
  <figcaption id="videodescription">
    Трейлер короткого анимационного фильма "Sintel", проекта Durian Open Movie компании Blender Foundation. 
    Дополнительная информация на сайте http://durian.blender.org. Это описание видео.
  </figcaption>
</figure>

Запасной вариант

Также как и в предыдущей статье о видео плеере, я не собираюсь создавать механизм запасного варианта, так как каждый метод запасного варианта имеет свои собственные проблемы доступности, будет ли это Flash, Java, Silverlight или что-то другое. Разработчик должен определить для себя лучший подход.

Заключение

Посмотрите демонстрационный пример видео плеера HTML5 с повышенной доступностью (http://dev.opera.com/articles/view/more-accessible-html5-video-player/demos.html), дополненный всем, что было описано в этой статье.

Описанные в этих статьях технические приемы для элемента <video> из HTML5 привели к созданию готового к реальному использованию плагина jQuery. Самую последнюю версию и дальнейшие разработки можно посмотреть в репозитории Github плеера Acorn Media (http://github.com/ghinda/acornmediaplayer).

По мере того как HTML5 переносится на все большее количество платформ и устройств, крайне важно, чтобы разработчики и создатели учитывали проблемы доступности во время реализации новых свойств, а не впоследствии, после их создания.

Дальнейшее чтение

Дополнительная информация об элементе <video>

1. Все необходимое о видео и аудио в HTML5 (http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2)
2. Улучшение доступности видео в HTML5 с помощью титров на основе JavaScript (http://dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/)

Учебные материалы компании Opera по доступности

1. Основы доступности (http://dev.opera.com/articles/view/25-accessibility-basics/)
2. Тестирование доступности (http://dev.opera.com/articles/view/26-accessibility-testing/)

Ресурсы

1. Доступность в HTML5 (http://html5accessibility.com/)
2. Ресурсы ARIA (http://wiki.codetalks.org/wiki/index.php/ARIA_Resources)
3. Семантика в HTML 5 (http://www.alistapart.com/articles/semanticsinhtml5)
4. Встроенные роли доступности в HTML5 (http://hsivonen.iki.fi/html5-roles/)
5. Самодельные элементы управления для улучшения доступа к UI с помощью ARIA и HTML (http://www.w3.org/2010/Talks/www2010-dsr-diy-aria/#(1))
6. Террилл Томпсон: Создание собственного медиа плеера HTML5 с улучшенной доступностью (http://terrillthompson.blogspot.com/2010/08/creating-your-own-accessible-html5.html)
7. Результаты исследования пользователей считывателей экрана (http://webaim.org/projects/screenreadersurvey2/)
8. HTML5, роли ARIA, и считыватели экрана в мае 2010 (http://www.accessibleculture.org/research/html5-aria/)
9. Wikipedia о клавишах доступа (https://secure.wikimedia.org/wikipedia/en/wiki/Access_key)