Клавиатурная навигация: почему Tab ломает половину WordPress-сайтов

Клавиатурная навигация: почему Tab ломает половину WordPress-сайтов

Многие администраторы проверяют сайт только мышью, забывая о пользователях с нарушениями двигательных функций и зрении. Если страница не работает с клавиатуры, она закрыта для значительной части аудитории. В WordPress проблема усугубляется готовыми темами и плагинами, где фокус часто сбрасывается или прячется.

При аудите клавиатурной навигации проверяйте четыре базовых правила:
— Видимый фокус. При нажатии Tab активный элемент должен чётко выделяться обводкой или контрастным фоном. Никаких outline: none без замены.
— Логичный порядок. Переход должен идти сверху вниз и слева направо, без прыжков между блоками. Порядок в DOM должен совпадать с визуальным.
— Клавиатурные ловушки. Модальные окна, слайдеры и меню должны закрываться по Escape, а фокус не должен застревать внутри невидимого слоя.
— Интерактивные элементы. Кнопки, ссылки и формы должны реагировать на Enter и Space. Элементы div с ролью кнопки часто игнорируют клавиши.

Начните проверку с отключения мыши и попробуйте пройти основной сценарий: открыть меню, найти товар, оформить заявку. Если на этом пути возникает хотя бы один сбой фокуса, у сайта есть критическая ошибка доступности.