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:

• Zapewnienie co najmniej dwóch różnych sposobów odnalezienia każdej strony internetowej w ramach danego zestawu stron.

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

• Globalne menu nawigacyjne
• Wyszukiwarka
• Mapa witryny (sitemap)
• Spis treści (dla dużych sekcji lub dokumentów)
• Lista powiązanych linków
• Indeks lub katalog

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.

• Upewnij się, że pole wyszukiwania jest łatwe do znalezienia (najczęściej w nagłówku strony) i ma czytelną etykietę.
• Wyszukiwarka powinna być efektywna i zwracać trafne wyniki.
• Zapewnij dostępność wyszukiwarki dla użytkowników klawiatury i czytników ekranu.

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.

• Menu powinno być spójne i występować na wszystkich stronach witryny.
• Hierarchia menu powinna być logiczna i łatwa do zrozumienia.
• Upewnij się, że wszystkie elementy menu są dostępne dla użytkowników klawiatury i czytników ekranu (np. poprzez odpowiednie atrybuty ARIA i poprawne znaczniki semantyczne).

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.

• Link do mapy witryny powinien być łatwy do znalezienia, często w stopce strony.
• Mapa witryny powinna być aktualizowana wraz ze zmianami w strukturze strony.
• Zadbaj o czytelność i dostępność linków w mapie witryny.

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.

• Upewnij się, że linki w spisie treści prowadzą do odpowiednich kotwic na stronie.
• Spis treści powinien być umieszczony na początku danej sekcji lub dokumentu.

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).

<!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>

<!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>

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.

<!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>

<!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>

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 „chleb okruszek” (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.