ARIA-метка не спасёт интерфейс, если вы размечаете всё подряд

ARIA-метка не спасёт интерфейс, если вы размечаете всё подряд

ARIA нужна не для украшения, а когда обычного HTML мало: для кнопок без текста, сложных виджетов, состояния «свернуто/развернуто», ошибок формы. Если элемент уже понятен нативно — button, input, label — лишняя ARIA чаще вредит: экранный диктор может получить дубли, лишние роли и странный порядок чтения.

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

Проверьте типовые ошибки:
— aria-label повторяет видимый текст и создаёт дубль;
— role="button" стоит на вместо настоящей кнопки;
— aria-expanded есть, а связанный блок не объявлен;
— aria-invalid включают без понятного сообщения об ошибке.

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