Wróć do wszystkich kryteriów

3.2.3 Spójna nawigacja (ang.) Consistent Navigation

Specjalizacje:

  • Designer
  • Deweloper

Elementy:

  • Nawigacja

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Kryterium sukcesu 3.2.3 nakłada na twórców wymóg zachowania absolutnej przewidywalności oraz żelaznej konsekwencji w rozmieszczeniu komponentów nawigacyjnych w obrębie całego serwisu internetowego. Użytkownik musi mieć niezachwianą pewność, gdzie znajdzie kluczowe panele (tj. menu główne, wyszukiwarka, stopka witryny).

    Dzięki takiemu zabiegowi pomagasz odbiorcom błyskawicznie zbudować stabilny model mentalny struktury całej strony, co diametralnie ułatwia sprawne przemieszczanie się po jej zasobach. Eliminujesz chaos, który dla wielu osób staje się barierą nie do przebycia. Zdecydowanie zmniejszasz obciążenie poznawcze oraz niwelujesz frustrację wywołaną ciągłym, bezcelowym poszukiwaniem podstawowych odnośników. Zadbaj o to, aby poruszanie się po Twojej witrynie było maksymalnie intuicyjne i komfortowe.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#consistent-navigation

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#spojna-nawigacja

    Słownik pojęć

    Względna kolejność (ang.) same relative order
    –

    stałe wzajemne usytuowanie poszczególnych elementów w strukturze dokumentu. Jeśli komponent A wyprzedza komponent B na jednej podstronie, ta relacja musi zostać bezwzględnie utrzymana na wszystkich pozostałych ekranach, na których występują oba te elementy (nawet jeśli pomiędzy nimi nie zostaną wstawione lub usunięte inne pozycje).

    Powtarzające się elementy nawigacji
    –

    wszelkie bloki interaktywne spełniające funkcje nawigacyjne, które osadzono na więcej niż jednej stronie serwisu, w tym paski menu, odnośniki w stopce, nawigacja boczna oraz linki pomijające.

    Wpływ na dostępność (Kogo wspierasz?)

    • Osoby z niepełnosprawnościami poznawczymi i neurologicznymi: Użytkownicy zmagający się z dysleksją, stanami lękowymi czy zaburzeniami pamięci krótkotrwałej zyskują bezcenne poczucie pełnej kontroli nad interfejsem. Stałe, niezmienne położenie najważniejszych elementów drastycznie redukuje ich wysiłek mentalny, ponieważ nie muszą uczyć się układu strony od nowa przy każdym przejściu na kolejną podstronę.
    • Użytkownicy słabowidzący korzystający z powiększenia ekranu: Osoby używające programów powiększających widzą jednorazowo jedynie niewielki wycinek ekranu. Polegają oni na stałych punktach orientacyjnych i granicach stron, aby błyskawicznie lokalizować powtarzające się menu bez konieczności przeszukiwania całego obszaru roboczego.
    • Użytkownicy technologii wspomagających (czytniki ekranu): Osoby niewidome opierają swoją orientację w przestrzeni cyfrowej na czytelnym i przewidywalnym kodzie źródłowym. Gdy względna kolejność odnośników nieustannie ewoluuje na kolejnych podstronach, nawigacja staje się dla nich całkowicie losowa, chaotyczna i niezwykle trudna.
    • Osoby z ograniczoną sprawnością ruchową: Internauci korzystający wyłącznie z klawiatury bądź innych urządzeń asystujących bezwzględnie bazują na programowej i wizualnej spójności. Nieoczekiwane roszady w układzie elementów zmuszają ich do wykonywania dodatkowych, męczących kliknięć i drastycznie wydłużają czas dotarcia do poszukiwanych informacji.

    Zasady wdrażania i wymagania techniczne

    • Jednokrotny projekt globalnej nawigacji: Zdefiniuj strukturę nagłówka, menu bocznego oraz stopki w jednym, centralnym miejscu kodu lub szablonu systemu zarządzania treścią. Upewnij się, że ten wzorzec jest konsekwentnie powielany na każdej podstronie witryny.
    • Bezwzględna spójność w kodzie: Pamiętaj, że czytniki ekranu oraz technologie wspomagające analizują przede wszystkim strukturę drzewa DOM. Nawet jeśli używasz właściwości wizualnych CSS, takich jak flex-direction: reverse bądź order w układach (ang.) Flexbox czy (ang.) Grid, kolejność programowa w kodzie HTML musi pozostać całkowicie niezmienna.
    • Weryfikacja wszystkich komponentów nawigacyjnych: Nie ograniczaj uwagi wyłącznie do paska menu głównego. Przeanalizuj pod kątem spójności relatywnej również odnośniki w stopce, ścieżki okruszków ((ang.) breadcrumbs), linki powrotne na górę strony oraz elementy wyszukiwarki.
    • Budowa nawigacji za pomocą semantycznego HTML: Buduj strefy nawigacji za pomocą dedykowanych znaczników, takich jak <nav>, a spisy linków opieraj na strukturach list <ul> i <li>. Rozbudowywanie menu o podmenu lub ukrywanie pojedynczych linków na wybranych stronach jest w pełni dopuszczalne, dopóki pozostałe elementy zachowują swoją pierwotną kolejność relatywną.

    Wyjątki i sytuacje szczególne

    Jeżeli zmiana względnej kolejności, reorganizacja lub personalizacja elementów nawigacji wynika z bezpośredniej, świadomej akcji użytkownika (np. poprzez konfigurację profilu, zmianę ustawień konta lub mechanizm przeciągnij i upuść ((ang.) drag and drop), kryterium to nie zostaje naruszone. Unikaj jednak sytuacji, w których system modyfikuje kolejność linków automatycznie na podstawie kontekstu strony czy aktywności internauty bez jego wyraźnego polecenia.

    Przykłady implementacji

    Najczęstsze błędy

    • F66: Prezentowanie odnośników nawigacyjnych w odmiennej względnej kolejności na różnych podstronach serwisu w obrębie tego samego mechanizmu. Jest to najpoważniejsze uchybienie bezpośrednio łamiące zapisy kryterium 3.2.3.
    • Błędne używanie właściwości CSS: Wykorzystywanie reguły order w układach elastycznych do samowolnej reorganizacji wizualnej, podczas gdy kolejność w kodzie źródłowym DOM pozostaje sprzeczna z układem ekranowym i dezorientuje czytniki.
    • Niespójne elementy w stopce serwisu: Przestawianie kolejności lub chaotyczne usuwanie linków do podstron takich jak kontakt, regulamin czy polityka prywatności na wybranych ekranach.
    • Dynamiczne menu generowane przez JavaScript: Bezrefleksyjne modyfikowanie lub automatyczne sortowanie kolejności pozycji w menu przez skrypty JavaScript bez jednoznacznej interakcji ze strony użytkownika.
    • Wprowadzanie odmiennych menu globalnych w różnych sekcjach: Całkowite zaburzanie układu bazowych elementów nawigacyjnych w zależności od aktualnie przeglądanego działu witryny.

    Najlepsze praktyki

    • Pełna centralizacja zarządzania strukturą: Twórz nagłówki i stopki w postaci globalnych komponentów wielokrotnego użytku, eliminując ryzyko przypadkowych błędów na pojedynczych podstronach.
    • Zapewnienie logicznej kolejności w DOM: Dbaj o to, aby kod źródłowy zawsze odzwierciedlał naturalny, intuicyjny i uporządkowany kierunek czytania witryny.
    • Regularne testy z technologiami asystującymi: Przynajmniej raz w cyklu projektowym zweryfikuj działanie systemu nawigacyjnego przy użyciu rzeczywistych czytników ekranu, monitorując stabilność odczytu komunikatów.

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Uruchom narzędzia inspekcji kodu w przeglądarce i przeanalizuj strukturę drzewa DOM na kilku różnych podstronach, aby upewnić się, że hierarchia i względne położenie tagów <nav>, <ul> oraz <li> pozostają nienaruszone.
    • NVDA: Uruchom czytnik ekranu i przejdź kolejno przez całe menu oraz stopkę na różnych podstronach za pomocą klawiatury, kontrolując, czy syntezator mowy anonsuje wszystkie odnośniki w dokładnie takiej samej, przewidywalnej sekwencji.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 6 interaktywnych makiet stron internetowych. Każda makieta posiada zakładki symulujące przejście na inną podstronę tego samego serwisu. Twoim zadaniem jest ocena, czy nawigacja (menu główne lub stopka) jest spójna na wszystkich podstronach.

    Jak to sprawdzić?

    1. Przełączaj się między zakładkami (podstronami) w każdym przykładzie.
    2. Obserwuj kolejność linków w menu głównym oraz w stopce.
    3. Sprawdź kod źródłowy (DOM) za pomocą narzędzi deweloperskich (Zbadaj element), aby upewnić się, że wizualna kolejność odpowiada tej w kodzie.
    4. Pamiętaj, że względna kolejność musi zostać zachowana. Usunięcie linku (np. do aktualnej strony) lub dodanie podmenu jest dozwolone, o ile reszta linków zachowuje swoją relację.

    Notatka: Zanim zajrzysz do rozwiązania, przetestuj i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Klawiatura (Tab, Shift + Tab, Spacja, ), Myszka, Narzędzie deweloperskie (ang.) Developer Tools

    Link: https://pdc.ambiscale.com/training/wcag-3-2-3/

    #1 BŁĄD

    Problem: Zastosowano technikę F66. Na podstronie „O nas” zamieniono miejscami linki „Oferta” i „O nas”.
    Dlaczego: Względna kolejność powtarzających się elementów nawigacyjnych została zaburzona. Użytkownicy przyzwyczajeni do tego, że „Oferta” jest trzecia, mogą się zgubić.
    Naprawa: Zachowaj identyczną kolejność linków w menu głównym na każdej podstronie.

    #2 BŁĄD

    Problem: Na podstronie „Blog” kolejność linków w kodzie źródłowym (DOM) została odwrócona, a następnie „naprawiona” wizualnie za pomocą właściwości CSS order.
    Dlaczego: Czytniki ekranu oraz nawigacja klawiaturą opierają się na strukturze DOM, a nie na wyglądzie CSS. Dla użytkownika niewidomego kolejność nawigacji drastycznie się zmieniła.
    Naprawa: Kolejność w kodzie HTML musi być spójna i odpowiadać logicznemu układowi wizualnemu. Usuń manipulacje order.

    #3 DOBRZE

    Dlaczego: Usunięcie linku do aktualnie przeglądanej strony jest dozwolone. Względna kolejność pozostałych elementów (Start zawsze przed Ofertą, Oferta zawsze przed Kontaktem) została w pełni zachowana.

    #4 BŁĄD

    Problem: Na podstronie „Koszyk” link „Pomoc” został przeniesiony z końca na początek stopki.
    Dlaczego: Kryterium 3.2.3 dotyczy wszystkich powtarzających się mechanizmów nawigacyjnych, nie tylko menu głównego. Stopka, breadcrumbs czy linki „skip to content” również muszą zachować spójność.
    Naprawa: Ujednolic kolejność linków w stopce w całym serwisie.

    #5 DOBRZE

    Dlaczego: Dodanie podmenu (rozwinięcie opcji „Usługi”) na dedykowanej podstronie nie łamie kryterium. Główne elementy nawigacji (Start, Usługi, Kontakt) nadal występują w tej samej, niezmienionej kolejności względnej.

    #6 DOBRZE

    Dlaczego: Zmiana kolejności nawigacji nastąpiła wyłącznie po kliknięciu przycisku „Sortuj menu”. Kryterium 3.2.3 dopuszcza zmiany układu, o ile są one zainicjowane przez użytkownika (np. personalizacja, sortowanie).

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów