Клавиатурная навигация ломается в мелочах: 7 проверок, которые спасают интерфейс

Клавиатурная навигация ломается в мелочах: 7 проверок, которые спасают интерфейс

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

Проверьте базу:
— порядок фокуса логичен и совпадает с визуальным;
— у кликабельных элементов есть видимый focus state;
— скрытые блоки не попадают в таб-цепочку;
— модалки и меню удерживают фокус внутри себя;
— закрытие по Esc работает и возвращает фокус туда, где он был.

Частая ошибка — делать интерактивным div без роли, tabindex и клавиатурного сценария. Такой элемент может выглядеть как кнопка, но с клавиатуры им невозможно пользоваться. Ещё одна ловушка — убрать outline «для красоты» и не дать замену: тогда человек просто теряет ориентир.

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

Клавиатурная доступность — не бонус, а базовая проверка качества: чем раньше её ловить, тем меньше переделок в верстке и JS.