Клавиатурная навигация ломается не в коде, а в 5 мелочах разметки

Клавиатурная навигация ломается не в коде, а в 5 мелочах разметки

Клавиатура — главный тест доступности: если до кнопки нельзя дойти Tab’ом, сайт уже теряет часть аудитории. Проверяйте не только ссылки, но и меню, формы, модальные окна, выпадающие списки, табы и кастомные кнопки.

— Порядок фокуса должен совпадать с логикой страницы: от шапки к контенту, затем к футеру.
— У каждого интерактивного элемента виден фокус, а не только hover.
— Не прячьте важное за div без role и tabindex: элемент должен быть управляем с клавиатуры.
— Для модалок нужен ловушка фокуса, а при закрытии — возврат на исходный элемент.

Отдельно проверьте клавишу Esc, Enter и Space: они должны работать там, где пользователь ожидает действие. Если меню раскрывается, оно должно закрываться без мыши; если есть слайдер, у него должны быть понятные кнопки и пауза. Не забывайте про skip-link в начало контента — он экономит десятки нажатий.

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