WCAG 3.2.3: Spójna nawigacja

WCAG 3.2.3: Spójna nawigacja (Consistent Navigation)

Kryterium sukcesu WCAG 3.2.3 Spójna nawigacja (Consistent Navigation) na poziomie AA dotyczy przewidywalności i konsekwencji w układzie nawigacji na stronie internetowej. Jego głównym celem jest zapewnienie, że powtarzające się elementy nawigacji, takie jak menu główne, menu pomocnicze czy stopka, zawsze występują w tej samej względnej kolejności na wszystkich stronach witryny. Wyjątkiem jest sytuacja, gdy zmiana kolejności jest inicjowana przez samego użytkownika.

To kryterium ma kluczowe znaczenie dla orientacji użytkowników w treściach serwisu i pomaga im budować mentalny model struktury strony, co znacznie ułatwia poruszanie się po niej.

Dlaczego to jest ważne?

Spójna nawigacja jest fundamentem dostępności i użyteczności strony internetowej. Jej brak może prowadzić do frustracji i dezorientacji u wielu grup użytkowników. Oto dlaczego to kryterium jest tak ważne:

• Zmniejszenie obciążenia poznawczego: Użytkownicy nie muszą za każdym razem na nowo uczyć się, gdzie znajdują się kluczowe elementy nawigacyjne. Powtarzalność zmniejsza wysiłek mentalny potrzebny do odnalezienia informacji.
• Przewidywalność dla wszystkich: Strona staje się bardziej przewidywalna, co jest szczególnie korzystne dla osób z dysfunkcjami poznawczymi, dysleksją, zaburzeniami pamięci krótkotrwałej czy lękami. Znają one miejsce kluczowych elementów, co zwiększa ich poczucie kontroli i komfortu.
• Użytkownicy czytników ekranu: Osoby niewidome i niedowidzące, korzystające z czytników ekranu, w dużej mierze polegają na spójnej strukturze dokumentu. Jeśli kolejność linków nawigacyjnych zmienia się z każdą stroną, nawigacja staje się chaotyczna i niezwykle trudna. Czytniki ekranu odczytują elementy w kolejności, w jakiej występują w kodzie źródłowym, a ich niekonsekwencja utrudnia szybkie znajdowanie pożądanych sekcji.
• Użytkownicy z ograniczoną sprawnością ruchową: Osoby, które nawigują za pomocą klawiatury lub innych urządzeń wspomagających, opierają się na wizualnej i programowej spójności. Nieoczekiwane zmiany w kolejności elementów mogą prowadzić do dodatkowych naciśnięć klawiszy i wydłużenia czasu interakcji.
• Poprawa ogólnej użyteczności: Nawet dla użytkowników bez zdiagnozowanych niepełnosprawności, spójna nawigacja po prostu czyni stronę łatwiejszą i przyjemniejszą w obsłudze.

Wymagania kryterium sukcesu

Kryterium sukcesu 3.2.3 Spójna nawigacja (Consistent Navigation) na poziomie AA wymaga, aby:

• Powtarzające się elementy nawigacji: Wszystkie komponenty, które pełnią funkcje nawigacyjne i pojawiają się na więcej niż jednej stronie internetowej (np. menu główne, linki w stopce, nawigacja poboczna, okruszki chleba – breadcrumbs, wyszukiwarki, jeśli są spójnym elementem nawigacji), muszą spełniać ten wymóg.
• Występują w tej samej względnej kolejności: Oznacza to, że ich pozycja względem siebie w kodzie HTML (i wizualnie, choć kryterium skupia się na programistycznej kolejności) musi pozostać niezmienna. Jeśli element A pojawia się przed elementem B na jednej stronie, to musi pojawiać się przed B również na każdej innej stronie, na której obydwa elementy występują.
• Za każdym razem: Konsekwencja musi być zachowana niezależnie od przeglądanej podstrony w ramach tej samej witryny.
• Chyba że zmiana jest inicjowana przez użytkownika: Jest to kluczowy wyjątek. Jeśli użytkownik ma możliwość personalizacji lub zmiany kolejności elementów nawigacyjnych (np. poprzez ustawienia konta, przeciąganie i upuszczanie elementów), to taka zmiana jest dopuszczalna i nie narusza tego kryterium.

Praktyczne wskazówki dotyczące zgodności

Aby spełnić wymagania kryterium 3.2.3, należy wdrożyć następujące praktyki:

• Projektuj globalną nawigację raz: Upewnij się, że główna nawigacja (nagłówek, stopka, menu boczne) jest zdefiniowana w jednym miejscu w kodzie lub szablonie i jest konsekwentnie używana na wszystkich stronach.
• Unikaj dynamicznych zmian kolejności: Nie zmieniaj programowej kolejności linków w menu w zależności od kontekstu strony, aktywności użytkownika (chyba że to użytkownik zainicjował zmianę) czy innych zmiennych.
• Utrzymuj spójność w kodzie: Nawet jeśli CSS zmienia wizualną prezentację elementów (np. kolejność wyświetlania za pomocą flex-direction: reverse), to programowa (DOM) kolejność powinna pozostać spójna. Czytniki ekranu i urządzenia wspomagające zazwyczaj podążają za kolejnością w DOM.
• Sprawdź wszystkie elementy nawigacyjne: Dotyczy to nie tylko głównego menu, ale także linków w stopce, okruszków chleba, linków „powrót do góry”, a nawet elementów formularza wyszukiwania, jeśli są traktowane jako stały element nawigacji.
• Dokładne testowanie: Przetestuj swoją witrynę, przechodząc przez różne strony i sprawdzając, czy kolejność elementów nawigacji jest zawsze taka sama. Skorzystaj z narzędzi deweloperskich przeglądarki, aby sprawdzić kolejność elementów w DOM.

Przykłady implementacji

Poprawna implementacja

Poniżej przedstawiono przykład poprawnej implementacji spójnej nawigacji. Kolejność linków w menu pozostaje taka sama na każdej podstronie.

<!-- Główna nawigacja na Stronie Głównej -->
<nav aria-label="Główna nawigacja">
  <ul>
    <li><a href="/">Strona główna</a></li>
    <li><a href="/o-nas">O nas</a></li>
    <li><a href="/uslugi">Usługi</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

<!-- Główna nawigacja na Stronie "O nas" (kolejność jest identyczna) -->
<nav aria-label="Główna nawigacja">
  <ul>
    <li><a href="/">Strona główna</a></li>
    <li><a href="/o-nas" aria-current="page">O nas</a></li>
    <li><a href="/uslugi">Usługi</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>
Skopiuj tekst

Niepoprawna implementacja

Poniżej przedstawiono przykład niepoprawnej implementacji, gdzie kolejność elementów nawigacyjnych zmienia się pomiędzy stronami, co może dezorientować użytkowników.

<!-- Główna nawigacja na Stronie Głównej -->
<nav aria-label="Główna nawigacja">
  <ul>
    <li><a href="/">Strona główna</a></li>
    <li><a href="/o-nas">O nas</a></li>
    <li><a href="/uslugi">Usługi</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

<!-- Główna nawigacja na Stronie "O nas" (kolejność została zmieniona!) -->
<nav aria-label="Główna nawigacja">
  <ul>
    <li><a href="/o-nas" aria-current="page">O nas</a></li>
    <li><a href="/">Strona główna</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
    <li><a href="/uslugi">Usługi</a></li>
  </ul>
</nav>
Skopiuj tekst

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki

• Centralizacja zarządzania nawigacją: Używaj systemów zarządzania treścią (CMS) lub komponentów do tworzenia nagłówków i stopek, które zapewniają spójność na poziomie szablonu.
• Semantyczny HTML: Używaj odpowiednich elementów HTML5, takich jak <nav> dla sekcji nawigacyjnych, <ul> i <li> dla list linków.
• Logiczna kolejność w DOM: Upewnij się, że kolejność elementów w drzewie DOM jest logiczna i spójna. Wizualne zmiany kolejności za pomocą CSS (np. order we flexboxie lub gridzie) są dopuszczalne, o ile nie zmieniają one podstawowej, programowej kolejności elementów w sposób, który utrudnia zrozumienie struktury treści przez technologie wspomagające. Dla kryterium 3.2.3 liczy się przede wszystkim kolejność w DOM.
• Testowanie z technologiami wspomagającymi: Regularnie testuj nawigację za pomocą czytników ekranu (np. NVDA, JAWS, VoiceOver), aby upewnić się, że odczytują one elementy w oczekiwanej, spójnej kolejności.

Typowe pułapki

• Dynamiczne menu generowane JS: Jeśli JavaScript generuje lub modyfikuje menu, należy zadbać o to, by nie zmieniało ono kolejności linków bez interakcji użytkownika.
• Niespójne elementy w stopce: Często zapomina się o spójności linków w stopce, które również pełnią funkcję nawigacyjną i powinny zachowywać stałą kolejność.
• Różne menu w różnych sekcjach: Strony w różnych sekcjach witryny mogą mieć różne podmenu, co jest dopuszczalne, ale globalne elementy nawigacji (te, które występują na wielu stronach, niezależnie od sekcji) muszą zachować swoją kolejność.
• Błędne użycie CSS: Używanie właściwości CSS, takich jak order we flexboxie, do wizualnego zmieniania kolejności, może prowadzić do niezgodności, jeśli programowa kolejność (DOM) nie odpowiada tej wizualnej i jest nieprzewidywalna dla czytników ekranu. Kryterium 3.2.3 skupia się na kolejności programowej, która powinna być spójna.

Podsumowanie

Kryterium sukcesu WCAG 3.2.3 Spójna nawigacja jest kluczowe dla stworzenia dostępnej i użytecznej witryny internetowej. Konsekwencja w układzie i kolejności elementów nawigacyjnych nie tylko ułatwia życie użytkownikom z różnymi niepełnosprawnościami, ale także poprawia ogólne doświadczenie każdego, kto korzysta z serwisu. Pamiętaj, aby projektować i wdrażać nawigację z myślą o spójności programowej, wizualnej i interakcyjnej, a także o przewidywalności dla wszystkich użytkowników.