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 вважає різні мовні версії різними наборами вебсторінок, тож англійське й німецьке меню порівнюють окремо.

Чи може автоматичний сканер перевірити узгоджену навігацію?

Не надійно. Для цього треба порівняти навігацію на багатьох сторінках, тож це перевіряють вручну.