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

<b>Клавиатура должна работать без сюрпризов: 5 проверок для любого интерфейса</b>

<b>Клавиатура должна работать без сюрпризов: 5 проверок для любого интерфейса</b>

Если элемент можно нажать мышью, но нельзя дойти до него Tab’ом — это уже поломка сценария. Пользователь должен видеть, где фокус, понимать порядок перехода и управлять всем без лишних обходных путей.

Проверьте базу:
— Tab и Shift+Tab проходят по интерактивным элементам в логичном порядке
— фокус не пропадает в модалках, выпадающих списках и сайдбарах
— у активного элемента есть заметный индикатор фокуса, а не только hover
— Esc закрывает то, что открыто, а стрелки работают там, где это ожидаемо
— Enter и Space запускают действие так же, как клик

Частая ошибка — делать интерактивным только внешний вид. Див с onclick, кастомная кнопка без роли, скрытый input без связки с label: с мышью это выглядит нормально, с клавиатуры ломается. Нативные элементы почти всегда безопаснее, чем самодельная имитация.

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

Если сценарий нельзя пройти вслепую по клавиатуре, его не стоит считать доступным. Начинайте тест с Tab, потом проверяйте Esc, стрелки и возврат фокуса — это быстро находит половину проблем.
Этот пост опубликован в Telegram-канале Доступность веб-интерфейсов. Подписаться можно по ссылке: @accessibility_in_design_ww.
tech

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

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

start

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

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

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