Что такое ARIA — и почему на страницах с ней больше ошибок

Смотри, какая странная цифра. WebAIM каждый год проверяет миллион главных страниц сайтов. В отчёте 2026 года ARIA нашлась на 82,7% страниц. И на страницах с ARIA в среднем 59,1 ошибки доступности. На страницах без неё — 42.

Инструмент, который придумали ради доступности, в среднем ходит рядом с лишними барьерами. WebAIM честно оговаривается: страницы с ARIA ещё и сложнее, так что вина не обязательно на ней. Но первое правило ARIA от W3C звучит в том же духе: не используй ARIA, если можно обойтись обычным HTML.

Разберёмся, что это за штука и почему с ней так легко промахнуться.

Что такое ARIA простыми словами

ARIA — это набор атрибутов, которые рассказывают про элемент программам для незрячих. Расшифровывается как Accessible Rich Internet Applications. Такие программы называют скринридерами: они читают страницу вслух.

Атрибуты бывают трёх видов:

• роль — чем элемент притворяется: role="button", role="dialog";
• состояние — что с ним сейчас: aria-expanded="true", меню открыто;
• свойство — подпись или связь: aria-label="Закрыть".

W3C сравнивает ARIA с CSS, только для вспомогательных технологий. CSS решает, как элемент выглядит. ARIA решает, как он звучит.

Как это работает: меняет звук, а не поведение

Браузер берёт DOM — дерево твоей страницы — и строит рядом второе дерево: дерево доступности. Скринридер читает именно его. ARIA переписывает записи в этом дереве. И больше не делает ничего.

Вот главная ловушка. Возьмём такой код:

<div role="button">Сохранить</div>

Скринридер скажет «Сохранить, кнопка». Человек нажмёт Tab, чтобы до неё добраться, — а фокус проскочит мимо. Нажмёт пробел — ничего. Роль пообещала кнопку, но клавиатуру к ней никто не подключил.

Настоящий <button> умеет всё это сам. С ARIA-ролью эту работу приходится писать руками. Забыл — получил элемент, который звучит как кнопка и не работает как кнопка.

Четыре правила ARIA от W3C

Документ W3C «Using ARIA» сводит всё к четырём правилам. Их стоит помнить наизусть:

1. Есть родной HTML-элемент — бери его. <button> вместо div с ролью, <nav> вместо div role="navigation".
2. Не меняй встроенный смысл без нужды. Не превращай заголовок во вкладку через role.
3. Всё интерактивное с ARIA должно работать с клавиатуры. Для роли кнопки — Enter и пробел.
4. Не прячь от скринридера то, на чём может стоять фокус. aria-hidden="true" на кнопке — и человек с клавиатурой окажется «нигде».

А руководство W3C по паттернам ARIA начинается с фразы: «Лучше без ARIA, чем с плохой ARIA». Неверная роль не просто бесполезна. Она рассказывает человеку неправду о странице.

Где ARIA правда нужна

Родной HTML закрывает не всё. Вот места, где без ARIA не обойтись:

• aria-label — подпись для кнопки без текста: крестик, лупа, три точки.
• aria-expanded — открыто ли меню или раскрывающийся блок.
• aria-current="page" — какой пункт навигации сейчас активен.
• role="status" — объявить сообщение, которое появилось без перезагрузки: «Сохранено», «Скопировано».
• aria-hidden="true" — спрятать от скринридера декоративную иконку, чтобы он не читал её название.

Заметь: всё это дополняет родные элементы, а не заменяет их.

Почему это касается тебя, если пишешь код с ИИ

В том же отчёте WebAIM ARIA-атрибутов в среднем 133 на страницу. Это в шесть раз больше, чем в 2019 году. Среди причин роста авторы прямо называют сторонние библиотеки и написание кода с помощью ИИ — вайб-кодинг.

Модели охотно навешивают role и aria-label «на всякий случай». Пример из отчёта: role="menu" стоит на 5,7% страниц. И 22% таких меню создают барьеры. Роль menu обещает управление стрелками, а стрелки никто не сделал. Причём обычной навигации сайта эта роль вообще не нужна — W3C строит её на кнопках с aria-expanded.

Поэтому при чтении сгенерированного кода задай каждому ARIA-атрибуту три вопроса:

1. Есть ли родной тег, который делает то же самое? Если да — замени, атрибут удали.
2. Совпадает ли звук с картинкой? На кнопке написано «Отмена», а aria-label="Закрыть окно" — зрячий пользователь скринридера услышит одно, а увидит другое.
3. Работает ли это без мыши? Пройди Tab'ом и нажми Enter и пробел.

А в запрос к модели добавь одну строку: «используй семантический HTML; ARIA — только там, где родного элемента нет, и объясни каждый атрибут». Лишняя ARIA обычно исчезает сама.

Нужно ли что-то особенное для ARIA в React?

Нет. В JSX атрибуты aria-* пишутся так же, через дефис: aria-label, aria-expanded. Правила те же — сначала родные теги. Что такое React и зачем он нужен — в отдельной статье.

Чем aria-hidden отличается от display: none?

display: none прячет элемент от всех: и с экрана, и от скринридера. aria-hidden="true" прячет только от скринридера — на экране элемент остаётся. Все способы спрятать разобраны в сравнении display: none и visibility: hidden.

Как проверить ARIA на своём сайте?

Включи встроенный скринридер: VoiceOver на Mac — Cmd+F5, Экранный диктор в Windows — Ctrl+Win+Enter. Пройди страницу Tab'ом и послушай. Ещё быстрее — панель Accessibility в инструментах разработчика Chrome: там видно, какую роль и подпись получил каждый элемент.