Клавиатурная навигация ломается не из-за кнопок, а из-за логики фокуса

Клавиатурная навигация ломается не из-за кнопок, а из-за логики фокуса

Если пользователь не может пройти интерфейс Tab’ом, доступность уже просела. Проверьте базу: интерактивные элементы должны быть в порядке чтения, а не в порядке «как удобно сверстали». Ссылки — для перехода, кнопки — для действий, и никакого притворства div’ами без роли.

Фокус должен быть видимым всегда. Убирать outline без замены — типовая ошибка: человек теряет место в интерфейсе. Хороший фокус заметен на светлой и тёмной подложке, не сливается с рамками и не прячется за анимациями.

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

Проверьте ещё три вещи: Enter и Space должны работать предсказуемо; Tab не должен застревать на скрытых элементах; порядок фокуса не должен прыгать после изменений в DOM. Если компонент нельзя использовать клавиатурой, его нельзя считать готовым.

Начните с Tab, Shift+Tab и Escape: если эти три клавиши ведут себя стабильно, интерфейс уже намного ближе к доступному.