Современный интернет насыщен динамическими и сложными интерфейсами: модальными окнами, выпадающими меню, аккордеонами, табами и кастомными виджетами. Визуально они могут выглядеть и работать прекрасно, однако для людей с нарушениями зрения, которые используют экранные дикторы (скринридеры, например NVDA, JAWS или VoiceOver), или для пользователей, управляющих сайтом исключительно с клавиатуры, такие элементы часто остаются полностью «невидимыми».
Для решения этой проблемы консорциум W3C создал спецификацию WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications). Она дает разработчикам инструменты для передачи семантического содержания и состояния элементов веб-приложений вспомогательным технологиям.
1. Что такое ARIA и как она работает?
ARIA – это набор специальных HTML-атрибутов, которые добавляют семантическую информацию к элементам страницы, где стандартного HTML5 недостаточно. Все ARIA-атрибуты делятся на три основные категории:
- Roles (Роли): Определяют, чем является элемент пользователя скринридера (например,
role="dialog",role="tab",role="navigation",role="alert". Роль задается один раз и обычно не меняется динамически. - States (Состояния): Сообщают о текущем динамическом состоянии элемента, изменяющегося в процессе взаимодействия пользователя через JavaScript (например,
aria-expanded="true/false",aria-hidden="true/false",aria-checked="true/false"). - Properties (Свойства): Дополнительные характеристики элементов и связи между ними (например,
aria-label,aria-labelledby,aria-describedby,aria-controls).
2. Сравнительный анализ ключевых атрибутов ARIA
| Атрибут | Категория | Назначение | Пример использования |
|---|---|---|---|
role="..." |
Роль | Определяет тип элемента, если стандартный HTML-тег отсутствует или несет другое содержание. | <div role="button" tabindex="0">Кнопка</div> |
aria-label="..." |
Свойство | Задает явное текстовое описание для элемента, не имеющего видимого текста. | <button aria-label="Закрыть модальное окно">✕</button> |
aria-labelledby="..." |
Свойство | Указывает ID элемента, служащего заголовком/названием для текущего блока. | <div role="dialog" aria-labelledby="modal-title"> |
aria-expanded="..." |
Состояние | Показывает, развернуто ли связанное содержимое (аккордеон, меню, дропдаун). | <button aria-expanded="false" aria-controls="sub-menu"> |
aria-hidden="..." |
Состояние | Скрывает элемент от вспомогательных технологий (иконки, декоративные элементы). | <svg aria-hidden="true">...</svg> |
aria-live="..." |
Свойство | Объявляет скринридеру о динамических изменениях на странице без перефокусировки. | <div aria-live="polite">Товар добавлен в корзину</div> |
3. Первое правило ARIA и алгоритм внедрения
Главное правило спецификации W3C звучит так: «Не используйте ARIA, если вы можете использовать семантический HTML-тег» (No ARIA is better than bad ARIA). Нативный HTML уже содержит встроенную доступность, семантику и поддержку по умолчанию клавиатуры.
- Шаг 1: Используйте семантический HTML5 в первую очередь. Вместо
<div class="btn" role="button">всегда отдавайте предпочтение нативному<button>. Вместо<div role="navigation">используйте<nav>. - Шаг 2: Добавляйте ARIA только для сложных/кастомных компонентов. Если вы разрабатываете интерактивный виджет (модальное окно, табы, кастомный
select), для которого нет единого нативного HTML-тега, используйте ARIA для связывания элементов и передачи состояний. - Шаг 3: Управляйте состояниями динамически через JavaScript. При щелчке или нажатии клавиш обновляйте соответствующие атрибуты в DOM (например,
element.setAttribute('aria-expanded', 'true')). - Шаг 4: Обеспечьте полноценную навигацию с клавиатуры. ARIA не добавляет автоматическую поддержку клавиатуры! Вы должны самостоятельно обрабатывать клавиши
Tab,Enter,SpaceиEscape, а также проверять наличие фокуса (tabindex="0").
Совет фронтенд-разработчика: Распространенная и опасная ошибка – добавление
aria-hidden="true"на элементы, содержащие фокусированные кнопки или ссылки. Это приводит к тому, что пользователь клавиатуры может попасть фокусом на элемент, но скринридер будет молчать, создавая эффект «сломанного» сайта. Всегда тестируйте свои веб-приложения с выключенной мышью с помощью клавишиTabи включенным скринридером (например, бесплатным NVDA для Windows или VoiceOver на macOS).
