Для чего нужны ARIA-атрибуты?
Продвинутые темы
ARIA-атрибуты (Accessible Rich Internet Applications) нужны, чтобы сделать интерфейс доступным для вспомогательных технологий (скринридеров), когда стандартной семантики HTML недостаточно.
Зачем нужны
Скринридеры понимают семантику HTML, но при кастомных виджетах (дропдауны, табы, модалки на <div>) семантики нет. ARIA добавляет роли, состояния и свойства, объясняя ассистивным технологиям, что это за элемент и его состояние.
Три группы
- Роли (role) — что это за элемент:
role="button",role="dialog",role="navigation". - Состояния (states) — текущее состояние:
aria-expanded="true",aria-checked,aria-disabled,aria-hidden. - Свойства (properties) — доп. информация:
aria-label,aria-labelledby,aria-describedby.
<button aria-label="Закрыть" aria-expanded="false">×</button>
<div role="alert">Ошибка сохранения</div>Главное правило ARIA
«No ARIA is better than bad ARIA» — сначала использовать нативные семантические теги (<button>, <nav>), и только когда их не хватает — добавлять ARIA. Нативный <button> доступен из коробки, а <div role="button"> требует ещё и клавиатурной обработки.
Когда применять
- Кастомные виджеты без нативного аналога.
- Динамические уведомления (
aria-live). - Скрытие декоративного контента (
aria-hidden).
Коротко для собеседования
ARIA-атрибуты добавляют роли, состояния и свойства для доступности кастомных виджетов, когда семантики HTML не хватает (role, aria-expanded, aria-label). Правило: сначала нативные теги (<button>), ARIA — только при необходимости («No ARIA is better than bad ARIA»).