ARIA - один из многочисленных стандартов и рекомендаций по обеспечению доступности, опубликованных организацией Web Accessibility Intitiative (WAI). Он предоставляет дополнительную разметку, которую можно легко вставить в документы HTML. WAI-ARIA - это кроссплатформенное решение для разных устройств, ориентированное на открытую веб-платформу, поэтому не стоит думать только о веб-сайтах, но также об играх, цифровых развлечениях, здравоохранении, мобильных и других приложениях.

В этом посте мы рассмотрим, как вы можете сделать свои HTML-документы более доступными с помощью стандартов WAI-ARIA.

Фреймворк ARIA

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

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

Именно здесь нам на помощь приходит ARIA, поскольку она позволяет определять назначение различных элементов с помощью ориентиров-ролей и описывать их природу с помощью атрибутов с префиксом aria.

Атрибуты с префиксом Aria бывают двух типов: свойства, описывающие функции, которые с меньшей вероятностью изменятся в течение жизненного цикла страницы, и состояния, которые предоставляют информацию о вещах, которые могут часто меняться из-за взаимодействия с пользователем.

Ориентирные роли

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

Существует 8 типов ролей ориентиров ARIA, и их необходимо добавлять в качестве атрибутов в соответствующие теги HTML.

role=”banner”
Роль баннера предназначена для использования в основном для контента, который относится ко всему сайту, а не только к отдельным страницам. Обычно он добавляется в качестве атрибута к основному заголовку сайта для логотипа и другой важной общесайтовой информации.

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

role=”main”
Главная ориентирная роль связана с основным содержанием документа. Его нельзя использовать более одного раза на любой HTML-странице. Обычно он следует синтаксису <main role="main"> или в HTML5 более семантическому <main role="main">. Последний был добавлен в спецификации W3C с целью сопоставления главной роли ориентира ARIA с семантическим элементом HTML.

role=”navigation”
Роль навигации предназначена для указания области, содержащей элементы навигации, такие как ссылки и списки на сайте.

role=”complementary”
Роль дополнительного ориентира описывает дополнительный контент, связанный с основным контентом сайта. Его необходимо разместить на том же уровне в иерархии DOM, что и role="main". Связанные сообщения, популярные статьи, последние комментарии - типичные примеры автономного дополнительного контента.

role=”contentinfo”
Эта роль информирует пользовательских агентов о наличии региона, в котором могут быть найдены различные виды метаданных, такие как информация об авторских правах, юридические заявления и заявления о конфиденциальности. Обычно используется для нижней части сайта (footer).

role=”form”
Роль ориентира формы указывает на форму, ожидающую ввода пользователя. Вместо этого для форм поиска следует использовать role="search".

role=”search”
Роль поиска говорит сама за себя, она предназначена для помощи вспомогательным технологиям в определении функций поиска на веб-сайте.

role=”application”
Вы можете использовать роль ориентира приложения для региона, который вы хотите объявить как веб-приложение, а не веб-документ. Не рекомендуется включать его на традиционные веб-сайты, так как он намекает вспомогательным технологиям на переключение из обычного режима просмотра в режим просмотра приложений. Используйте эту важную роль только с большой осторожностью.

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

Хотя роли позволяют вам определять значение тегов HTML, состояния и свойства предоставляют пользователю дополнительную информацию о том, как с ними взаимодействовать. И состояния, и свойства помечены атрибутами с префиксом aria с синтаксисом aria-*.

Наиболее известными атрибутами ARIA, вероятно, являются свойство aria-required и состояние aria-checked. Aria-required - это свойство, потому что это постоянная особенность элемента ввода (т.е.пользователь должен его заполнить), в то время как aria-checked - это состояние, потому что флажок может часто менять свое значение из-за взаимодействия с пользователем.

Синтаксис атрибутов с префиксом Aria

Состояния и свойства иногда принимают значения токенов (ограниченный набор предопределенных значений), например, свойство aria-live может иметь 3 различных значения: off, polite, assertive. Синтаксис в этом примере выглядит следующим образом:

<div id="some-id" class="some-class" aria-live="assertive"><div>

В других случаях значения атрибутов с префиксом aria представлены строками, числами, целыми числами, ссылками на идентификаторы или значениями true/false.

Как использовать состояния и свойства ARIA

1. Построение отношений между элементами с помощью атрибутов отношений
Используйте атрибуты взаимосвязи, чтобы указать взаимосвязи между различными элементами на вашем сайте, которые нельзя иначе определить из структуры документа. Например, свойство aria-labelledby идентифицирует элемент, который маркирует текущий элемент.

aria-labelledby - помимо прочего - может связывать заголовки с регионами-ориентирами ARIA следующим образом:

<div role="main" aria-labelledby="some-id"> 
  <h1 id="some-id">This Is A Heading</h1> 
  Main content... 
</div>

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

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

3. Совместите визуальный и доступный интерфейсы.
Общее практическое правило проектирования специальных возможностей заключается в том, что текущее состояние пользовательского интерфейса всегда должно быть воспринято вспомогательными технологиями. Например, если пользователь выбирает параметр в форме, он должен отображаться и для вспомогательных технологий.

Этого легко добиться, используя состояние aria-selected со следующим синтаксисом:

<option aria-selected="true"></option>

Руководство W3C WAI-ARIA Authoring Practices может дать вам много других замечательных идей о том, как правильно согласовать визуальный и доступный интерфейсы вашего сайта.

Не злоупотребляйте ARIA

Использование ролей и атрибутов ARIA иногда может быть избыточным. Когда вы используете семантические теги HTML5, такие как <button> </button> или <form> </form>, современные веб-браузеры по умолчанию добавляют соответствующую семантику ARIA. В этом случае нет смысла отдельно устанавливать роли-ориентиры ARIA.

Например, нет необходимости использовать роль ориентира формы для определения элемента <form>. Вместо синтаксиса <form role="form"> </form> вполне достаточно использовать только <form> </form>. Также излишне использовать собственные атрибуты HTML вместе с соответствующим атрибутом ARIA.

Поэтому, если вы уже добавили атрибут скрытого HTML во входные данные формы, нет необходимости добавлять состояние aria-hidden, поскольку браузер включает его по умолчанию.