Wróć do wszystkich kryteriów

2.4.5 Wiele dróg (ang.) Multiple Ways

Specjalizacje:

  • Designer
  • Deweloper

Elementy:

  • Cała strona / widok
  • Nawigacja

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Głównym dążeniem tego kryterium jest zagwarantowanie, że użytkownicy nie zostaną ograniczeni do jednej, z góry narzuconej ścieżki poszukiwania informacji w serwisie internetowym. Wytyczna nakłada obowiązek wdrożenia minimum dwóch niezależnych metod odnajdywania poszczególnych stron w obrębie danego zestawu witryn.

    Dzięki temu każdy odbiorca zyskuje elastyczność i może wybrać taki sposób nawigacji, który najlepiej odpowiada jego indywidualnym preferencjom, nawykom czy możliwościom zdrowotnym. Zapobiega to sytuacji, w której skomplikowane lub rozbudowane drzewo menu staje się dla kogoś barierą nie do pokonania.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/Understanding/multiple-ways.html

    Definicja w j. polskim

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

    Słownik pojęć

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

    • Osoby z niepełnosprawnościami poznawczymi, dysleksją oraz zaburzeniami pamięci krótkotrwałej: Mogą mieć duże trudności z zapamiętaniem ścieżek w rozbudowanych menu lub zrozumieniem skomplikowanych zależności przestrzennych. Wyszukiwarka wewnętrzna lub mapa witryny oferują im znacznie bardziej bezpośrednią metodę dotarcia do celu.
    • Osoby niewidome i słabowidzące (korzystające z czytników ekranu): Użytkownicy technologii asystujących mogą mieć trudności z mentalnym budowaniem hierarchii i struktury witryny na podstawie samego kodu menu. Mapa witryny prezentująca płaski lub uporządkowany indeks linków znacząco ułatwia im orientację.
    • Użytkownicy powiększający treść (np. za pomocą oprogramowania powiększającego lub systemowego zoomu): Przy dużym zbliżeniu łatwo stracić globalny kontekst nawigacyjny. Alternatywne metody pomagają im sprawnie zorientować się, w jakiej sekcji się znajdują i jak dotrzeć do pozostałych zasobów.
    • Osoby z ograniczeniami motorycznymi: Poruszanie się po głęboko zagnieżdżonych, rozwijanych listach menu za pomocą samej klawiatury wymaga wysokiej precyzji i wielu interakcji. Dobrze zaprojektowana wyszukiwarka pozwala na pominięcie tych kroków.
    • Osoby starsze oraz użytkownicy odwiedzający witrynę po raz pierwszy: Pomaga osobom nieznającym układu serwisu w sprawnym odnajdywaniu informacji bez błądzenia.

    Zasady wdrażania i wymagania techniczne

    Podstawowym wymaganiem technologicznym jest wdrożenie co najmniej dwóch różnych metod lokalizowania podstron. Zgodnie z oficjalnymi wytycznymi W3C, do technik wystarczających zalicza się zastosowanie kombinacji dwóch lub więcej z poniższych rozwiązań:

    1. Globalne menu nawigacyjne – spójne, logicznie uporządkowane menu dostępne w nagłówku lub panelu bocznym na każdej stronie.
    2. Wyszukiwarka wewnętrzna – mechanizm wyszukiwania tekstowego pozwalający bezpośrednio odnaleźć treść na podstawie słów kluczowych.
    3. Mapa witryny ((ang.) sitemap) – dedykowana strona z przejrzystym, hierarchicznym wykazem odnośników do najważniejszych podstron serwisu.
    4. Spis treści ((ang.) Table of Contents) – wykaz sekcji w obrębie dużych dokumentów lub powiązanych podstron ułatwiający orientację.
    5. Lista linków do wszystkich pozostałych stron lub linkowanie do każdej podstrony bezpośrednio z poziomu strony głównej (Technika G185) – sprawdza się idealnie w małych witrynach (np. 3-5 stron).

    Wszystkie wdrożone metody muszą być w pełni dostępne cyfrowo – poprawnie oznaczone semantycznie za pomocą punktów orientacyjnych HTML (np. <nav aria-label="..."> lub <form role="search">) oraz w pełni obsługiwane z poziomu klawiatury.

    Wyjątki i sytuacje szczególne

    Wymóg ten nie ma zastosowania do stron internetowych, które są bezpośrednim wynikiem procesu lub kolejnym krokiem w ściśle zdefiniowanym zadaniu o charakterze liniowym. Sytuacje zwolnione z tego obowiązku to m.in.:

    • Kroki w wieloetapowym formularzu zamówienia (np. podgląd koszyka, wprowadzanie danych do wysyłki, bramka płatności, strona potwierdzenia zamówienia).
    • Wyniki działania wyszukiwarki (strona generowana dynamicznie wyłącznie na podstawie zapytania użytkownika).
    • Dynamiczne etapy autoryzacji transakcji bankowych lub testów (ang.) CAPTCHA.

    W takich przypadkach użytkownik musi podążać ściśle określoną ścieżką, a wprowadzenie alternatywnych metod nawigacji mogłoby doprowadzić do dezorientacji lub niezamierzonego przerwania zadania.

    Przykłady implementacji

    Najczęstsze błędy

    • Brak alternatywy (jedna ścieżka): Projekt witryny opiera się wyłącznie na jednym, zagnieżdżonym menu rozwijanym. Jeśli użytkownik ma trudności z jego obsługą, nie ma żadnej innej możliwości dotarcia do głębszych podstron serwisu.
    • Wyłączne poleganie na wyszukiwarce: Witryna posiada jedynie pole wyszukiwania tekstowego, pozbawiona jest natomiast jakiejkolwiek struktury nawigacyjnej lub mapy witryny. Uniemożliwia to eksplorację serwisu osobom, które nie wiedzą dokładnie, czego szukają, lub preferują przeglądanie strukturalne.
    • Niedostępność techniczna metod alternatywnych: Wdrożenie wyszukiwarki lub mapy witryny, która jest niewidoczna dla czytników ekranu, nie posiada etykiet (<label>) lub do której nie da się dotrzeć za pomocą klawisza Tab.
    • Pozorne alternatywy: Oferowanie dwóch bliźniaczych, identycznych układów menu w różnych miejscach (np. powielone menu z nagłówka w panelu bocznym). Nie stanowią one realnej alternatywy funkcjonalnej (np. indeksu alfabetycznego czy wyszukiwarki).
    • Przestarzałe lub uszkodzone mapy witryny: Linki w mapie witryny nie są aktualizowane, prowadzą do stron z błędem 404 lub całkowicie pomijają nowo dodane sekcje informacyjne.

    Najlepsze praktyki

    • Zasada „Złotego Standardu”: Dobrą praktyką projektową jest jednoczesne oferowanie globalnego menu, widocznego pola wyszukiwania w nagłówku oraz linku do mapy witryny w stopce.
    • Stosowanie nawigacji okruszkowej ((ang.) breadcrumbs): Choć same „okruszki” nie są traktowane jako samodzielna metoda odnajdywania strony od zera, stanowią doskonałe uzupełnienie orientacyjne dla użytkowników.
    • Wielojęzyczność: Należy pamiętać, że odmienne wersje językowe stanowią osobne zestawy stron internetowych. Każda z nich musi niezależnie realizować wymagania alternatywnej nawigacji.
    • Optymalizacja mobilna: Zadbaj o to, aby na urządzeniach mobilnych, gdzie menu główne jest domyślnie ukryte pod ikoną „hamburgera”, pole wyszukiwania lub linki w stopce nadal pozostawały łatwo dostępne bez konieczności otwierania skomplikowanych kontenerów.

    Metody testowania

    • Analiza architektoniczna (Heurystyczna):
      • Wybierz losowo 5 podstron osadzonych głęboko w strukturze serwisu.
      • Sprawdź, czy na każdą z nich możesz dotrzeć na co najmniej dwa różne sposoby (np. raz nawigując przez menu główne, a drugi raz poprzez wpisanie frazy w wyszukiwarkę lub kliknięcie w link w mapie witryny).
    • Weryfikacja techniczna dostępności klawiatury:
      • Za pomocą klawisza Tab upewnij się, że alternatywne mechanizmy (wyszukiwarka, mapa witryny) przyjmują fokus, posiadają widoczną obwódkę fokusową i dają się w pełni obsłużyć bez użycia myszy.
    • Test wyłączeń: Upewnij się, czy podstrony pozbawione alternatywnej nawigacji są rzeczywiście elementami zamkniętego, liniowego procesu (np. proces płatności).
    • NVDA: Uruchom czytnik ekranu i za pomocą samej klawiatury przejdź przez całą strukturę strony, weryfikując, czy bez trudu potrafisz zlokalizować alternatywne ścieżki dostępu oraz czy wyszukiwarka poprawnie anonsuje swoje przeznaczenie.
    • Narzędzie deweloperskie (ang.) Developer Tools: Sprawdź w drzewie DOM strony, czy wdrożono co najmniej dwa odrębne, niezależne od siebie komponenty nawigacyjne (np. menu główne i wyszukiwarkę) oraz czy posiadają one odpowiednie etykiety tekstowe.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 makiet różnych serwisów internetowych. Twoim zadaniem jest ocenić, czy użytkownik ma do dyspozycji minimum dwie odrębne metody na odnalezienie dowolnej podstrony w witrynie.

    Jak to sprawdzić?

    1. Zwróć uwagę, jakie narzędzia oferuje każda z makiet (np. nawigacja główna w nagłówku, wyszukiwarka, mapa witryny).
    2. Sprawdź, czy metody są od siebie niezależne (np. wyszukiwarka tekstowa pozwala pominąć klikanie w strukturę drzewa menu).
    3. Pamiętaj o wyjątku: Jeśli strona jest krokiem w wieloetapowym procesie (np. formularz płatności), wymóg alternatywnych dróg nie obowiązuje.

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

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

    #1 BŁĄD

    Problem: Sklep posiada wyłącznie jedną drogę dotarcia do podstron – główne menu nawigacyjne.
    Dlaczego: Osoby mające problemy z obsługą skomplikowanego, zagnieżdżonego menu (np. ze względu na ograniczenia motoryczne czy poznawcze) są całkowicie zablokowane.
    Naprawa: Wdróż wyszukiwarkę tekstową (częsty standard w e-commerce) lub dodaj w stopce odnośnik do szczegółowej, hierarchicznej Mapy Witryny.

    #2 DOBRZE

    Problem: Serwis bazuje wyłącznie na wyszukiwarce. Brak strukturalnego spisu treści czy menu.
    Dlaczego: Użytkownik musi dokładnie wiedzieć, jakiej frazy poszukuje. Nie może zorientować się w strukturze całego portalu poprzez swobodne przeglądanie dostępnych kategorii (częsty problem osób starszych oraz osób z niepełnosprawnościami wzroku).
    Naprawa: Zapewnij klasyczne menu nawigacyjne lub dodaj alfabetyczny indeks stron.

    #3 DOBRZE

    Dlaczego: Zastosowano „złoty standard”. Wdrożono na równi globalne menu nawigacyjne dla osób preferujących przeglądanie strukturalne oraz precyzyjną wyszukiwarkę dla osób nastawionych na konkretny cel. Obie funkcjonalności wzajemnie się uzupełniają.

    #4 DOBRZE

    Dlaczego: Mimo braku wyszukiwarki, twórcy wdrożyli w stopce łącze do specjalnie zaprojektowanej Mapy Witryny. Mapa taka oferuje płaski i czytelny (często dla czytników ekranu) wykaz wszystkich podstron, dając użytkownikom drugą opcję na dotarcie w każde miejsce w portalu.

    #5 DOBRZE

    Dlaczego: Formularz zamówienia reprezentuje zamknięty, liniowy proces. Według wytycznych W3C wymóg oferowania nawigacji okruszkowej, wyszukiwarki, map witryny czy głównego menu w tego typu miejscach nie obowiązuje. Celem strony jest przeprowadzenie płatności w sposób nienaruszający bezpieczeństwa, a dodatkowe elementy nawigacyjne mogłyby tylko odwracać uwagę użytkownika od zadania.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów