Baza wiedzy Wytyczne WCAG Kryteria sukcesu WCAG

WCAG 2.4.5: Alternatywna nawigacja

Wprowadzenie do WCAG 2.4.5: Alternatywna nawigacja

Kryterium sukcesu WCAG 2.4.5, znane jako „Alternatywna nawigacja” (ang. Multiple Ways), na poziomie AA, ma na celu zapewnienie użytkownikom więcej niż jednej metody odnalezienia konkretnej strony internetowej w obrębie zestawu stron. Różni użytkownicy mają różne preferencje i potrzeby w zakresie nawigacji. Spełnienie tego kryterium oznacza, że strona internetowa nie polega wyłącznie na jednej, z góry narzuconej ścieżce dostępu do treści, ale oferuje elastyczność i wybór.

Kryterium to nie ma zastosowania do stron, które są wynikiem procesu lub są krokiem w procesie (np. strona potwierdzenia zamówienia, krok w formularzu wieloetapowym). W takich przypadkach użytkownik jest prowadzony określoną ścieżką i dodatkowe, alternatywne sposoby nawigacji mogłyby być dezorientujące.

Dlaczego to jest ważne?

Wpływ na dostępność

Zapewnienie wielu sposobów nawigacji ma kluczowe znaczenie dla dostępności i użyteczności strony internetowej. Użytkownicy mogą mieć trudności z używaniem jednej konkretnej metody nawigacji z różnych powodów, takich jak:

Ograniczenia poznawcze: Osoby z dysleksją, zaburzeniami pamięci krótkotrwałej lub trudnościami z rozumieniem zależności przestrzennych mogą mieć problem z zapamiętaniem ścieżki w złożonym menu lub z nawigacją wizualną. Wyszukiwarka lub mapa witryny oferują bardziej bezpośrednią metodę dotarcia do celu.
Ograniczenia motoryczne: Osoby korzystające z klawiatury lub alternatywnych urządzeń wskazujących mogą mieć trudności z precyzyjnym poruszaniem się po rozbudowanych, rozwijanych menu. Wyszukiwarka często wymaga mniej interakcji.
Niewidomi i słabowidzący: Użytkownicy czytników ekranu mogą mieć trudności z mentalnym budowaniem hierarchii strony na podstawie samego menu. Mapa witryny lub wyszukiwarka mogą znacznie ułatwić orientację.
Brak kontekstu: Użytkownicy powiększający treść (zoom) mogą stracić kontekst globalnej nawigacji. Alternatywne metody pomagają im zorientować się, gdzie się znajdują i jak dotrzeć do innych sekcji.

Grupy użytkowników

To kryterium bezpośrednio wpływa na komfort i efektywność korzystania ze strony przez szerokie grono użytkowników, w tym:

Osoby z niepełnosprawnościami poznawczymi i trudnościami w uczeniu się.
Osoby starsze, które mogą mieć trudności z obsługą skomplikowanych interfejsów.
Użytkownicy z niepełnosprawnościami ruchowymi, którzy preferują interakcję z wyszukiwarką lub prostszymi listami linków.
Osoby niewidome i słabowidzące, korzystające z technologii wspomagających.
Użytkownicy, którzy po raz pierwszy odwiedzają stronę i nie są zaznajomieni z jej strukturą.
Osoby korzystające z urządzeń mobilnych, gdzie tradycyjna nawigacja może być ograniczona.

Wymagania kryterium sukcesu 2.4.5

Podstawowym wymaganiem tego kryterium jest:

Przykładowe sposoby nawigacji, które mogą być używane do spełnienia tego kryterium, obejmują:

Warto pamiętać, że strona, która jest wynikiem procesu lub krokiem w procesie (np. strona koszyka zakupów, krok drugi w formularzu rejestracyjnym), jest zwolniona z tego wymogu. W takich sytuacjach alternatywne sposoby nawigacji mogłyby prowadzić do dezorientacji lub przerwania bieżącego zadania.

Praktyczne wytyczne dla zgodności

Aby spełnić kryterium 2.4.5, należy zaimplementować co najmniej dwie różne strategie nawigacji. Poniżej przedstawiono najczęściej stosowane i najbardziej efektywne metody:

1. Zapewnij wyszukiwarkę

Wyszukiwarka jest jednym z najpotężniejszych narzędzi nawigacyjnych. Umożliwia użytkownikom bezpośrednie wprowadzenie zapytania i szybkie odnalezienie żądanej treści, omijając hierarchiczne struktury menu.

2. Użyj globalnej nawigacji

Globalne menu nawigacyjne, często umieszczane w nagłówku strony lub na pasku bocznym, pozwala użytkownikom na eksplorację struktury strony. Może to być menu rozwijane, menu typu „hamburger” na urządzeniach mobilnych lub stały pasek nawigacyjny.

3. Stwórz mapę witryny (sitemap)

Mapa witryny to strona zawierająca listę wszystkich (lub najważniejszych) stron w witrynie, często zorganizowaną hierarchicznie. Jest to doskonała alternatywa dla użytkowników, którzy chcą zobaczyć całą strukturę strony lub nie znaleźli szukanej treści za pomocą innych metod.

4. Wykorzystaj spisy treści lub indeksy

Dla bardzo dużych sekcji, dokumentów lub artykułów, spis treści lub indeks może stanowić dodatkowy sposób nawigacji. Pozwala on na szybkie przejście do konkretnych sekcji w ramach jednej długiej strony.

Przykłady implementacji

Poprawne implementacje

Poniżej przedstawiono przykłady stron spełniających kryterium 2.4.5, oferujących co najmniej dwie metody nawigacji (np. globalne menu, wyszukiwarkę i mapę witryny).

Przykład 1: Globalne menu, wyszukiwarka i link do mapy witryny

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona z wieloma sposobami nawigacji</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; }
        header { background-color: #333; color: white; padding: 1em; display: flex; justify-content: space-between; align-items: center; }
        nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
        nav ul li { margin-right: 15px; }
        nav ul li a { color: white; text-decoration: none; }
        .search-container { display: flex; align-items: center; }
        .search-container label { color: white; margin-right: 5px; }
        .search-container input { padding: 5px; border: none; border-radius: 3px; }
        .search-container button { padding: 5px 10px; background-color: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
        main { padding: 20px; }
        footer { background-color: #eee; padding: 1em; text-align: center; }
        footer a { color: #333; text-decoration: none; margin: 0 10px; }
    </style>
</head>
<body>
    <header>
        <nav aria-label="Główna nawigacja">
            <ul>
                <li><a href="#">Strona główna</a></li>
                <li><a href="#">Usługi</a></li>
                <li><a href="#">O nas</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
        <div class="search-container">
            <label for="site-search">Szukaj:</label>
            <input type="search" id="site-search" name="q" placeholder="Wpisz słowa kluczowe">
            <button type="submit">Szukaj</button>
        </div>
    </header>
    <main>
        <h1>Witaj na naszej stronie!</h1>
        <p>Tutaj znajdziesz interesujące treści na różne tematy. Skorzystaj z menu lub wyszukiwarki, aby znaleźć to, czego szukasz.</p>
        <!-- Dalsza treść strony -->
    </main>
    <footer>
        <p>© 2023 Twoja Firma. Wszystkie prawa zastrzeżone.</p>
        <a href="/mapa-witryny.html">Mapa witryny</a> <!-- Trzeci sposób nawigacji -->
    </footer>
</body>
</html>

W powyższym przykładzie, użytkownik ma do dyspozycji trzy sposoby nawigacji:

Przykład 2: Spis treści dla długiego artykułu

Dla długich artykułów lub dokumentów online, spis treści może służyć jako dodatkowy sposób nawigacji, uzupełniając globalne menu i wyszukiwarkę.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Długi artykuł ze spisem treści</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; }
        header { background-color: #333; color: white; padding: 1em; }
        nav { padding: 1em; background-color: #f4f4f4; }
        nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
        nav ul li { margin-right: 15px; }
        nav ul li a { color: #333; text-decoration: none; }
        .article-container { display: flex; padding: 20px; }
        .table-of-contents { flex: 0 0 250px; margin-right: 20px; border-right: 1px solid #ccc; padding-right: 20px; }
        .table-of-contents h2 { margin-top: 0; }
        .table-of-contents ul { list-style: none; padding: 0; }
        .table-of-contents ul li a { text-decoration: none; color: #007bff; }
        .article-content { flex-grow: 1; }
        section { margin-bottom: 30px; }
    </style>
</head>
<body>
    <header>
        <h1 style="color: white; margin: 0;">Nagłówek witryny (z linkiem do głównej strony i wyszukiwarką)</h1>
    </header>
    <nav aria-label="Nawigacja strony">
        <ul>
            <li><a href="/">Strona główna</a></li>
            <li><a href="/kategorie">Kategorie</a></li>
            <li><a href="/kontakt">Kontakt</a></li>
        </ul>
    </nav>
    <div class="article-container">
        <aside class="table-of-contents" aria-label="Spis treści artykułu">
            <h2>Spis treści</h2>
            <ul>
                <li><a href="#wprowadzenie">1. Wprowadzenie</a></li>
                <li><a href="#historia">2. Historia tematu</a></li>
                <li><a href="#zasady">3. Kluczowe zasady</a></li>
                <li><a href="#podsumowanie">4. Podsumowanie</a></li>
            </ul>
        </aside>
        <main class="article-content">
            <h1>Tytuł mojego długiego artykułu</h1>
            <section id="wprowadzenie">
                <h2>1. Wprowadzenie</h2>
                <p>Treść wprowadzenia...</p>
            </section>
            <section id="historia">
                <h2>2. Historia tematu</h2>
                <p>Treść o historii...</p>
            </section>
            <section id="zasady">
                <h2>3. Kluczowe zasady</h2>
                <p>Treść o zasadach...</p>
            </section>
            <section id="podsumowanie">
                <h2>4. Podsumowanie</h2>
                <p>Treść podsumowania...</p>
            </section>
        </main>
    </div>
</body>
</html>

W tym przypadku globalna nawigacja (header/nav) oraz potencjalna wyszukiwarka (implikowana w nagłówku strony) uzupełnione są o spis treści, który jest alternatywnym sposobem nawigacji w ramach konkretnego, długiego dokumentu.

Niepoprawne implementacje

Poniżej przedstawiono przykłady stron, które nie spełniają kryterium 2.4.5, ponieważ oferują tylko jeden dominujący sposób nawigacji.

Przykład 1: Tylko rozbudowane, zagnieżdżone menu

Strona posiada tylko jedno, bardzo rozbudowane i zagnieżdżone menu, które jest jedyną drogą do odnalezienia większości treści.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona z tylko jednym sposobem nawigacji (błąd)</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; }
        header { background-color: #333; color: white; padding: 1em; }
        nav ul { list-style: none; margin: 0; padding: 0; }
        nav ul li a { color: white; text-decoration: none; display: block; padding: 10px; border-bottom: 1px solid #444; }
        nav ul li ul { display: none; background-color: #555; padding-left: 20px; }
        nav ul li:hover > ul { display: block; }
        main { padding: 20px; }
    </style>
</head>
<body>
    <header>
        <h1 style="color: white; margin: 0;">Nagłówek witryny</h1>
    </header>
    <nav aria-label="Główna nawigacja">
        <ul>
            <li><a href="#">Kategoria 1</a>
                <ul>
                    <li><a href="#">Podkategoria A</a></li>
                    <li><a href="#">Podkategoria B</a></li>
                    <li><a href="#">Podkategoria C</a>
                        <ul>
                            <li><a href="#">Podpodkategoria X</a></li>
                            <li><a href="#">Podpodkategoria Y</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Kategoria 2</a>
                <ul>
                    <li><a href="#">Podkategoria D</a></li>
                </ul>
            </li>
            <li><a href="#">Kategoria 3</a></li>
        </ul>
    </nav>
    <main>
        <h1>Główna zawartość strony</h1>
        <p>Ta strona polega wyłącznie na rozbudowanym menu nawigacyjnym. Brak wyszukiwarki lub mapy witryny.</p>
    </main>
</body>
</html>

W tym scenariuszu użytkownicy, którzy mają trudności z poruszaniem się po złożonych, zagnieżdżonych strukturach menu, nie mają alternatywnej drogi do odnalezienia treści. Brakuje wyszukiwarki, mapy witryny lub innych metod.

Przykład 2: Tylko wyszukiwarka

Strona nie posiada żadnego menu nawigacyjnego ani mapy witryny, polegając wyłącznie na wyszukiwarce.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona tylko z wyszukiwarką (błąd)</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; text-align: center; }
        .hero-section { background-color: #f0f0f0; padding: 50px; }
        .search-form { display: flex; justify-content: center; margin-top: 20px; }
        .search-form input { padding: 10px; width: 400px; max-width: 80%; border: 1px solid #ccc; border-radius: 5px 0 0 5px; }
        .search-form button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 0 5px 5px 0; cursor: pointer; }
        main { padding: 20px; }
    </style>
</head>
<body>
    <header class="hero-section">
        <h1>Znajdź to, czego potrzebujesz!</h1>
        <form class="search-form" role="search">
            <label for="main-search" class="sr-only">Wyszukaj na stronie</label> <!-- sr-only klasa ukrywająca wizualnie label, ale dostępna dla czytników ekranu -->
            <input type="search" id="main-search" name="q" placeholder="Wpisz swoje zapytanie...">
            <button type="submit">Szukaj</button>
        </form>
    </header>
    <main>
        <p>Ta strona polega wyłącznie na wyszukiwarce do odnajdywania treści. Brak jest menu nawigacyjnego lub innych metod przeglądania.</p>
    </main>
</body>
</html>

Chociaż wyszukiwarka jest bardzo użyteczna, poleganie wyłącznie na niej jest problematyczne dla użytkowników, którzy nie wiedzą dokładnie, czego szukają, lub preferują przeglądanie. Brakuje im kontekstu i struktury, którą oferuje menu czy mapa witryny.

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki

Włącz dwie lub więcej metod: Zawsze oferuj co najmniej wyszukiwarkę i globalne menu nawigacyjne. Dodatkowo rozważ mapę witryny, spisy treści, czy „okruszki chleba” (breadcrumbs).
Spójność: Upewnij się, że wybrane metody nawigacji są spójne na całej witrynie, zarówno pod względem umiejscowienia, jak i działania.
Dostępność wszystkich metod: Każdy element nawigacji musi być w pełni dostępny dla użytkowników korzystających z klawiatury, czytników ekranu i innych technologii wspomagających. Obejmuje to odpowiednie etykiety, kolejność tabulacji, kontrast kolorów i znaczniki ARIA.
Jasne i zwięzłe etykiety: Używaj zrozumiałych i precyzyjnych etykiet dla wszystkich elementów nawigacyjnych.
Wyszukiwarka powinna być widoczna: Umieść pole wyszukiwania w łatwo dostępnym miejscu, najlepiej w nagłówku strony.
Aktualizuj mapę witryny: Jeśli używasz mapy witryny, upewnij się, że jest ona aktualna i odzwierciedla bieżącą strukturę strony.
Testuj z użytkownikami: Przeprowadzaj testy użyteczności z różnymi grupami użytkowników, aby upewnić się, że nawigacja jest intuicyjna i efektywna.

Typowe pułapki

Opieranie się na jednej złożonej metodzie: Na przykład, tylko na bardzo głęboko zagnieżdżonym menu rozwijanym.
Ukrywanie nawigacji: Menu, które jest trudne do znalezienia lub uruchomienia, nawet jeśli jest technicznie obecne.
Niedostępna wyszukiwarka: Wyszukiwarka, która nie działa z klawiaturą, ma słaby kontrast, lub jej pole nie jest odpowiednio oznaczone.
Przestarzała mapa witryny: Linki w mapie witryny prowadzą do nieistniejących stron lub są nieaktualne.
Brak wyraźnego rozróżnienia: Oferowanie dwóch bardzo podobnych metod nawigacji, które w rzeczywistości nie stanowią alternatywy (np. dwa identyczne menu w różnych miejscach).
Brak obsługi błędów wyszukiwania: Wyszukiwarka, która zawsze zwraca „brak wyników” lub nie sugeruje alternatyw.

Podsumowanie

Kryterium WCAG 2.4.5 „Alternatywna nawigacja” jest fundamentalne dla stworzenia elastycznej i przyjaznej dla użytkownika strony internetowej. Zapewniając wiele sposobów odnalezienia treści, deweloperzy i twórcy treści umożliwiają każdemu użytkownikowi wybranie metody, która najlepiej odpowiada jego potrzebom i preferencjom. To nie tylko zwiększa dostępność, ale także ogólną użyteczność i satysfakcję z korzystania z witryny.

Powiązane wpisy

Nadal szukasz odpowiedzi?

Zapytaj naszych specjalistów używając czatu online.

Skontaktuj się z nami