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

За последнее несколько лет развивался не только HTML5 но и JavaScript, в настоящее время существует большое количество front-end frameworks. Следовательно интернет стал не только площадкой для семантических страниц 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>
   <p class="tekst">Текст</p>
</div>


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



<article>
  <h1>Заголовок</h1>
   <p>Текст</p>
</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 и изучим в деталях рассматривая каждую из вышеуказанных ключевых проблем.

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

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

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



<ul id="myTab" class="nav nav-tabs" role="tablist">
  <li class="active">
    <a href=
http://pixelcom.crimea.ua/"#home" role="tab" data-toggle="tab">Главная</a>
  </li>
  <li>
    <a href=
http://pixelcom.crimea.ua/"#profile" role="tab" data-toggle="tab">О Нас</a>
  </li>
  <li>
    <a href=
http://pixelcom.crimea.ua/"#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">
    <p>Добро пожаловать!</p>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel">
    <p>Авторы</p>
  </div>
  <div class="tab-pane fade" id="articles" role="tabpanel">
    <p>Записи</p>
  </div>
</div>


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

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

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

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

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

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



<li class="active">
  <a id="tab1" href=
http://pixelcom.crimea.ua/"#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">
  <p>Welcome!</p>
</div>


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

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

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

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

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

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



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


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

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

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

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

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

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

ARIA и HTML5

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

Примеры с неправильным применением ролей:



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


Можно ли использовать ARIA

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



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


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

Заключение

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>