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

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

ARIA — это не замена семантическим тегам, а добавка к ним. Если кнопку можно сделать через button, не подменяйте её div с role="button" и длинной aria-label. Чем ближе разметка к нативной, тем меньше сюрпризов у скринридеров.

Используйте aria-label, когда видимого текста нет или он не отражает действие: иконка поиска, кнопка закрытия, удаление строки. Если текст есть, но он слишком общий, лучше aria-labelledby: пользователь услышит тот же смысл, что и видит. Для повторяющихся иконок делайте метку уникальной: “Удалить заказ”, а не просто “Удалить” 🔎

Проверяйте три вещи:
— метка короткая и конкретная;
— не дублирует видимый текст без причины;
— не описывает внешний вид вместо действия.

Частая ошибка — навешивать aria-label на всё подряд. Тогда скринридер начинает читать не то, что важно, а то, что разработчик решил “пояснить”. Если элемент уже понятен по тексту и роли, лишняя ARIA только мешает.

Сначала пишите понятную видимую подпись, потом добавляйте ARIA только там, где интерфейс без неё теряет смысл.