WAI-ARIA следует добавлять только там, где возможностей семантического HTML недостаточно. Сначала выбирают нативный элемент, затем проверяют его поведение и лишь после этого назначают роли, состояния или свойства. Атрибуты доступности не исправляют логику компонента автоматически: клавиатурное управление, фокус и изменение состояния всё равно реализует разработчик.
Когда нативного HTML достаточно?
Для кнопок, ссылок, полей ввода и заголовков обычно не нужны дополнительные роли. Браузер уже передаёт вспомогательным технологиям назначение элемента, его состояние и доступное имя.
Например, элемент <button> получает фокус с клавиатуры и активируется клавишами Enter и Space. Конструкция <div role="button"> сообщает только роль. Она не добавляет фокусировку, обработчики клавиш и ожидаемое поведение при отключённом состоянии.
ARIA полезна для сложных виджетов, у которых нет прямого HTML-эквивалента, а также для передачи динамических состояний. Это могут быть вкладки, раскрывающиеся панели, древовидные меню или уведомления, появляющиеся без перезагрузки страницы. Даже здесь часто можно сохранить нативные кнопки и поля как основу компонента.
Какие атрибуты решают разные задачи?
Роль описывает назначение элемента, состояние сообщает о текущем положении, а свойство связывает компонент с подписью или другим объектом. Эти задачи нельзя смешивать: лишний атрибут иногда создаёт более серьёзную проблему, чем его отсутствие.
| Задача | Подходящий атрибут | Практический нюанс |
|---|---|---|
| Задать короткое имя | aria-label |
Текст должен ясно описывать действие, а не внешний вид значка |
| Взять имя из элемента | aria-labelledby |
В значении указывают существующий id |
| Добавить пояснение | aria-describedby |
Описание дополняет имя, но не заменяет его |
| Передать раскрытие панели | aria-expanded |
Значение меняют вместе с видимым состоянием |
| Скрыть декоративный узел | aria-hidden="true" |
Нельзя скрывать так доступный фокусируемый элемент |
| Сообщить об обновлении | aria-live |
Режим выбирают по срочности сообщения |
У кнопки с одной иконкой доступное имя может отсутствовать, хотя её назначение очевидно зрячему пользователю. Здесь уместна краткая подпись вроде «Открыть поиск». Если рядом уже есть видимый текст, обычно лучше связать его через aria-labelledby, а не создавать второе название.
Почему атрибуты должны отражать реальное состояние?
Значения ARIA обязаны меняться одновременно с интерфейсом. Если панель открылась, а aria-expanded осталось равным false, пользователь вспомогательной технологии получает неверную информацию.
Для раскрывающего элемента атрибут размещают на управляющей кнопке. Свойство aria-controls может указывать на id связанной панели, но оно не открывает её и не перемещает фокус. Скрипт должен отдельно управлять видимостью, клавиатурными событиями и, если сценарий этого требует, положением фокуса.
С динамическими уведомлениями тоже нужна сдержанность. Область aria-live подходит для результата сохранения, ошибки или изменения числа найденных объектов. Если сделать «живыми» несколько часто обновляемых зон, поток сообщений начинает перекрывать полезную информацию, словно несколько уведомлений звучат одновременно.
Как проверить компонент перед публикацией?
Проверка должна охватывать разметку, клавиатурный сценарий и фактическое объявление вспомогательной технологией. Автоматический анализ находит часть ошибок, но не определяет, понятны ли название кнопки и порядок действий.
- Пройти компонент только клавишами Tab, Shift+Tab, Enter, Space и стрелками, если они предусмотрены его моделью.
- Проверить, что фокус видим, не теряется после открытия панели и возвращается в ожидаемое место.
- Сопоставить видимые состояния со значениями
aria-expanded,aria-selectedи другими используемыми атрибутами. - Просмотреть дерево доступности в инструментах разработчика: роль, имя и состояние должны соответствовать назначению элемента.
- Проверить ключевой сценарий со скринридером и учитывать, что результаты иногда различаются между браузерами и платформами.
Тестировать лучше не отдельный атрибут, а полную последовательность: найти элемент, понять его назначение, активировать и получить результат. Ошибка часто обнаруживается не в разметке, а в момент, когда фокус уходит за модальное окно или изменение остаётся необъявленным.
Надёжное внедрение начинается с малого: семантический HTML, предсказуемая клавиатура и только необходимые ARIA-атрибуты. Чем меньше скрытой логики приходится достраивать вручную, тем реже интерфейс выглядит исправным на экране, но рассыпается при первом нажатии Tab.