- Poziom
- A
- Od wersji
- WCAG 2.0
- Pozycje
- 74 / 193
2.4.1 Możliwość pominięcia bloków
Osoba korzystająca z klawiatury potrzebuje sposobu, by ominąć powtarzający się nagłówek i nawigację i przejść do treści.
/ Czego wymaga
Większość stron zaczyna się od tego samego nagłówka, logo, wyszukiwarki i nawigacji. Osoba z myszą omija je wzrokiem. Osoba korzystająca z klawiatury musi na każdej stronie przejść klawiszem Tab przez każdy link w tym bloku, zanim dotrze do treści, a użytkownik czytnika ekranu za każdym razem słyszy go od nowa. Dla osób piszących wskaźnikiem na głowę, przełącznikiem albo jedną ręką te dodatkowe naciśnięcia na każdej stronie to realny koszt czasu i wysiłku.
Kryterium wymaga mechanizmu pomijania bloków powtarzanych na wielu stronach i nie narzuca, jaki ma być. W3C wymienia kilka wystarczających technik: link pomijający u góry strony, który przenosi do głównej treści, nagłówki na początku każdej sekcji, obszary kluczowe takie jak main i nav oraz ramki z tytułami. Link pomijający, który jest ukryty, dopóki nie dostanie fokusu, spełnia kryterium. Link, który wskazuje na nieistniejący cel, swojego zadania nie spełnia.
/ Jak strony go nie spełniają
- Nie ma linku pomijającego, obszaru main ani nagłówka na początku treści, więc jedyna droga to Tab przez cały nagłówek strony.
- Link pomijający wskazuje na id, którego nie ma na stronie, więc jego uruchomienie nic nie daje.
- Link pomijający ukryto przez display: none, co usuwa go nie tylko z widoku, ale też z kolejności klawiatury.
- Skrypt przechwytuje link pomijający, żeby animować przewijanie, i zostawia fokus w nagłówku, więc następny Tab wraca do nawigacji.
- Element iframe nie ma tytułu, więc użytkownik czytnika ekranu nie wie, co jest w ramce ani czy ją pominąć.
/ Jak sprawdzić samodzielnie
- Wczytaj stronę, kliknij w pasek adresu i naciśnij Tab jeden raz. Link w rodzaju Przejdź do treści powinien pojawić się jako pierwsze albo jedno z pierwszych zatrzymań.
- Naciśnij na nim Enter, a potem znowu Tab. Fokus powinien przejść do pierwszej kontrolki w głównej treści, a nie wrócić do nawigacji.
- W panelu Elements w DevTools sprawdź, czy href linku odpowiada id istniejącego elementu i czy strona ma jeden element main.
- W darmowym czytniku ekranu, na przykład NVDA, naciskaj D, by skakać między obszarami kluczowymi, i H, by skakać między nagłówkami, i sprawdź, czy tą drogą da się dojść do głównej treści.
- Sprawdź, czy każdy element iframe ma atrybut title, który nazywa jego zawartość.
/ Jak to naprawić
- Dodaj <a href="#main">Przejdź do treści</a> jako pierwszy element przyjmujący fokus w body, a kontenerowi treści nadaj id="main".
- Oznacz obszary elementami header, nav, main i footer, z dokładnie jednym main na stronie.
- Przesuń link pomijający poza ekran klasą ukrywającą wizualnie i pokaż go na :focus. Nie używaj display: none ani visibility: hidden.
- Jeśli w Twoim teście fokus nie trafia do celu, dodaj elementowi docelowemu tabindex="-1".
- Nadaj każdemu elementowi iframe atrybut title, który opisuje, co jest w środku.
/ Co sprawdza nasz skaner
Temu kryterium odpowiadają cztery testy. no-skip-link zgłasza stronę, która ma obszar main, ponad dziesięć zatrzymań tabulatora przed nim i żadnego linku pomijającego wśród pierwszych sześciu. Jedna reguła HTML_CodeSniffer zgłasza linki wewnątrz strony, których docelowe id nie istnieje, druga zgłasza elementy iframe bez tytułu, podobnie jak reguła frame-title z axe-core. Żaden test nie uruchamia linku pomijającego, by zobaczyć, gdzie trafia fokus.
/ Kto je łamie, według naszych pomiarów
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Czy WCAG wymaga linku „Przejdź do treści”?
Nie z nazwy. Kryterium 2.4.1 wymaga mechanizmu pomijania powtarzanych bloków, a W3C uznaje za wystarczające techniki także obszary kluczowe i strukturę nagłówków. Link pomijający i tak warto dodać, bo przeglądarki nie mają wbudowanego polecenia klawiatury do skakania między obszarami lub nagłówkami, więc widzące osoby korzystające z klawiatury bez czytnika ekranu są zdane właśnie na niego.
Czy link pomijający może być ukryty?
Tak, pod warunkiem że staje się widoczny, gdy dostaje fokus z klawiatury, i zostaje w kolejności tabulacji. Przesuń go poza ekran i przywróć na :focus. Link ukryty przez display: none albo visibility: hidden w ogóle nie przyjmuje fokusu, a taki, który z fokusem pozostaje niewidoczny, każe widzącym osobom korzystającym z klawiatury zgadywać, gdzie są.
Dlaczego mój link pomijający nie przenosi fokusu?
Najczęstsze przyczyny to href wskazujący na id, którego nie ma na stronie, obsługa kliknięcia wywołująca preventDefault, żeby animować przewijanie, albo cel, którego przeglądarka nie traktuje jako punktu startu dla następnego naciśnięcia Tab. Popraw id, usuń obsługę kliknięcia albo przenoś w niej fokus i dodaj elementowi docelowemu tabindex="-1".