Как спроектировать меню сайта с клавиатурной навигацией и заметным фокусом

5 минут чтения

Доступное меню сайта сохраняет естественный переход клавишей Tab, показывает заметный индикатор фокуса и позволяет открыть и закрыть подменю без мыши. Для обычной навигации используйте ссылки и кнопки с корректной семантикой, а не роли приложения. Перед публикацией проверьте все состояния меню только клавиатурой и экранным диктором.

Опорные решения для меню, доступного с клавиатуры

Для навигации по страницам используйте элемент nav, ссылки и списки; не задавайте роль menu обычному сайту.
Оставьте порядок клавиши Tab таким, каким он задан в документе, и не управляйте им с помощью положительных значений tabindex.
Подменю должно открываться кнопкой-переключателем, а его состояние - сообщаться через aria-expanded.
Не убирайте стандартную обводку фокуса, пока не заменили её заметным стилем.
Проверьте навигацию с клавиатуры и экранным диктором в реальном браузере.

Выберите семантическую модель меню под структуру сайта

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

Не используйте роли menu и menuitem только ради визуального сходства с меню приложения: они предполагают особое клавиатурное управление, которое придётся полноценно реализовать. Для простой навигации они усложняют взаимодействие без необходимости. При разработке сайта с доступной навигацией исходите прежде всего из назначения элементов, а не из их внешнего вида.

Задайте предсказуемый порядок перехода клавишей Tab

До реализации согласуйте структуру меню, порядок ссылок и поведение подменю. Для работы понадобятся:

доступ к HTML-шаблону или компоненту меню и его CSS;
описание пунктов верхнего уровня и вложенных разделов;
браузер с клавиатурой; для проверки озвучивания - экранный диктор;
возможность проверить меню на узком экране и на разных цветовых фонах.

Оставьте естественный порядок фокуса по документу: пользователь перемещается клавишей Tab вперёд и Shift+Tab назад. Не добавляйте в меню скрытые ссылки, которые неожиданно получают фокус, и не переназначайте порядок значениями tabindex больше нуля. Для создания сайта с клавиатурной навигацией важно, чтобы визуальный порядок и последовательность фокуса не расходились.

Настройте открытие и закрытие подменю без мыши

Разделите ссылку и переключатель.
Ссылка ведёт на страницу раздела, а кнопка рядом открывает подменю. Это позволяет пользователю перейти по адресу и отдельно управлять раскрытием.
Свяжите кнопку с подменю.
Задайте кнопке доступное имя, атрибут aria-expanded со значением, соответствующим текущему состоянию, и ссылку на подменю через aria-controls. Скрытое подменю должно быть недоступно для фокуса и экранного диктора.
Обработайте клавиши активации.
Кнопка должна работать клавишами Enter и Пробел по стандартному поведению HTML. Не требуйте наведения указателя для раскрытия или выбора пункта.
Добавьте понятное закрытие.
Повторное нажатие кнопки закрывает подменю. Если пользователь нажимает Escape, закройте его и верните фокус на кнопку, открывшую подменю.
Сохраните логичный переход между пунктами.
При открытом подменю клавиша Tab должна вести к его ссылкам в порядке документа, а затем - к следующему элементу страницы. При закрытии подменю его содержимое не должно оставаться в последовательности фокуса.

Быстрый режим

Соберите навигацию из списков, ссылок и кнопок.
Проверьте порядок перехода Tab и Shift+Tab.
Убедитесь, что кнопка раскрывает подменю, а Escape закрывает его и возвращает фокус.
Проверьте состояние меню с экранным диктором.

Сделайте индикатор фокуса заметным на любом фоне

Проверьте оформление фокуса на ссылках и кнопках, в том числе в раскрытом подменю. Используйте чек-лист:

При перемещении клавишей Tab виден конкретный элемент, который сейчас в фокусе.
Индикатор не обрезается краями контейнера и не перекрывается соседними элементами.
Контур различим на светлом и тёмном фоне, включая цветные кнопки и шапку сайта.
Состояние фокуса отличается от обычного, наведённого и активного состояния.
Стили фокуса работают на ссылках и кнопках, а не только на одном типе элементов.
Правило outline: none не скрывает фокус без равноценной визуальной замены.
При масштабировании и изменении размеров окна индикатор остаётся заметным.

Для реализации можно использовать :focus-visible, сохранив понятное оформление клавиатурного фокуса. Не полагайтесь только на изменение цвета текста: граница, подчёркивание или контур обычно дают более явный визуальный сигнал.

Проверьте состояния меню клавишами и экранным диктором

Проведите проверку в браузере без мыши, затем повторите основные сценарии с экранным диктором. Во время аудита доступности сайта WCAG оценивайте не только наличие фокуса, но и то, понятно ли пользователю назначение и состояние каждого элемента.

Клавиша Tab обходит пункты в ожидаемой последовательности, а Shift+Tab движется в обратном направлении.
Фокус не исчезает при открытии подменю и не перемещается самопроизвольно в несвязанный участок страницы.
Экранный диктор сообщает название кнопки и её состояние раскрытия или закрытия.
Скрытые ссылки подменю нельзя случайно активировать, пока оно закрыто.
Escape закрывает раскрытое подменю и возвращает фокус на его переключатель.
При выходе фокуса из меню поведение подменю остаётся последовательным и предсказуемым.
В мобильной версии кнопка меню доступна с клавиатуры и сообщает своё состояние.
Ссылки ведут на ожидаемые страницы, а кнопки выполняют только действие раскрытия или закрытия.

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

Исправьте типичные сбои клавиатурной навигации

Подменю открывается только при наведении. Добавьте отдельную кнопку-переключатель и обеспечьте её работу с клавиатуры.
Фокус скрывается после закрытия. При закрытии по Escape возвращайте его на кнопку, которая раскрыла подменю.
Пункты пропускаются или обходятся в неверном порядке. Уберите положительные значения tabindex и проверьте порядок элементов в HTML.
Стандартный контур убран ради дизайна. Верните его или задайте другой отчётливый индикатор, заметный на всех фонах.

Если меню сложное, выбирайте реализацию по сценарию. Для типового сайта оставьте обычные ссылки и кнопки; если нужно раскрывать вложенные разделы, добавьте кнопки-переключатели; для интерфейса приложения применяйте модель меню с отдельным управлением стрелками только при готовности реализовать и тестировать все её клавиатурные состояния.

Об авторе материала

Ирина Белова

Практические уточнения о фокусе и клавиатурном управлении

Нужно ли перемещаться по обычному меню стрелками?

Как правило, нет: для обычной навигации достаточно Tab и Shift+Tab. Управление стрелками характерно для специальных составных виджетов и требует соответствующей реализации.

Можно ли раскрывать подменю при наведении?

Наведению можно добавить визуальную реакцию, но оно не должно быть единственным способом открыть подменю. Предусмотрите доступную с клавиатуры кнопку-переключатель.

Зачем кнопке подменю атрибут aria-expanded?

Он сообщает вспомогательным технологиям, раскрыто ли подменю. Значение должно обновляться при каждом открытии и закрытии.

Что должно происходить при нажатии Escape?

Открытое подменю следует закрыть и вернуть фокус на его переключатель. Так пользователь понимает, где продолжить навигацию.

Допустимо ли убрать стандартную обводку фокуса?

Только если вместо неё задан другой заметный индикатор. Без визуальной замены клавиатурному пользователю трудно определить текущую позицию.

Достаточно ли проверить меню только клавишей Tab?

Нет. Проверьте также обратный переход Shift+Tab, открытие и закрытие подменю, Escape и озвучивание названий и состояний экранным диктором.

Post Views: 0