Представим посетителя, который открывает сайт студии и хочет перейти с главной страницы к услугам, а затем к контактам, не касаясь мыши. Понятно ли ему, где он находится? Открывается ли нужный раздел? Такой короткий маршрут хорошо показывает, продумана ли навигация как рабочий инструмент, а не только как композиция в макете. В пояснении W3C WAI о клавиатурном управлении основной принцип прост: функции интерфейса должны быть доступны с клавиатуры.
Начните с понятной структуры
Для обычной навигации используйте ссылки, объединённые в списки внутри элемента nav. Эту основу описывает руководство WAI по структуре меню. Ссылка ведёт на страницу, а кнопка открывает или закрывает подменю. Если у пункта «Услуги» есть собственная страница и вложенные разделы, разделите эти действия. Так поведение компонента проще объяснить ещё до разработки: название ведёт к обзору, соседняя кнопка показывает дополнительные варианты.
Продумайте последовательность переходов
Нажатие Tab должно вести по понятному маршруту, а Shift + Tab позволять вернуться назад. WAI объясняет порядок фокуса через сохранение смысла и возможности управления. Для проекта полезно нарисовать маршрут прямо на макете: логотип, основные пункты, кнопка обращения, следующий элемент страницы. Если фокус неожиданно перескакивает между удалёнными областями, проверьте порядок элементов в коде, а не только их визуальное расположение. Согласуйте ожидаемую последовательность до добавления анимации.
Сделайте фокус заметным
Фокус показывает, какой элемент сейчас получит действие с клавиатуры. Согласно пояснению Focus Visible, его индикатор должен оставаться видимым, пока показывается фокус. Не убирайте стандартный контур без заметной замены. В руководстве по оформлению меню фокус и текущая страница рассматриваются отдельно: это разные состояния. Подготовьте их в макете одновременно. Например, подчёркивание может обозначать открытый раздел, а отчётливая рамка показывать текущую позицию клавиатуры.
Подменю должно открываться намеренно
Не оставляйте наведение мыши единственным способом открыть вложенные ссылки. WAI рекомендует предусмотреть управление подменю и передавать его открытое или закрытое состояние через aria-expanded. Для обычной навигации не нужно автоматически добавлять роль menu. В примере disclosure-навигации WAI кнопки работают через Enter и пробел, а Escape закрывает подменю и возвращает фокус на его кнопку. Это конкретный шаблон поведения, который следует проверить в собственной реализации, а не просто скопировать как готовое решение.
Пройдите один реальный маршрут
- Откройте главную страницу и отложите мышь. Найдите первый пункт меню клавишей Tab.
- Перейдите к «Услугам», откройте подменю и выберите одну страницу. Повторите путь в обратном направлении.
- Закройте подменю, снова откройте его и проверьте, где появляется фокус после каждого действия.
- Повторите маршрут в узком окне и с увеличением страницы. Оставьте видимыми существующие уведомления и закреплённые панели.
Отдельно проверьте перекрытия: WAI предостерегает от полного скрытия элемента с фокусом содержимым страницы. Кроме того, пользователь должен иметь возможность выйти из компонента с помощью клавиатуры. Обычное меню не должно бесконечно удерживать его внутри.
Фиксируйте поведение, а не общее впечатление
Полезная запись для исправления содержит адрес страницы, браузер, ширину окна, последовательность клавиш и ожидаемый результат. Вместо «меню неудобное» напишите: «После закрытия подменю видимый фокус исчезает, следующее нажатие Tab начинает маршрут заново». Такая конкретика упрощает повторную проверку. Этот короткий сценарий помогает найти проблемы навигации, но не заменяет полной оценки доступности и сам по себе не подтверждает соответствие WCAG.