The Web Accessibility Initiative's Accessible Rich Internet Applications Suite (WAI-ARIA, или просто ARIA) — это набор инструментов и указаний для того, чтобы сделать веб-контент и приложения более доступными.
В частности, он включает в себя набор атрибутов, которые мы можем добавлять к HTML-элементам для придания им семантической информации, которая может быть прочитана с помощью специальных возможностей (assistive technologies).

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

1. Используйте семантический HTML в пользу ARIA

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

Правило номер один — не пытайтесь использовать ARIA, если в этом нет необходимости. HTML5 предоставляет нам широкий спектр семантических элементов.

Поэтому, по возможности, нам стоит использовать семантический HTML-элемент, а не ARIA-атрибут.

Вместо того, чтобы создавать <div> элемент и добавлять ARIA-роль:

<div role="button">Click Me</div>  

Неправильный подход

Нам следует использовать элемент <button>:

<button>Click Me</button>  

2. Не изменяйте значения семантических элементов ARIA-ролями

Не изменяйте нативную семантику элемента, если вам это не необходимо.

Как я уже замечала, многие семантические HTML-элементы имеют свой смысл. Когда мы используем <button>, например, это указывает юзер-агентам, что это — интерактивный элемент (с ним можно взаимодействовать при помощи клика мыши, клавиши Enter или пробела), что вызовет какое-либо действие на странице. С другой стороны, если мы используем элемент <a>, это указывает юзер-агентам, что интерактивное взаимодействие с таким элементом (посредством клика или нажатии клавиши) приведёт к тому, что пользователь будет направлен на другую страницу или в другую часть этой же самой страницы.

<h1 role="button">Heading Button</h1>  

Неправильный подход

Вместо переопределения семантического значения элемента, нам следует использовать соответствующий элемент:

<h1><button>Heading Button</button></h1> 

Предпочтительный подход

Или, в крайнем случае, мы можем добавить ARIA-роль к элементу, который не несет такого смысла.

<h1><span role="button">Heading Button</span></h1>  

3. Интерактивные элементы ARIA должны быть доступны для всех сред

Все интерактивные элементы управления ARIA должны быть пригодны для работы с клавиатуры.

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

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

• Должна быть кликабельной с помощью курсора
• Должна быть кликабельной с помощью клавиши Enter
• Должна быть кликабельной с помощью клавиши пробела

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

4. Используйте соответствующие роли для видимых фокусируемых элементов

Не используйте role="presentation" или aria-hidden="true" на видимых фокусируемых элементах.

ARIA-атрибут role="presentation" подразумевает, что элемент предназначен для визуального взаимодействия и не является интерактивным. Атрибут aria-hidden="true" говорит о том, что элемент не должен быть видим. Когда мы используем эти атрибуты, нам нужно знать, к каким элементам они применяются и являются ли эти элементы видимыми и интерактивными. Например, обе эти кнопки приведут к тому, что некоторые пользователи будут фокусироваться на элементе, который для них не существует.

<button role="presentation">Click Me</button>  
<button aria-hidden="true">Click Me</button>  

Неправильный подход

Эти атрибуты должны применяться только к элементам, которые не являются интерактивными или являются невидимыми.

<button role="presentation" tabindex="-1">Don't Click Me</button>  
<button aria-hidden="true" style="display: none;">Don't Click Me</button>  

5. Интерактивные элементы должны иметь Доступное описание

Все интерактивные элементы должны иметь Доступное описание.

Элементы, с которыми можно взаимодействовать, например кнопки и ссылки, должны иметь «доступное описание».

Доступное описание (accessible name) — имя элемента пользовательского интерфейса.
Очень просто объяснить это на пример кнопки «OK». Текст «OK» — доступное описание (accessible name). (прим. переводчика)

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

<label>  
  Username
  <input type="text">
</label>

<label for="password">Password</label>  
<input type="password" id="password">  

Другие элементы, например кнопки и ссылки, могу получить своё Доступное описание из их контента или label-атрибута (подробнее).