ARIA-метки не чинят интерфейс сами по себе: когда они реально помогают

ARIA-метки не чинят интерфейс сами по себе: когда они реально помогают

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

Самые частые ошибки:
• aria-label дублирует видимый текст и ломает ожидаемое озвучивание
• aria-hidden ставят на нужный для понимания контент
• role=button вешают на div, но забывают про Enter, Space и фокус
• aria-describedby привязывают к длинному тексту, который мешает навигации

Правило простое: метка должна уточнять смысл, а не заменять его. Для кнопки с иконкой можно добавить aria-label, для поля — связать label и input, для ошибки — выводить короткое пояснение рядом и через aria-describedby. Если элемент меняет состояние, указывайте его явно: expanded, pressed, selected. Без этого экранный диктор не передаст, что произошло.

Проверяйте интерфейс не глазами, а клавиатурой и скринридером: если без ARIA всё уже понятно, не усложняйте. Хорошая метка делает путь короче; плохая — создаёт вторую, невидимую версию интерфейса.