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

WAI-ARIA

При переписывании исходной разметки можно было бы сохранить исходные элементы и добавить к ним роли ARIA, например, добавить role="button" к элементам <a>. Для пользователей вспомогательных технологий это могло бы заставить их вести себя почти как элементы <button>. Однако при таком подходе возникает ряд проблем.

Проблемой могут быть семантические конфликты. Элемент <div>, например, является семантически нейтральным и может получить любую роль, но другие элементы имеют свою собственную внутреннюю семантику, и добавление к ним случайных ролей может приводить к конфликту между ролью ARIA, пытающейся описать элемент, и его врожденной семантикой.

В связи с этими конфликтами была создана концепция "неявной семантики ARIA". Таким способом спецификация описывает примененную семантику, и ограничение внутренней семантики для большинства элементов. Например, элементы <article>, <aside> и <section> имеют следующую примененную семантику: "article role", "note role" и "region role".

Использование элементов с собственной ролью неизмеримо лучше, чем его "подделка", если такой элемент доступен. Об этом можно дополнительно почитать в спецификации HTML5 в разделе, который связан с WAI-ARIA (Примечания для продуктов вспомогательных технологий - http://dev.w3.org/html5/spec/Overview.html#annotations-for-assistive-technology-products-aria).

Ползунки ARIA

Возвращаясь к плееру, мы теперь разрешили проблемы с кнопками, но, принимая во внимание, что мы не всегда используем собственные ползунки браузера, нам по-прежнему требуется кое-что сделать с ползунками jQuery UI.

Ползунки UI предоставляют отличную клавиатурную доступность, но не имеют никакой поддержки ARIA (в версии 1.8.4). И, считая, что ползунок является элементом <a>, указывающим на href="#" в том же документе, считыватели экрана будут интерпретировать это как посещенную ссылку, а не как управляющий ползунок. Чтобы обойти эту проблему, мы создадим небольшую функцию, чтобы добавить в ползунок ARIA и возможность получать фокус.

Чтобы элемент интерпретировался вспомогательными технологиями как ползунок, необходимо использовать на элементе роль slider. Но ползунок состоит из двух элементов: регулятора и направляющей. ARIA требует соединения с атрибутом только одного элемента, поэтому надо выбрать, какой использовать.

С учетом того, что только один элемент (для ползунка) должен получить фокус, и UI jQuery предоставляет клавиатурное управление для ползунка, когда фокус находится на регуляторе, то это будет лучшим выбором.

Все элементы формы должны опознаваться пользователями, поэтому нужно пометить ползунок. Для этого можно использовать различные подходы. Можно было бы использовать атрибут aria-labelledby, использовать элемент <label> и заставить его указывать на ползунок, или использовать атрибут title. Для нашего случая атрибут title является, вероятно, лучшим решением.

Кроме атрибута role, ползунок ARIA требует следующие атрибуты:

aria-valuenow

Текущее значение ползунка.

aria-value-min

Минимальное значение.

aria-value-max

Максимальное значение, которое может иметь ползунок.

По умолчанию вспомогательные технологии используют атрибут aria-valuenow, но значение должно быть числом – если бы мы хотели предоставить пользователю более удобное для восприятия значение, мы могли бы использовать вместо этого другое свойство ARIA, aria-valuetext. Это значение является строкой, поэтому, например, когда пользователь использует ползунок поиска, то вместо вывода значения "23", можно было бы выводить "23 секунды".

С учетом всего здесь рассмотренного, наша функция выглядит следующим образом:

var initSliderAccess = function (elem, opts) {
  var accessDefaults = {
   'role': 'slider',
   'aria-valuenow': parseInt(opts.value),
   'aria-valuemin': parseInt(opts.min),
   'aria-valuemax': parseInt(opts.max),
   'aria-valuetext': opts.valuetext,
   'tabindex': '0'
  };
  elem.attr(accessDefaults);       
};

Эта функция адаптирована для тех средств, которые используются при вызове ползунка UI jQuery. Мы имеем в функции два объекта в качестве параметров, первый является элементом, с которым выполняется манипуляция, а второй является объектом свойств, которые используются для значений.

Можно видеть, что кроме атрибутов role и aria, мы добавляем атрибут tabindex . Это делается, чтобы гарантировать, что регулятор будет доступен с клавиатуры. Мы используем также функцию parseInt() на некоторых значениях, чтобы не передавать в систему вспомогательных технологий такие значения, как "1.54321".

В предыдущей статье, чтобы фактически заставить ползунки управлять видеоплеером, мы присоединили функции к порождаемым jQuery событиям slide и stop.

И так как мы всегда хотим информировать пользователя о текущем значении ползунка, мы должны изменить значение "aria-valuenow" и "aria-valuetext" на slide().

Мы добавим небольшой код в функции. Для ползунка поиска мы будем использовать следующий код:

sliderUI.attr("aria-valuenow", parseInt(ui.value));
sliderUI.attr("aria-valuetext", ariaTimeFormat(ui.value));

Объект sliderUI является элементом регулятора ползунка, а ui.value является текущим значением ползунка, возвращаемым плагином. Можно видеть, что мы используем для атрибута aria-valuetext другую функцию, функцию ariaTimeFormat().

Вот как выглядит функция ariaTimeFormat():

var ariaTimeFormat = function(sec) {
  var m = Math.floor(sec/60)<10?"" + Math.floor(sec/60):Math.floor(sec/60);
  var s = Math.floor(sec-(m*60))<10?"" + Math.floor(sec-(m*60)):Math.floor(sec-(m*60));
  var formatedTime;
            
  var min = 'minutes';
  var sec = 'seconds';
  
  if(m==1) min = 'minute';
  if(s==1) sec = 'second';
  
  if (m!=0) {        
    formatedTime = m + ' ' + min + ' ' + s + ' ' + sec;
  } else {            
    formatedTime = s + ' ' + sec;
  };          
  
  return formatedTime;
};

Эта функция получает текущее значение ползунка (число секунд, где расположен регулятор) и преобразует его в понятную человеку строку. Если ползунок расположен на 72 (секунде), например, функция вернет "1 minute 12 seconds".

Это особенно полезно для длинных видеофильмов, где без такой функции смещение указателя поиска на 25 минут будет сообщаться как 1500 секунд, делая это достаточно неудобным, особенно для пользователей считывателей экрана.

Мы будем использовать ту же самую функцию ARIAfication на ползунке громкости, чтобы сделать его доступным, и модифицируем функцию изменения громкости, чтобы изменять значение aria-valuenow и aria-valuetext, когда ползунок перемещается:

video.$volume.$handle.attr("aria-valuenow", Math.round(volume*100));
video.$volume.$handle.attr("aria-valuetext", Math.round(volume*100) + ' percent');

Можно видеть, что мы умножаем наше значение на 100. Это связано с тем, что значение громкости находится между 0 и 1, а не между 0 и 100. Также больше смысла имеет предоставление пользователю "процентного" значения для громкости, а не однозначное число, именно поэтому мы добавляем символ процентов к aria-valuetext, а также умножаем и округляем значение.