3.2.3 Spójna nawigacja

Menu, wyszukiwarka i inne elementy nawigacji powtarzane na stronach serwisu muszą występować na każdej stronie w tej samej kolejności, chyba że użytkownik sam ją zmieni.

/ Czego wymaga

Serwis powtarza nawigację niemal na każdej stronie: menu główne, wyszukiwarkę, okruszki, linki w stopce. Kryterium wymaga, żeby tam, gdzie te bloki powtarzają się w obrębie zestawu stron, występowały w tej samej kolejności względem siebie. Osoby, które powiększają ekran i widzą naraz tylko jego mały fragment, znajdują menu dzięki temu, że pamiętają, gdzie było. Użytkownicy czytników ekranu, którzy przechodzą przez stronę po kolei, uczą się, że wyszukiwarka jest po menu, a przed treścią główną. Gdy kolejność zmienia się od strony do strony, obie grupy muszą szukać od nowa na każdej stronie.

Chodzi o kolejność względną, a nie o identyczne strony. W3C uznaje, że elementy zachowują tę samą kolejność względną także wtedy, gdy inne elementy zostaną wstawione albo usunięte, więc menu działu widoczne tylko w jednej części serwisu albo menu rozwijające głębszy poziom nie naruszają kryterium. Dotyczy ono nawigacji powtarzanej w jednym zestawie stron, czyli stron o wspólnym celu od tego samego autora, a różne wersje językowe to osobne zestawy. Jedyny wyjątek to zmiana zainicjowana przez użytkownika, na przykład przez ustawienie preferencji albo narzędzie adaptacyjne, które przestawia stronę.

/ Jak strony go nie spełniają

Menu główne pokazuje na stronie głównej kolejno Produkty, Cennik i Pomoc, a na podstronach Pomoc, Produkty i Cennik.
Pole wyszukiwania stoi w kodzie części szablonów przed menu, a w innych za nim, więc czytnik ekranu trafia na nie w różnej kolejności.
Strona docelowa zbudowana w osobnym kreatorze ustawia wspólne linki stopki w innej kolejności niż reszta serwisu.
Link pomijania, przełącznik języka i menu konta zamieniają się miejscami między sklepem a blogiem tego samego serwisu.
Skrypt przesuwa pozycję bieżącego działu na początek listy, więc kolejność menu zmienia się z działu na dział.

/ Jak sprawdzić samodzielnie

Wybierz próbkę stron zbudowanych na różnych szablonach: stronę główną, listę, stronę szczegółów, formularz, stronę pomocy i każdą stronę docelową.
Na każdej zapisz kolejność powtarzających się bloków, takich jak elementy nagłówka, menu główne, wyszukiwarka, okruszki, panel boczny i stopka, oraz kolejność linków w każdym menu.
Porównaj listy. Na jednej stronie może brakować bloku albo może on mieć dodatkowe pozycje, ale to, co się powtarza, musi zachować kolejność.
Sprawdź też kolejność w kodzie. Przejdź klawiszem Tab od góry każdej strony albo otwórz drzewo dostępności w narzędziach deweloperskich, bo CSS potrafi pokazać na ekranie jedną kolejność, a w znacznikach trzymać inną.
Darmowym czytnikiem ekranu, na przykład NVDA, wyświetl listę punktów orientacyjnych albo linków na dwóch stronach i sprawdź, czy powtarzające się pozycje pojawiają się w tej samej kolejności.

/ Jak to naprawić

Renderuj nagłówek, menu główne i stopkę z jednego wspólnego komponentu albo fragmentu szablonu, żeby każda strona dostawała te same znaczniki w tej samej kolejności.
Trzymaj pozycje menu w jednym źródle danych, na przykład w jednej konfiguracji nawigacji, zamiast w listach pisanych ręcznie dla każdej strony.
Bieżącą stronę oznacz atrybutem aria-current="page" i stylem wizualnym, zamiast przenosić jej pozycję w inne miejsce.
Nie zmieniaj kolejności powtarzanych bloków właściwością order, ustawieniem flex-direction: row-reverse ani pozycjonowaniem bezwzględnym tylko w niektórych szablonach. Kolejność wizualna i kolejność w DOM mają być takie same.
Gdy dział potrzebuje własnego podmenu, wstaw je obok wspólnej nawigacji i nie ruszaj kolejności wspólnych pozycji.

/ Co sprawdza nasz skaner

Żaden test w naszym skanie tego nie obejmuje. Każda reguła patrzy na jedną wyrenderowaną stronę naraz, więc kolejność menu na jednej stronie nigdy nie jest zestawiana z inną. HTML_CodeSniffer zgłasza przy tym kryterium tylko przypomnienie, a przypomnienia są odrzucane. Porównanie powtarzanej nawigacji na próbce szablonów należy do audytu ręcznego.

/ Kto je łamie, według naszych pomiarów

Cotygodniowy indeks nie ma danych dla tego kryterium, bo żaden test uruchamiany przez skan witryny go nie sprawdza. Ocenia je człowiek i do tego służy audyt ręczny.

Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.

/ Pytania o to kryterium

Czy spójna nawigacja oznacza, że każda strona musi mieć to samo menu?

Nie. Kryterium wymaga, żeby powtarzana nawigacja zachowywała kolejność. Strona może pominąć jakiś blok, a dział może dodać podmenu, bo W3C uznaje, że elementy zachowują tę samą kolejność względną także po wstawieniu lub usunięciu innych. Naruszeniem jest to, że te same powtarzane linki pojawiają się na różnych stronach w innej kolejności.

Jaki poziom ma kryterium 3.2.3 Spójna nawigacja?

Poziom AA. Należy do WCAG od wersji 2.0 i nie zmieniło się w 2.1 ani 2.2. Obowiązuje w obrębie zestawu stron, który W3C definiuje jako strony o wspólnym celu, stworzone przez tego samego autora, grupę lub organizację. Różne wersje językowe serwisu to osobne zestawy.

Czym różnią się kryteria 3.2.3 i 3.2.4?

3.2.3 Spójna nawigacja dotyczy tego, gdzie stoi powtarzana nawigacja: w tej samej kolejności względnej na każdej stronie. 3.2.4 Spójna identyfikacja dotyczy tego, jak nazywają się komponenty o tej samej funkcji: tą samą etykietą, nazwą lub ikoną wszędzie, gdzie się pojawiają. Serwis może trzymać porządek w menu i mimo to naruszać 3.2.4, nazywając przycisk wyszukiwania na jednej stronie „Szukaj”, a na innej „Znajdź”.

Zmierz własną stronę Wszystkie zmierzone bariery