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

Клавиатура должна проходить интерфейс без ловушек, а не «иногда работать»

Клавиатура должна проходить интерфейс без ловушек, а не «иногда работать»

Проверьте базу: Tab должен двигать фокус по логичному порядку, Shift+Tab — возвращать назад, Enter и Space — запускать нужное действие. Для кнопок используйте button, а не кликабельный div: так поведение с клавиатуры будет предсказуемым без лишнего JavaScript.

Дальше ищите ловушки фокуса. Модальные окна, меню, боковые панели и выпадающие списки должны удерживать фокус внутри себя, пока открыты, и возвращать его на исходный элемент после закрытия. Если фокус «проваливается» в фон или пропадает, пользователь теряет контекст.

Отдельно проверьте видимость фокуса: outline нельзя бездумно убирать. Если дизайнер просит «сделать аккуратнее», замените стандартный контур на заметный кастомный, но не прячьте его. Контур должен быть виден на светлой и тёмной подложке, иначе навигация сломается для всех, кто не пользуется мышью.

И не забывайте про порядок DOM: визуальная перестановка блоков через CSS не должна ломать последовательность Tab. Лучший тест — пройти весь экран только клавиатурой: если где-то пришлось догадываться, интерфейс уже требует правки.
Этот пост опубликован в Telegram-канале Доступность веб-интерфейсов. Подписаться можно по ссылке: @accessibility_in_design_ww.
tech

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

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

start

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

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

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