ARIA-атрибуты: роли, состояния и связь элементов

Прямой ответ

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

<button type="button" aria-expanded="false" aria-controls="panel">Фильтры</button>
<div id="panel" role="region" aria-labelledby="filter-title" hidden>...</div>

Кнопка объявляет состояние раскрытия и связь с областью, поэтому пользователь узнаёт о результате действия без визуального контроля. О семантике — в статье про семантическую разметку HTML.

Когда ARIA нужна, а когда избыточна

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

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

Произвольный блок. Блок без семантики не объявляет назначение, поэтому роль задаётся атрибутом.

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

Практическое следствие: роль, заданная на семантическом элементе, может переопределить встроенную семантику, поэтому элемент читается иначе, чем ожидалось.

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

Объявление состояния и изменение значения

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

Состояние раскрытия. Атрибут объявляет, раскрыта ли связанная область, поэтому пользователь узнаёт о результате нажатия.

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

Динамическое изменение. Значение атрибута обновляется при изменении состояния, поэтому объявление соответствует фактическому состоянию.

Практическое следствие: атрибут, не обновляемый при изменении состояния, объявляет прежнее значение, поэтому пользователь получает недостоверное объявление.

Связь элементов и проверка чтения

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

Связь с подписью. Элемент ссылается на элемент подписи, поэтому название читается вместе с элементом.

Связь с описанием. Элемент ссылается на элемент описания, поэтому дополнительное сведение читается после названия.

Проверка чтения. Объявление проверяется вспомогательной технологией, поэтому фактическое чтение подтверждается, а не предполагается.

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

Об основах доступности — в статье про доступность веб-интерфейсов; о проверке — в статье про экранные читалки.

Живые области и объявление изменений

Живая область объявляет изменение содержимого без получения фокуса, поэтому пользователь узнаёт об обновлении без перехода к области.

Область с объявлением. Изменение содержимого области читается автоматически, поэтому уведомление доступно без перехода к элементу.

Приоритет объявления. Область с высоким приоритетом прерывает текущее чтение, поэтому срочное сообщение доставляется немедленно.

Частота обновления. Область, обновляемая часто, читается при каждом изменении, поэтому поток объявлений затрудняет чтение остального содержимого.

Практическое следствие: уведомление, размещённое вне живой области, не читается до получения фокуса, поэтому пользователь не узнаёт о результате действия.

Отдельный аспект — объём объявления. Область, содержащая длинный текст, читается целиком при каждом обновлении, поэтому содержимое области ограничивается коротким сообщением.

Практика: применение ARIA-атрибутов

1. Используйте семантический элемент вместо атрибута роли. Назначение объявляется встроенной семантикой без дополнительных атрибутов.

2. Применяйте роль только к элементам без семантики. Произвольный блок получает объявление типа через атрибут.

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

4. Объявляйте состояние интерактивных элементов. Пользователь узнаёт о результате действия без визуального контроля.

5. Обновляйте значение атрибута при изменении состояния. Объявление соответствует фактическому состоянию элемента.

6. Связывайте элемент с подписью и описанием. Название и дополнительное сведение читаются вместе с элементом.

7. Проверяйте чтение вспомогательной технологией. Фактическое объявление подтверждается проверкой.

Рекомендации:

1. Не полагайтесь на роль как на источник поведения. Атрибут объявляет тип элемента, но не добавляет интерактивность и достижимость с клавиатуры.
2. Учитывайте избыточность атрибутов. Атрибут, повторяющий семантику, усложняет разметку без добавления сведения.
3. Сопоставляйте состояние атрибута с фактическим состоянием интерфейса. Необновлённый атрибут объявляет прежнее значение.
4. Фиксируйте проверку объявления в процессе разработки. Недостоверное объявление обнаруживается до выпуска.
5. Пересматриваем набор атрибутов при изменении элемента. Новое состояние требует объявления через атрибут.

Практический сценарий: состояние раскрытия объявлялось неверно

Контекст: пользователь вспомогательной технологии не узнавал, раскрыта ли область фильтров, хотя визуально состояние менялось.

1. Диагностика. Проверка вспомогательной технологией показала, что атрибут состояния присутствовал, но не обновлялся при раскрытии области. Объявление всегда сообщало одно и то же значение, независимо от фактического состояния.
2. Причина. Значение атрибута задавалось один раз при разметке и не изменялось при переключении состояния, поэтому объявление не соответствовало фактическому состоянию интерфейса.
3. Действия. (а) Добавили обновление значения атрибута при каждом переключении состояния, чтобы объявление соответствовало факту; (б) связали кнопку с раскрываемой областью, чтобы отношение элементов было доступно; (в) проверили, что область скрыта от вспомогательной технологии в закрытом состоянии; (г) убедились, что элемент реализован семантической кнопкой и достигается с клавиатуры; (д) проверили чтение состояния вспомогательной технологией после каждого переключения.
4. Результат. Состояние области объявляется корректно при каждом переключении, поэтому пользователь узнаёт о результате действия.

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

FAQ

Когда ARIA-атрибуты нужны? Когда элемент не имеет семантики, объявляющей назначение либо состояние. Семантический элемент даёт объявление без атрибутов.

Может ли атрибут роли ухудшить доступность? Да, роль на семантическом элементе может переопределить встроенную семантику, поэтому элемент читается иначе, чем ожидалось.

Добавляет ли роль поведению элемента? Нет, атрибут объявляет тип элемента. Интерактивность и достижимость с клавиатуры реализуются отдельно.

Как проверить, что объявление читается верно? Проверкой вспомогательной технологией. Автоматическая проверка находит часть нарушений, поэтому ручная проверка обязательна.

Источники: WAI-ARIA 1.2, WAI ARIA Authoring Practices, MDN ARIA — ссылки в шапке.