ARIA-метки не чинят интерфейс сами: вот где они реально помогают, а где вредят

ARIA-метки не чинят интерфейс сами: вот где они реально помогают, а где вредят

ARIA нужна там, где обычный HTML не описывает поведение элемента: у кнопки есть состояние, у вкладок — активная панель, у модального окна — открыто/закрыто. Если можно использовать нативный тег, используйте его: button, a, input и так уже понятны скринридеру. ARIA добавляйте как уточнение, а не вместо семантики.

Самые полезные атрибуты в интерфейсах:
• aria-label — когда видимой подписи нет, но смысл нужен
• aria-labelledby — когда подпись уже есть на странице
• aria-expanded — для аккордеонов, меню, раскрывающихся блоков
• aria-hidden — только для декоративных элементов, не для «спрятать проблему»

Частая ошибка — дублировать смысл. Например, и текст на кнопке, и aria-label говорят одно и то же: читатель слышит лишнее. Другая ошибка — вешать ARIA на неинтерактивный div и ждать, что он станет кнопкой. Без role, tabindex и нормальной обработки клавиш это всё ещё плохой паттерн. И ещё: если элемент видим и понятен, дополнительная метка ему обычно не нужна.

Проверяйте ARIA так: уберите мышь, пройдите интерфейс с клавиатуры и включите скринридер хотя бы на ключевых сценариях. Если после этого название элемента, его роль и состояние читаются ясно — метка работает. Если нет, проблема не в ARIA, а в модели компонента.