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-атрибута (подробнее).
Свежие комментарии