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

ARIA-метки: когда они помогают скринридеру, а когда ломают интерфейс

ARIA-метка задаёт доступное имя элемента: то, что озвучит скринридер. Правило простое: сначала нормальный HTML, потом ARIA. Кнопке с видимым текстом «Отправить» метка обычно не нужна.

Где уместно:
— иконка-кнопка без текста: aria-label="Закрыть";
— поле с подписью рядом: aria-labelledby на id подписи;
— группа контролов, где нужен контекст: «Способ доставки».

Частые ошибки:
— метка не совпадает с видимым текстом;
— aria-label перетирает полезный текст внутри кнопки;
— ссылка «Подробнее» не объясняет, о чём подробнее;
— ARIA добавлена на декоративный блок без пользы.

Проверка: пройти интерфейс клавиатурой и послушать имена элементов в скринридере. Без зрения должно быть понятно, что это за элемент и что произойдёт после активации.

ARIA не чинит плохую разметку. Хорошая метка короткая, точная и не дублирует очевидное: «Меню», «Удалить файл», «Открыть настройки».
Этот пост опубликован в Telegram-канале Доступность веб-интерфейсов. Подписаться можно по ссылке: @accessibility_in_design_ww.
tech

Свежие посты в категории «Сервисы и инфраструктура»

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

start

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

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

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