ARIA-метки спасают только там, где HTML не умеет говорить за интерфейс

ARIA-метки спасают только там, где HTML не умеет говорить за интерфейс

Если кнопка уже имеет понятный текст, aria-label чаще всего не нужен. Он полезен для иконок без подписи, полей с неочевидной функцией и элементов, где видимый текст слишком общий: «Подробнее», «Открыть», «Удалить». Тогда метка добавляет контекст для скринридера, но не меняет внешний вид.

Главная ошибка — дублировать одно и то же. Если на кнопке написано «Закрыть», а вы ставите aria-label="Закрыть", пользователь ассистивных технологий услышит лишний шум. Второй частый промах — подменять aria-label вместо нормального label, placeholder или текста рядом. ARIA не лечит плохую семантику, она только уточняет её.

Ещё правило: aria-label должен быть коротким и конкретным. Не пишите туда целые инструкции, статус элемента или маркетинговые фразы. Для сложных виджетов лучше использовать aria-labelledby, чтобы связать элемент с видимым заголовком, а не плодить скрытый текст вручную.

Проверка простая: уберите метку и спросите себя, станет ли элемент непонятным для человека, который не видит экран. Если ответ «нет», метка лишняя. Если «да» — добавляйте контекст, но сначала проверьте, нельзя ли решить задачу обычным текстом.