<b>ARIA-метки не чинят интерфейс, если у кнопки нет имени</b>
ARIA стоит добавлять не «для галочки», а когда нативной разметки уже не хватает. Иначе вместо доступности получаются пустые роли и загадочные элементы в скринридере.
Частые правила:
• у кнопки должно быть понятное доступное имя: текст внутри, aria-label или aria-labelledby
• aria-label не должен дублировать видимый текст без причины
• aria-hidden="true" скрывает элемент только если он не нужен для понимания
• не вешайте ARIA на то, что можно сделать HTML-тегом: button, a, input, label
Типовые ошибки:
• иконка-кнопка без имени — скринридер читает «button»
• ссылка, замаскированная под div с role="link" и кучей обработчиков
• aria-label, который говорит одно, а визуально на экране другое
• aria-labelledby, указывающий на невидимый или пустой текст
Проверяйте интерфейс с клавиатуры и экранным диктором: если без ARIA элемент уже понятен, не усложняйте. Если непонятен — сначала исправьте HTML и текст, потом добавляйте ARIA точечно.
Доступность веб-интерфейсов
@accessibility_in_design_ww
<b>ARIA-метки не чинят интерфейс, если у кнопки нет имени</b>
Этот пост опубликован в Telegram-канале Доступность веб-интерфейсов. Подписаться можно по ссылке: @accessibility_in_design_ww.