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

Kryterium sukcesu 2.4.1 oszczędza użytkownikom klawiatury i czytników ekranu przechodzenia na każdej stronie przez ten sam nagłówek, menu i pasek promocji, zanim dotrą do treści. W sklepie z dużym mega menu może to oznaczać dziesiątki naciśnięć klawisza Tab na stronę. To poziom A, a kryterium należy do normy EN 301 549 (punkt 9.2.4.1).

Czego wymaga kryterium

Dostępny jest mechanizm pozwalający pominąć bloki treści powtarzające się na wielu stronach internetowych.

WCAG nie narzuca jednej techniki. Wśród wystarczających technik wymienionych przez W3C są:

• link na początku strony, który przenosi do treści głównej („Przejdź do treści głównej”);
• link na początku powtarzanego bloku, który przenosi na jego koniec;
• punkty orientacyjne ARIA (<header>, <nav>, <main>, <footer> lub odpowiadające im role) wyznaczające obszary strony;
• nagłówki na początku każdej sekcji treści;
• rozwijane i zwijane menu.

W praktyce skip link razem z poprawnym punktem orientacyjnym <main> obsługuje zarówno osoby korzystające wyłącznie z klawiatury (które bez dodatkowych narzędzi nie mogą przeskakiwać między punktami orientacyjnymi), jak i użytkowników czytników ekranu.

Typowe błędy w sklepie internetowym

• brak skip linku, a przed treścią nagłówek z wyszukiwarką, kontem, listą życzeń, koszykiem, przełącznikiem walut i mega menu z 40 linkami;
• skip link, który prowadzi do nieistniejącej kotwicy albo do elementu, który nie może otrzymać fokusu;
• skip link, który pozostaje niewidoczny po otrzymaniu fokusu;
• brak punktu orientacyjnego <main> albo cała strona owinięta w elementy <div>;
• długi panel filtrów na stronach kategorii bez możliwości przeskoczenia do produktów.

Jak to sprawdzić

Automatycznie: nasz skaner sprawdza, czy strona oferuje co najmniej jeden mechanizm pomijania — skip link, punkt orientacyjny lub nagłówek (reguła bypass). Nie potrafi ocenić, czy link jest widoczny przy fokusie ani czy prowadzi we właściwe miejsce.

Ręcznie: załadować stronę i raz nacisnąć Tab. Powinien pojawić się link „Przejdź do treści”. Nacisnąć Enter, a potem znowu Tab: fokus powinien trafić na początek treści głównej, a nie z powrotem do menu. W czytniku ekranu wyświetlić listę punktów orientacyjnych i sprawdzić, czy jest dokładnie jeden obszar main.

Jak to naprawić

• Dodać skip link jako pierwszy element przyjmujący fokus w układzie motywu, prowadzący do <main id="main-content">.
• Upewnić się, że cel może otrzymać fokus (w razie potrzeby dodać tabindex="-1"), aby fokus rzeczywiście się przesuwał.
• Pokazywać skip link przy fokusie, z dobrym kontrastem.
• Używać semantycznych punktów orientacyjnych: <header>, <nav>, <main>, <footer>.
• Zaczynać każdą sekcję treści prawdziwym nagłówkiem.

Powiązane kryteria

• 2.4.3 Kolejność fokusu — skip link powinien być pierwszy w kolejności fokusu.
• 2.4.6 Nagłówki i etykiety — nagłówki muszą opisywać sekcję.
• 2.4.7 Widoczny fokus — skip link musi być widoczny przy fokusie.

Najczęstsze pytania

Czy WCAG 2.4.1 wymaga skip linku?

Nie wprost. WCAG wymaga mechanizmu pomijania powtarzających się bloków. Link „Przejdź do treści głównej” to najczęstsze rozwiązanie; punkty orientacyjne ARIA, takie jak main i nav, oraz nagłówki na początku sekcji również są wystarczającymi technikami.

Czy skip link może być ukryty?

Może być wizualnie ukryty do momentu otrzymania fokusu klawiatury, ale wtedy musi stać się widoczny. Link, który pozostaje niewidoczny po otrzymaniu fokusu, dezorientuje widzących użytkowników klawiatury.

Jakie bloki w sklepie trzeba móc pominąć?

Treść powtarzaną na wielu stronach: nagłówek, pasek ogłoszeń, główną nawigację i mega menu, a czasem długie panele filtrów przed listą produktów.