Funkcjonalność · Poziom A

2.4.1 Możliwość pominięcia bloków

Użytkownik powinien móc ominąć powtarzalne bloki i szybko przejść do właściwej treści.

Krótko

Jeśli na wielu stronach powtarza się menu, nagłówek, pasek filtrów albo duży blok linków, użytkownik powinien mieć sposób, żeby ten blok pominąć.

Problem w praktyce

Osoba korzystająca z klawiatury otwiera kolejną podstronę sklepu. Zanim dotrze do listy produktów, musi przejść przez logo, menu, wyszukiwarkę, koszyk, konto, baner i kilkanaście filtrów.

To kryterium nie wymaga idealnej struktury nagłówków. Nagłówki mogą pomagać, ale najprostszy i najczęstszy mechanizm to link „Przejdź do głównej treści”, który pojawia się po fokusu.

Kogo to dotyczy

  • Osób korzystających z klawiatury, które nie chcą za każdym razem przechodzić przez te same linki.
  • Osób korzystających z czytników ekranu, które odbierają stronę liniowo.
  • Osób z ograniczeniami ruchowymi, dla których każdy dodatkowy klawisz to realny wysiłek.
  • Osób korzystających z przełączników, sterowania głosem albo innych technologii wspomagających.
  • Wszystkich użytkowników w serwisach z długim menu, filtrami, rozbudowanym nagłówkiem i powtarzalnymi panelami.

Dobry przykład

  • Na początku strony jest link „Przejdź do głównej treści”.
  • Link staje się widoczny, gdy otrzyma fokus.
  • Link prowadzi do elementu `main` albo do początku głównej treści.
  • Po użyciu linku fokus lub punkt czytania trafia w sensowne miejsce.
  • Na stronie z filtrami można pominąć powtarzalny blok filtrów i przejść do wyników.

Zły przykład

  • Brak mechanizmu pominięcia długiego menu na każdej podstronie.
  • Skip link istnieje, ale jest zawsze ukryty i nie pojawia się po fokusu.
  • Skip link prowadzi do nieistniejącego identyfikatora.
  • Link prowadzi do początku strony, a nie do treści.
  • Użytkownik musi przechodzić przez kilkadziesiąt filtrów przed każdą listą wyników.

Przykłady kodu

Dobry przykład: skip link do głównej treści

Link jest pierwszy w kodzie i prowadzi do `main`.

Kod — HTML

<a class="skip-link" href="#main">
  Przejdź do głównej treści
</a>

<header>
  <nav>...</nav>
</header>

<main id="main">
  <h1>Lista szkoleń</h1>
</main>

Dobry przykład: link widoczny po fokusu

Link może być ukryty poza ekranem, ale musi pojawić się po otrzymaniu fokusu.

Kod — CSS

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
}

.skip-link:focus {
  top: 1rem;
}

Zły przykład: link prowadzi donikąd

Mechanizm wygląda poprawnie, ale cel nie istnieje.

Kod — HTML

<a class="skip-link" href="#content">
  Przejdź do treści
</a>

<main id="main">
  <h1>Lista szkoleń</h1>
</main>

Przykład graficzny

Źle

  1. Logo
  2. Menu
  3. Wyszukiwarka
  4. Koszyk
  5. Filtry
  6. Treść

Użytkownik musi za każdym razem przejść przez powtarzalne bloki.

Dobrze

  1. Przejdź do głównej treści
  2. Treść

Pierwszy link pozwala ominąć nagłówek, menu i inne powtarzalne elementy.

Statyczne demo pokazuje, że mechanizm pomijania bloków skraca drogę do właściwej treści.

Jak sprawdzić

  1. Wejdź na stronę i naciśnij `Tab` jako pierwszą akcję.
  2. Sprawdź, czy pojawia się link pomijania albo inny mechanizm przejścia do treści.
  3. Aktywuj go klawiszem `Enter` i sprawdź, czy trafiasz do głównej treści.
  4. Sprawdź, czy cel linku istnieje i jest unikalny.
  5. Przetestuj kilka podstron, nie tylko stronę główną.
  6. Na stronach z filtrami lub długimi panelami sprawdź, czy da się pominąć powtarzalny blok i przejść do wyników.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • obecność elementu `main`, nagłówków i landmarków,
  • część linków prowadzących do nieistniejących identyfikatorów,
  • brak typowego skip linku w prostych testach.

Automat nie oceni pewnie

  • czy mechanizm naprawdę oszczędza użytkownikowi powtarzalnej pracy,
  • czy skip link jest widoczny i czytelny po fokusu,
  • czy po aktywacji użytkownik trafia w logiczne miejsce,
  • czy powtarzalne filtry albo panele też wymagają mechanizmu pomijania.

Typowe błędy

  • Skip link ukryty przez `display: none` albo `visibility: hidden`.
  • Brak widocznego stylu fokusu dla skip linku.
  • Literówka w `href` albo brak pasującego `id`.
  • Link prowadzący do kontenera przed menu, a nie za menu.
  • Testowanie tylko myszą, bez klawiatury.

Źródła