Доступность веб-интерфейсов

<b>ARIA-метки спасают интерфейс только тогда, когда их ставят точно, а не “для галочки”</b>

<b>ARIA-метки спасают интерфейс только тогда, когда их ставят точно, а не “для галочки”</b>

Основная ошибка — писать aria-label везде подряд. Если у кнопки уже есть видимый текст, метка часто лишняя: скринридер и так прочитает название. ARIA нужна там, где смысл не виден из интерфейса: иконка без подписи, поле поиска, кнопка с неочевидным действием.

Проверяйте базовые правила:
• aria-label должен коротко и однозначно описывать действие
• aria-labelledby лучше использовать, если рядом уже есть видимый заголовок
• не дублируйте один и тот же текст в label и в aria-label
• не маскируйте плохую семантику ARIA-атрибутами: сначала правильный элемент, потом метка

Частая ловушка — aria-hidden="true" на полезных иконках и декоративных элементах в одном блоке. Если скрыли слишком много, скринридер теряет контекст. Если не скрыли ничего, он начинает читать мусор: лишние символы, повторяющиеся названия, технические подписи.

<b>Правило простое: ARIA не заменяет понятный HTML, а дополняет его. Сначала проверьте текст, теги и фокус, и только потом добавляйте метку там, где без неё реально теряется смысл.</b>
Этот пост опубликован в Telegram-канале Доступность веб-интерфейсов. Подписаться можно по ссылке: @accessibility_in_design_ww.
tech

Свежие посты в категории «Tech Infrastructure»

Все каналы категории →

start

Готовы запустить рекламу через сеть public.tg?

Новый оффер, продукт, GEO, кейс, событие или партнёрский запуск — соберём маршрут под задачу и отдадим медиаплан.

Telegram для медиаплана: @dumay. Быстрый тест: $20 за канал, $1000 за пакет по сети.