WCAG 3.2.3 Единообразная навигация

Критерий успеха 3.2.3 помогает людям, которые ориентируются по памяти и привычке: пользователям программ экранного доступа (скринридеров), которые слушают меню по порядку, людям с экранной лупой, которые видят только часть страницы, и людям с когнитивными нарушениями. Если «Корзина» на одной странице — третья ссылка, а на другой — шестая, им каждый раз приходится искать заново. Это уровень AA, в EN 301 549 он входит как пункт 9.3.2.3. Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

Навигационные механизмы, которые повторяются на нескольких веб-страницах в пределах набора веб-страниц, должны каждый раз появляться в том же относительном порядке, если изменение не инициировал сам пользователь.

• Набор веб-страниц — это совокупность страниц с общим назначением, созданных одним автором или организацией; обычно это один магазин. Разные языковые версии считаются разными наборами.
• «Тот же относительный порядок» допускает добавление или удаление пунктов. Раскрывающееся подменю или дополнительная ссылка на некоторых страницах допустимы, если остальные пункты сохраняют порядок.
• Единственное исключение — изменение, инициированное пользователем, например выбранный им персональный порядок меню.

Типичные ошибки в интернет-магазине

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

Как проверить

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

Вручную: выберите пять-шесть типов страниц — главную, категорию, товар, корзину, оформление заказа, блог, информационную страницу. На каждой запишите порядок главного меню, иконок в шапке, хлебных крошек и ссылок в подвале или прочитайте их клавишей Tab. Сравните списки. Сделайте это при ширине десктопа и ещё раз при ширине телефона, поскольку каждый макет сравнивается сам с собой.

Как исправить

• Собирайте шапку и подвал из одного общего компонента или секции темы, а не копируйте их в шаблоны.
• Когда странице нужно меньше пунктов (как при оформлении заказа), убирайте пункты, но не переставляйте остальные.
• Держите иконки шапки (поиск, аккаунт, корзина) в одной фиксированной последовательности в коде, а не только визуально.
• Перед публикацией сверяйте лендинги из конструктора страниц с основной темой.

Связанные критерии

• 3.2.4 Единообразная идентификация — одинаковые функции называются одинаково.
• 3.2.6 Единообразная помощь — ссылки на помощь остаются в том же порядке.
• 2.4.1 Пропуск блоков — способ пропустить повторяющуюся навигацию.

Частые вопросы

Должно ли меню выглядеть одинаково на каждой странице?

Нет. Повторяющиеся пункты должны сохранять тот же относительный порядок. Пункты можно добавлять или убирать, например раскрывать подменю на странице категории, если остальные пункты остаются в том же порядке.

Считаются ли языковые версии сайта одним набором страниц?

Нет. WCAG рассматривает разные языковые версии как разные наборы веб-страниц, поэтому английское и немецкое меню сравниваются отдельно.

Может ли автоматическая проверка проверить единообразную навигацию?

Надёжно — нет. Для этого нужно сравнить навигацию на многих страницах, поэтому её проверяют вручную.