<b>ARIA-метки спасают интерфейс только тогда, когда их ставят точно, а не “для галочки”</b>
Основная ошибка — писать aria-label везде подряд. Если у кнопки уже есть видимый текст, метка часто лишняя: скринридер и так прочитает название. ARIA нужна там, где смысл не виден из интерфейса: иконка без подписи, поле поиска, кнопка с неочевидным действием.
Проверяйте базовые правила:
• aria-label должен коротко и однозначно описывать действие
• aria-labelledby лучше использовать, если рядом уже есть видимый заголовок
• не дублируйте один и тот же текст в label и в aria-label
• не маскируйте плохую семантику ARIA-атрибутами: сначала правильный элемент, потом метка
Частая ловушка — aria-hidden="true" на полезных иконках и декоративных элементах в одном блоке. Если скрыли слишком много, скринридер теряет контекст. Если не скрыли ничего, он начинает читать мусор: лишние символы, повторяющиеся названия, технические подписи.
<b>Правило простое: ARIA не заменяет понятный HTML, а дополняет его. Сначала проверьте текст, теги и фокус, и только потом добавляйте метку там, где без неё реально теряется смысл.</b>
Доступность веб-интерфейсов
@accessibility_in_design_ww
<b>ARIA-метки спасают интерфейс только тогда, когда их ставят точно, а не “для галочки”</b>
Этот пост опубликован в Telegram-канале Доступность веб-интерфейсов. Подписаться можно по ссылке: @accessibility_in_design_ww.