<b>ARIA-метки спасают интерфейс, но одна лишняя подпись ломает чтение для скринридера</b>

<b>ARIA-метки спасают интерфейс, но одна лишняя подпись ломает чтение для скринридера</b>

ARIA нужна там, где обычного текста и семантики недостаточно: у иконок, сложных кнопок, вкладок, переключателей, меню. Если элемент уже понятен из HTML, не дублируйте его через aria-label — скринридер может озвучить одно и то же дважды.

Главные ошибки:
— aria-label без видимого текста у кнопки, которая и так содержит название;
— одинаковые aria-label у нескольких элементов в списке;
— aria-hidden="true" на интерактивной части;
— aria-describedby для длинных простыней вместо короткой подсказки.

Проверяйте логику озвучки, а не только внешний вид: tab, enter, space, чтение списка, состояние selected/expanded/pressed. Если метка меняет смысл элемента, она должна быть короткой, точной и стабильной. Если не уверены — лучше усилить HTML-семантику, чем лечить разметку ARIA.

Хорошее правило: сначала делаем понятный текст и правильный тег, потом добавляем ARIA только для уточнения.

—
Рядом по жанру: @wp_accessibility_lab_ww