3.2.3 Spójna nawigacja

Krótko

Jeśli ten sam blok nawigacji powtarza się na wielu stronach, jego elementy powinny być w tej samej kolejności, chyba że użytkownik sam zmienił ustawienia.

Problem w praktyce

Na stronie głównej menu ma kolejność: „O nas”, „Szkolenia”, „Audyty”, „Kontakt”. Na podstronie szkolenia kolejność nagle zmienia się na: „Kontakt”, „Audyty”, „O nas”, „Szkolenia”. Użytkownik, który zapamiętał pozycję linku, traci orientację.

To kryterium nie mówi, że menu musi być idealne projektowo. Ocenia spójność kolejności powtarzanych mechanizmów nawigacji.

Kogo to dotyczy

• Osób korzystających z klawiatury, które uczą się kolejności linków.
• Osób niewidomych, które nawigują po linkach i landmarkach.
• Osób z trudnościami poznawczymi, które polegają na powtarzalnym układzie.
• Osób korzystających z powiększenia ekranu, które widzą tylko część nawigacji naraz.

Dobry przykład

• Menu główne ma tę samą kolejność linków na stronie głównej, w bazie wiedzy i w formularzu kontaktowym.
• Stopka powtarza ten sam zestaw linków w tej samej kolejności.
• Panel klienta pokazuje nawigację sekcji w stałej kolejności na wszystkich podstronach panelu.
• Użytkownik może sam posortować elementy, a wtedy zmiana jest jego decyzją.

Zły przykład

• Menu główne ma inną kolejność na każdej podstronie.
• Link „Koszyk” raz jest pierwszy, raz ostatni, mimo że to ten sam blok nawigacji.
• Nawigacja boczna w panelu administracyjnym miesza kolejność bez związku z kontekstem.
• Stopka na części stron ma linki prawne w przypadkowej kolejności.

Przykłady kodu

<nav aria-label="Menu główne">
  <a href="/o-nas">O nas</a>
  <a href="/szkolenia">Szkolenia</a>
  <a href="/audyty">Audyty</a>
  <a href="/kontakt">Kontakt</a>
</nav>

<nav aria-label="Menu główne">
  <a href="/kontakt">Kontakt</a>
  <a href="/audyty">Audyty</a>
  <a href="/o-nas">O nas</a>
  <a href="/szkolenia">Szkolenia</a>
</nav>

<p>Kolejność skrótów możesz zmienić w ustawieniach profilu.</p>
<nav aria-label="Twoje skróty">
  <a href="/panel/faktury">Faktury</a>
  <a href="/panel/sprawy">Sprawy</a>
  <a href="/panel/profil">Profil</a>
</nav>

Przykład graficzny

Jak sprawdzić

1. Wybierz kilka podstron z tego samego serwisu albo procesu.
2. Porównaj powtarzane bloki nawigacji: menu główne, nawigację boczną, stopkę, linki procesowe.
3. Sprawdź, czy elementy w tym samym bloku występują w tej samej kolejności.
4. Ustal, czy ewentualna zmiana wynika z decyzji użytkownika, na przykład sortowania albo personalizacji.
5. Nie oceniaj przy tym samej jakości etykiet ani tego, czy menu ma najlepszy układ.

Co sprawdzi automat, a czego nie

Automat może wykryć

• różnice w strukturze powtarzanego menu,
• brak wybranych linków w części szablonów,
• kolejność linków w kilku stronach, jeśli ma komplet danych.

Automat nie oceni pewnie

• czy to na pewno ten sam mechanizm nawigacji,
• czy zmiana kolejności jest uzasadniona wyborem użytkownika,
• czy różnica wynika z procesu, wersji językowej albo innego kontekstu.

Typowe błędy

• Ręcznie skopiowane menu z inną kolejnością na części stron.
• Inna kolejność linków w wersji desktopowej i mobilnej bez powodu.
• Stopka generowana osobno dla kilku sekcji serwisu.
• Nawigacja boczna w panelu, która zmienia kolejność po wejściu do innego modułu.

Powiązane kryteria

• 2.4.1 Możliwość pominięcia bloków: gdy powtarzane bloki trzeba móc ominąć.
• 2.4.5 Wiele sposobów: gdy sprawdzasz, czy użytkownik ma różne drogi dotarcia do strony.
• 2.4.6 Nagłówki i etykiety: gdy oceniasz opisowość nazw i etykiet.

Źródła

• WCAG 2.2: 3.2.3 Consistent Navigation (otwiera się w nowym oknie)
• Understanding WCAG 3.2.3: Consistent Navigation (otwiera się w nowym oknie)
• How to Meet WCAG 3.2.3: Consistent Navigation (otwiera się w nowym oknie)
• G61: Presenting repeated components in the same relative order each time they appear (otwiera się w nowym oknie)