WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) - технологический стандарт, разрабатываемый Консорциумом Всемирной паутины для предоставления возможности полноценного использования Интернета людьми с физическими ограничениями (нарушение работы органов зрения и опорно-двигательного аппарата).

Существует набор атрибутов HTML, входящих в эту систему, они добавляют элементам дополнительную информацию, которая необходима для специальных устройств считывания контента.

Роли ARIA - указывают тип элемента и его предназначение.

<header role="banner">

Роль определяет элемент как баннер.

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

<span class="frame-corner" role="presentation"></span>

Атрибуты ARIA. Атрибуты пишутся с префиксом aria- . Две группы атрибутов: состояния и свойства.

Рекомендации по использованию ролей и атрибутов ARIA.

- Используйте ARIA только в случае необходимости.

Например:

Не следует создавать <div> и добавлять ARIA-роль:

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

Используйте элемент <button>:

<button>Click Me</button>

- Не используйте ARIA-роли для изменения семантики HTML тега.

Так не надо:

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

Так лучше:

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

- Доступность во всех средах.

Учитывайте, чтобы интерактивные элементы были доступны для управления мышкой и клавиатурой. Предыдущий промер с кнопкой: тег <button> делает элемент доступным с клавиатуры, а <h1 role="button"> - нет.

- Обязательно добавляйте понятное описание интерактивному элементу.

Кнопки, ссылки, формы.

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

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

Если требуется дополнительные пояснения к полям формы, используйте aria-describedby.

<label id="passLabel" for="pass">Password</label>
<p id="passInstructions">Your password needs to be at least 8 characters long and have 1 number</p>

<input id="pass" type="password" aria-describedby="passInstructions" aria-labelledby="passLabel">

- Один элемент - одна роль.

- Подписывайте кнопки, если они не содержат в себе текстовых пояснений.

<button aria-label="Close">X</button>