Кейсы
Работа с клиентом

Сайт тренера с клавиатуры: как пропустить повторяющееся меню

Елена сравнивает услуги, но каждый раз начинает с меню

В вымышленном примере Елена выбирает между персональной тренировкой и разбором техники по видео. Она пользуется клавиатурой. На каждой странице перед описанием услуги идут одинаковые ссылки: направления, команда, расписание, соцсети. Елена снова и снова нажимает Tab, хотя ей сейчас нужно сравнить содержание двух услуг, а не перечитать навигацию.
Её затруднение не в том, что ссылок слишком много вообще. Они полезны для перехода по сайту. Проблема — отсутствие короткого пути мимо одного и того же блока при повторном посещении страниц.
Один из способов решения — ссылка «К основному содержанию» в начале страницы. Елена может воспользоваться ею и перейти к описанию услуги, сохранив возможность обратиться к меню при необходимости. Это не кнопка возврата наверх и не ссылка на другую страницу.

Что именно должна делать такая ссылка

В технике G1 от W3C описан переход от первого интерактивного элемента страницы к началу основного содержания. Активация переносит туда фокус. Ссылка понятна по названию и видна постоянно либо когда получает клавиатурный фокус.
Это один из описанных способов обхода повторяемых блоков, а не требование использовать только эту технику. Здесь разбирается конкретная проверка сайта тренера с одним основным описанием услуги.

Страница прокрутилась, а клавиатура осталась в шапке

Разработчик добавляет якорь, и после Enter экран действительно показывает заголовок услуги. Но Елена нажимает Tab и снова попадает на очередную ссылку в верхнем меню. Визуальный переход выполнен, а повторный клавиатурный маршрут не устранён.
Такую ситуацию передают разработчику отдельно: «После ссылки видна услуга, но следующее действие остаётся в навигации». Проверять только положение прокрутки недостаточно. Нужно убедиться, что место дальнейшей работы клавиатурой тоже перешло к содержанию.

Короткий проверочный маршрут

На заново открытой тестовой странице переходят к первому доступному с клавиатуры элементу. Проверяют, появилась ли ссылка обхода меню и понятно ли, куда она ведёт. Активируют её и затем продолжают клавиатурный маршрут: повторяемая шапка уже не должна вставать перед тем содержанием, к которому выполнен переход.
Эту проверку повторяют на второй странице услуги. Работающий переход в одном шаблоне не доказывает, что во всех других сохранилась правильная цель ссылки. Если часть страниц устроена иначе, для них проверяют собственное начало основного материала.
Если после перехода текущий элемент вообще не выделяется, возникает отдельная задача — видимый клавиатурный фокус. Для Елены важны оба результата: короткий путь к услуге и понятное место следующего действия. Один не заменяет другой.
После исправления Елена может сравнивать описания без повторного обхода одинаковой навигации. Проверка не требует отправлять пробные заявки настоящему тренеру. Она также не подтверждает доступность всего сайта: поля записи, ошибки ввода и другие интерактивные элементы проверяют отдельно, когда доходят до них.