Wróć do wszystkich kryteriów

2.4.1 Możliwość pominięcia bloków (ang.) Bypass Blocks

Specjalizacje:

  • Deweloper

Elementy:

  • Nagłówki i struktura
  • Nawigacja

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    Głównym założeniem tej wytycznej jest udostępnienie użytkownikom sprawnego mechanizmu, który pozwala omijać powtarzające się fragmenty strony. Dzięki temu osoba odwiedzająca serwis może natychmiast przenieść się do kluczowych informacji, bez konieczności interakcji z tymi samymi elementami przy każdym przeładowaniu podstrony.

    Realizacja tego kryterium znacząco podnosi komfort nawigacji, czyniąc ją bardziej przewidywalną i mniej uciążliwą.

    Definicja w j. angielskim

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

    Definicja w j. polskim

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

    Słownik pojęć

    Odnośnik “Przejdź do treści” (ang.) Skip link
    –

    Specjalny link, zazwyczaj umieszczony na początku kodu, który pozwala przeskoczyć nawigację i przejść bezpośrednio do głównej zawartości.

    Role orientacyjne (ang.) Landmark roles
    –

    Atrybuty ARIA lub semantyczne znaczniki HTML5, które kategoryzują obszary strony, ułatwiając nawigację w technologiach wspomagających.

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

    • Użytkownicy klawiatury: Osoby niekorzystające z myszki nie muszą wielokrotnie naciskać klawisza Tab, aby przejść przez dziesiątki linków w menu przed dotarciem do artykułu.
    • Użytkownicy czytników ekranu: Osoby niewidome unikają liniowego, czasochłonnego odsłuchiwania powtarzalnych nagłówków i stopek na każdej podstronie.
    • Użytkownicy z zaburzeniami poznawczymi: Brak konieczności przetwarzania tych samych bloków treści pomaga w skupieniu uwagi na istotnych informacjach i redukuje rozproszenie.
    • Osoby z niepełnosprawnościami ruchowymi: Zmniejszenie liczby wymaganych kliknięć ogranicza zmęczenie i ból fizyczny związany z obsługą interfejsu.

    Zasady wdrażania i wymagania techniczne

    Aby skutecznie zrealizować to kryterium, zastosuj poniższe techniki:

    Linki typu (ang.) Skip links:

    • Zadbaj, aby link był pierwszym elementem interaktywnym w kodzie DOM.
    • Skonfiguruj link tak, aby prowadził do unikalnego identyfikatora ((ang.) ID) sekcji głównej.
    • Upewnij się, że link staje się widoczny i czytelny natychmiast po otrzymaniu fokusu klawiatury.
    • Dopuszczalne jest stworzenie listy linków prowadzących do różnych obszarów strony, np.:
      • Przejdź do treści: Klasyczny odnośnik prowadzący bezpośrednio do głównej osi artykułu lub podstrony.
      • Przejdź do wyszukiwarki: Link przenoszący fokus bezpośrednio do pola edycyjnego wyszukiwarki witryny (<input type="search">).
      • Przejdź do zmiany języków: Odnośnik kierujący użytkownika prosto do przełącznika wersji językowych serwisu, co jest kluczowe na stronach wielojęzycznych.

    Semantyczna struktura i role orientacyjne:

    • Wykorzystuj znaczniki HTML5, takie jak <main>, <nav>, <header>, <footer> oraz <aside>.
    • Wspieraj starsze technologie, dodając jawnie role ARIA (np. role="main", role="navigation").
    • Pamiętaj, że same role ułatwiają nawigację użytkownikom czytników, ale to (ang.) skip link jest kluczowy dla osób widzących, a korzystających tylko z klawiatury.
    • Stosuj nagłówki <h1>–<h6> na początku każdej sekcji treści – pozwalają one użytkownikom technologii wspomagających na szybkie „skakanie” po strukturze strony.
    • Dla osadzonych treści <iframe> zawsze dodawaj atrybut title, aby użytkownik wiedział, czy warto pominąć dany blok.

    Wyjątki i sytuacje szczególne

    Wymóg ten dotyczy wyłącznie bloków treści, które powtarzają się na wielu stronach w obrębie danej witryny. Jeśli strona jest unikalna (np. (ang.) landing page bez globalnego menu), implementacja mechanizmu pomijania nie jest formalnie wymagana, choć pozostaje dobrą praktyką.

    Przykłady implementacji

    Najczęstsze błędy

    • Pozostawienie linku „Przejdź do treści” ukrytego wizualnie nawet w momencie, gdy otrzyma on fokus klawiatury.
    • Brak mechanizmu pomijania na wybranych podstronach serwisu, mimo obecności powtarzalnego menu.
    • Skierowanie (ang.) skip linku do nieistniejącego identyfikatora lub niewłaściwej sekcji.
    • Brak automatycznego przeniesienia fokusu do celu linku po jego aktywacji.

    Najlepsze praktyki

    • Zamiast technicznego żargonu stosuj jasne komunikaty w języku strony, np. „Przejdź do wyszukiwarki”, „Przejdź do zmiany języka strony”, „Przejdź do treści głównej”.
    • Ogranicz liczbę linków do pomijania do niezbędnego minimum (zazwyczaj jeden wystarczy), aby nie komplikować struktury.
    • Regularnie weryfikuj, czy po dodaniu nowych elementów na stronie, kolejność tabulacji nadal zaczyna się od mechanizmu pomijania.
    • Upewnij się, że po aktywacji linku element docelowy otrzymuje fokus wizualny (tzw. (ang.) programmatic focus).

    Metody testowania

    • Testowanie manualne: Użyj klawisza Tab zaraz po odświeżeniu strony. Zweryfikuj widoczność linku i poprawność skoku.
    • NVDA: Skorzystaj z klawisza „D”, aby zweryfikować nawigację po punktach orientacyjnych (ang.) landmarks.
    • Narzędzie deweloperskie (ang.) Developer Tools: Sprawdź w drzewie DOM, czy identyfikator ((ang.) ID) docelowy jest poprawny.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 symulacji stron internetowych. Twoim zadaniem jest sprawdzenie, czy umożliwiają one szybkie dotarcie do głównej treści (pominięcie powtarzalnego menu).

    Jak to sprawdzić?

    1. Kliknij myszką obok białej ramki wybranego przykładu.
    2. Rozpocznij nawigację za pomocą klawisza Tab.
    3. Sprawdź, czy przed przejściem przez menu pojawia się specjalny link ukryty „Przejdź do treści”.
    4. Zatwierdź link klawiszem Enter i naciśnij ponownie Tab, aby sprawdzić czy fokus przeniósł Cię do artykułu głównego.

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

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

    #1 BŁĄD

    Problem: Brak mechanizmu pomijania powtarzających się bloków.
    Dlaczego: Użytkownik korzystający z klawiatury musi przejść przez każdy link w nawigacji, zanim dotrze do treści głównej.
    Naprawa: Dodaj link typu „Przejdź do treści” (Skip link) jako pierwszy element na stronie.

    #2 DOBRZE

    Dlaczego: Skip link jest obecny i ukryty do momentu otrzymania fokusu z klawiatury. Po jego aktywacji cel (main) otrzymuje fokus, dzięki czemu użytkownik z łatwością pomija całą nawigację.

    Ciekawostka: Gdybyśmy zastosowali niewidoczny przy użyciu klawiatury skip link, technicznie nie łamalibyśmy kryterium 2.4.1 (mechanizm omijania istniałby i działał), lecz stanowiołoby to naruszenie kryterium 2.4.7 Widoczny fokus (użytkownik nie widziałby na czym skupiony jest fokus). Z tego względu warto demonstrować odrębny, poprawny mechanizm – strukturę znaczników semantycznych.

    #3 DOBRZE

    Dlaczego: Zgodnie z WCAG, mechanizm pomijania bloków to nie tylko „skip linki”. Użycie poprawnej struktury semantycznej HTML5 (np. <header>, <nav>, <main>) tworzy tak zwane punkty orientacyjne (ang. landmarks). Pozwalają one użytkownikom technologii wspomagających (czytników ekranu) na błyskawiczne wywołanie menu struktury i skok prosto do głównej treści, w pełni realizując wymagania kryterium 2.4.1.

    #4 BŁĄD

    Problem: Skip link odwołuje się do nieistniejącego w dokumencie ID.
    Dlaczego: Po aktywacji linku fokus nigdzie się nie przenosi. Użytkownik po naciśnięciu klawisza Tab nadal wyląduje w nawigacji. To czyni mechanizm bezużytecznym.
    Naprawa: Upewnij się, że atrybut href linku odnosi się do poprawnego i istniejącego elementu (np. głównego kontenera wpisu).

    #5 DOBRZE

    Dlaczego: Dopuszczalne, a często pożądane jest posiadanie kilku linków skrótowych, np. „Przejdź do treści” i „Przejdź do wyszukiwarki”. Grupowanie ich w listę nienumerowaną (<ul>) to bardzo dobra praktyka – czytniki ekranu natychmiast informują użytkownika o liczbie dostępnych skrótów. Oba linki stają się widoczne przy użyciu klawiatury i skutecznie ułatwiają nawigację do kluczowych obszarów na stronie.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów