Введение в WAI-ARIA

За последнее несколько лет развивался не только HTML5 но и JavaScript, в настоящее время существует большое количество front-end фреймворков. Следовательно интернет стал не только площадкой для семантических страниц HTML, но и для веб-приложений с собственными виджетами, элементами управления и поведения.

Семантика в HTML 5

Сначала коротко о том, что такое семантика в HTML 5 и постепенно перейдём к WAI-ARIA. Что бы Вам было легче понять семантику в HTML 5 смотрите примеры.

Вот код разметки без семантики в HTML 5:

<div class="zapisi">
   <h1 class="zagolovok">Заголовок</h1>
    <div class="tekst">Текст</div>
</div>

Код с плохой семантикой в HTML 5:

<div class="article">
   <h1>Заголовок</h1>
       Текст
</div>

Код с хорошей семантикой в HTML 5:

<article>
   <h1>Заголовок</h1>
       Текст
</article>

Конечно, семантика в HTML 5 связана с разметкой HTML 5, таким способом выделяется содержание из макета. Казалось бы все хорошо … Но проблемы есть, они связаны с ограниченными возможностями разметки, просто существуют веб-приложения которые интенсивно используют JavaScript для динамического контента.

Проблемы в разметке HTML для JavaScript:

  1. Неизвестна функциональность элементов.
  2. Неизвестно состояние и свойство элемента.
  3. Не учитывается изменение динамического содержимого.
  4. Плохая поддержка управления с клавиатуры.
к меню ↑

Введение в WAI-ARIA

WAI-ARIA или проще сказать Ария была разработана Web Accessibility Initiative и теперь рекомендуется консорциумом W3C.

Технология WAI-ARIA похожа на атрибуты HTML5, которые также будут включены в обычный код HTML.

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

Теперь давайте посмотрим на то как WAI-ARIA поможет нам расширить структуру HTML, чтобы сделать ее более управляемой. Для примера возьмём табы, закладки от Bootstrap и изучим в деталях рассматривая каждую из вышеуказанных ключевых проблем.

к меню ↑

Функциональность с помощью ролей

ARIA предоставляет широкий выбор ролей что позволяет нам как веб-разработчикам, классифицировать теги HTML. Тем самым раскрывая общею роль, которую они играют в документе HTML.

Bootstrap использует неупорядоченный список для выделения вкладок. При этом Фреймворк Bootstrap также используется роли ARIA tablist и tab.

<ul id="myTab" class="nav nav-tabs" role="tablist">
  <li class="active">
    <a href="#home" role="tab" data-toggle="tab">Главная</a>
  </li>
  <li>
    <a href="#profile" role="tab" data-toggle="tab">О Нас</a>
  </li>
  <li>
    <a href="#articles" role="tab" data-toggle="tab">Блог</a>
  </li>
</ul>

Здесь роли переопределяют обычный список вкладок, тип элементов предоставляет фрагмент кода HTML для списка.

Вот HTML код для содержания вкладок, к ним мы будем добавлять правильные роли ARIA, которых в коде Bootstrap нет:

<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home" role="tabpanel">
     Добро пожаловать!
   </div>
   <div class="tab-pane fade" id="profile" role="tabpanel">
     Авторы
   </div>
   <div class="tab-pane fade" id="articles" role="tabpanel">
     Записи
   </div>
</div>

не обращайте внимания на название классов, active и tab-pane они принадлежат Bootstrap для отображения состояния вкладок.

к меню ↑

Состояние и свойство

Состояние и свойства ARIA предоставляют пользователю информацию о том, в каком состоянии приложение, когда команды поступают с клавиатуры. Для этого случая W3C предоставляет нам подробную документацию о вкладках с WAI-ARIA.

Связь между вкладками существует только потому что JavaScript связывает их вместе. Другими словами, прямой связи нет. Свойства aria-controls и aria-labelledby помогут их связать.

Свойство aria-controls используется для связи элемента с областью, к которой он принадлежит. Свойство aria-labelledby используется чтобы указать, что элемент работает как метка для элемента.

Вот улучшенная разметка для списка вкладок:

<li class="active">
  <a id="tab1" href="#home" role="tab" aria-controls="home" data-toggle="tab">Главная</a>
</li>

Вот новая разметка для содержания вкладки:

<div class="tab-pane fade in active" id="home" role="tabpanel" aria-labelledby="tab1">
   Добро пожаловать!
</div>

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

Здесь только одна выбранная вкладка соответствует содержанию вкладки. Свойства aria-selected и aria-hidden Boolean и могут быть установлены в true или false. С помощью JavaScript по умолчанию на соответствующих вкладках могут быть установлены значения в разметке для активной вкладки.

к меню ↑

Блоки для динамического содержания

Обновить содержание для дальнейшего чтения без перезагрузки страницы, особенно в дни Ajax и single-page не составляет труда. Даже такая простая вещь, как список вкладок может быть более сложнее. Представьте, что содержание вкладок меняется автоматически через некоторое время (похоже на слайдер изображений), а пользователь не успел дочитать.

Чтобы решить эту проблему в ARIA создана концепция live regions, которая позволяет получать уведомления о внесении изменений в конкретной части документа.

Применить динамическую часть к элементу div для активной вкладки:

<div id="myTabContent" class="tab-content" aria-live="polite">
  ...
</div>

Свойство aria-live обновит содержание вкладки только в том случае, если пользователь не занят чем то другим на странице с вкладками.

к меню ↑

Расширенная навигация с клавиатуры

В HTML4 с помощью клавиши TAB можно было перейти к тем тегам HTML, которые имели фокус, в основном это ссылки и элементы формы. С помощью клавиатуры перейти к элементам span или div которые могут представлять собой закладки или выпадающее меню, было проблемой.

Благодаря атрибуту ARIA tabindex с клавиатуры можно выделить каждый элемент HTML. В настоящее время, это является частью спецификации HTML5.

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

Обязательно прочитайте раздел дополнительные рекомендации о “Навигация с помощью клавиатуры” на Mozilla Developer Network.

к меню ↑

ARIA и HTML5

Не всегда нужно добавлять роли ARIA к элементам HTML 5. В HTML5 добавлены полезные семантические теги и атрибуты, например progress и nav.

Неправильное применение ролей:

<div role="navigation"></div>
<!-- вместо этого используйте <nav> -->

<h2 role="button"></h2>
<!-- не имеет семантику, используйте <button><button> -->

Раньше для элемента HTML div добавляли роль:

<div class="main-navigation" role="navigation">

Теперь в HTML5 есть тег nav к которому не нужно добавлять role="navigation".

Семантические элементы к которым уже применены роли в браузере: nav, article и button. По умолчанию подразумевается, что к этим элементам применяются роли role="navigation", role="article" и role="button".

Смотрите таблицу W3C чтобы проверить, является ли атрибут Ария обязательным для определенного элемента.

в настоящее время существует много страниц W3C написанных русском языке, теперь многое можно узнать не из песочниц.

к меню ↑

Поддержка браузерами WAI-ARIA

Технология ARIA не влияет на DOM или на стили, поэтому используйте ARIA без опасения. Для ролей ARIA можно применить свойства CSS:

.button[aria-hidden="true"] {
  display: none;
}

Поддержка браузерами WAI-ARIA большая, можете использовать прямо сейчас.

к меню ↑

Заключение

Технология ARIA была разработана так, чтобы не ограничивать рабочий процесс сайта или веб-приложения. Технология WAI-ARIA предназначена увеличить доступность управления виджетами построенных на JavaScript.