ARIA — набор специальных атрибутов, которые помогают скринридерам и другим вспомогательным технологиям правильнее понимать назначение и состояние элементов страницы, особенно тех, для которых в HTML нет подходящего семантического тега по умолчанию.
Есть важное правило, о котором часто забывают: если для задачи существует подходящий нативный HTML-элемент, лучше использовать его, а не имитировать поведение через div с ARIA-атрибутами. Кнопка button уже доступна с клавиатуры и озвучивается скринридером как кнопка без единого дополнительного атрибута.
ARIA действительно нужна там, где нативных элементов не хватает — например, для кастомных компонентов вроде вкладок, аккордеонов или модальных окон, у которых нет прямого эквивалента среди стандартных тегов HTML, а поведение при этом должно быть понятно вспомогательным технологиям.
Атрибут aria-label задаёт доступное имя элементу, когда видимого текста недостаточно или его нет вовсе — например, для кнопки с одной только иконкой без подписи. Aria-hidden, наоборот, скрывает decorативный элемент от скринридера, оставляя его видимым визуально для обычных пользователей.
Неправильно применённая ARIA способна навредить больше, чем её полное отсутствие — например, aria-hidden на важном интерактивном элементе сделает его невидимым для скринридера, хотя визуально он останется на месте, что создаёт скрытую и малозаметную проблему доступности.
Простое правило для проверки — после добавления ARIA-атрибутов стоит хотя бы бегло протестировать страницу со скринридером, если такая возможность есть, чтобы убедиться, что атрибуты действительно улучшили восприятие, а не создали новую путаницу.
Официальное руководство по практикам применения ARIA с примерами конкретных компонентов доступно в ARIA Authoring Practices Guide от W3C.
