<b>Клавиатура должна работать без сюрпризов: 5 проверок для любого интерфейса</b>
Если элемент можно нажать мышью, но нельзя дойти до него Tab’ом — это уже поломка сценария. Пользователь должен видеть, где фокус, понимать порядок перехода и управлять всем без лишних обходных путей.
Проверьте базу:
— Tab и Shift+Tab проходят по интерактивным элементам в логичном порядке
— фокус не пропадает в модалках, выпадающих списках и сайдбарах
— у активного элемента есть заметный индикатор фокуса, а не только hover
— Esc закрывает то, что открыто, а стрелки работают там, где это ожидаемо
— Enter и Space запускают действие так же, как клик
Частая ошибка — делать интерактивным только внешний вид. Див с onclick, кастомная кнопка без роли, скрытый input без связки с label: с мышью это выглядит нормально, с клавиатуры ломается. Нативные элементы почти всегда безопаснее, чем самодельная имитация.
Отдельно проверьте ловушки: не заставляйте пользователя проходить десятки лишних табов, не прячьте фокус CSS-ом и не оставляйте его за пределами открытого окна. Если модальное окно открыто, фокус должен жить внутри него, а после закрытия возвращаться туда, откуда пришёл.
Если сценарий нельзя пройти вслепую по клавиатуре, его не стоит считать доступным. Начинайте тест с Tab, потом проверяйте Esc, стрелки и возврат фокуса — это быстро находит половину проблем.
Доступность веб-интерфейсов
@accessibility_in_design_ww
<b>Клавиатура должна работать без сюрпризов: 5 проверок для любого интерфейса</b>
Этот пост опубликован в Telegram-канале Доступность веб-интерфейсов. Подписаться можно по ссылке: @accessibility_in_design_ww.