Każda strona ma trasę, której większość odwiedzających nigdy nie widzi: kolejność, w jakiej klawisz Tab przeskakuje z jednego elementu sterującego na następny. Dla kogoś, kto korzysta z sieci bez myszy, ta trasa to cała witryna.
Pułapka klawiaturowa to miejsce, w którym trasa się urywa. Fokus wchodzi w komponent i już z niego nie wychodzi. Na zrzucie ekranu strona wygląda całkowicie poprawnie, ale wszystko za tym punktem stało się nieosiągalne.
Dwa miejsca, w których zdarza się to prawie każdej witrynie
Pierwsze to pasek cookie. Pojawia się nad stroną i przez czas wyświetlania zatrzymuje fokus, co akurat jest poprawne. Problem zaczyna się chwilę później: odwiedzający przechodzi tabulatorem przez przyciski „Akceptuję” i „Ustawienia” i ląduje znowu na „Akceptuję”, i tak bez końca, ponieważ pasek trzyma fokus wewnątrz siebie, a zamknąć da się go tylko kliknięciem myszy. Odwiedzający nie dociera ani do strony, ani nie usuwa tego, co mu ją zasłania.
Drugie to mega menu. Panel kategorii otwiera się po najechaniu myszą i zostaje w kolejności tabulacji także wtedy, gdy wizualnie zniknie. Fokus wchodzi w ukryty panel z czterdziestoma odnośnikami, a potem wynurza się w miejscu, którego nikt się nie spodziewa. Na ekranie nie widać, gdzie w tej chwili jest fokus. Z perspektywy odwiedzającego strona przestała reagować.
Oba przypadki to zwyczajne błędy w zwyczajnym kodzie. Żaden z nich nie pojawi się w automatycznym raporcie jako czerwona linia.
Dlaczego kontrola reguł tego nie zauważa
axe-core, silnik stojący za wieloma automatycznymi kontrolami dostępności, w tym naszą, czyta stronę. Przechodzi model obiektowy dokumentu, stosuje około stu reguł do znalezionych elementów i zgłasza te, które nie przechodzą. Powie ci, że obraz nie ma tekstu alternatywnego albo że pole formularza nie ma etykiety, i będzie miał rację.
Czego nie robi, to naciśnięcie klawisza. Każda reguła, którą uruchamia, to pytanie o stan kodu strony w jednej chwili. Pułapka klawiaturowa nie jest jednak stanem, tylko zachowaniem w czasie: naciśnij Tab, zobacz, dokąd poszedł fokus, naciśnij Tab jeszcze raz i stwierdź, że donikąd. W kodzie nie ma atrybutu, który mówiłby „ten komponent nie odda fokusu”. Ta odmowa jest zaszyta w procedurze obsługi zdarzenia, która uruchamia się dopiero przy prawdziwym naciśnięciu.
Jest i drugi powód. Zatrzymanie fokusu to technika w pełni uprawniona: okno modalne ma trzymać fokus, dopóki jest otwarte. Reguła zgłaszająca każdą pułapkę fokusu myliłaby się w większości przypadków. Różnica między pułapką poprawną a zepsutą polega na tym, czy komponent zwalnia fokus wtedy, kiedy powinien, a to widać wyłącznie wtedy, gdy się tego spróbuje.
Co zapisuje audyt Inkluso
Płatny audyt robi to, czego skaner nie potrafi: naciska Tab. Prawdziwa przeglądarka ładuje stronę i przechodzi ją naciśnięcie po naciśnięciu, w audycie standardowym do trzech stron, w sklepie na Shoptecie do czterech, począwszy od strony głównej.
Raport zawiera tabelę pod nagłówkiem Zarejestrowana kolejność fokusu obejmującą pierwszych czterdzieści przystanków na każdej stronie. Przy każdym przystanku podaje element, który otrzymał fokus, jego tekst lub etykietę oraz informację, czy widoczny wskaźnik fokusu został narysowany, nie został, czy nie dało się tego ustalić. Ta tabela bywa bardziej użyteczna niż same ustalenia, bo pokazuje trasę, którą użytkownik klawiatury musi realnie przejść przez twój koszyk.
Przejście zgłasza cztery rzeczy:
- Fokus utknął na jednym elemencie, WCAG 2.1.2 Bez pułapki na klawiaturę, EN 301 549 V3.2.1 punkt 9.2.1.2
- Fokus krąży, nie docierając do większości strony, WCAG 2.1.2 Bez pułapki na klawiaturę, EN 301 549 punkt 9.2.1.2
- Fokus zniknął w środku strony, WCAG 2.4.3 Kolejność fokusu, EN 301 549 punkt 9.2.4.3
- Brak widocznego wskaźnika fokusu, WCAG 2.4.7 Widoczny fokus, EN 301 549 punkt 9.2.4.7
Przy każdym ustaleniu drukowany jest powiązany wymóg: punkt normy EN 301 549 oraz krajowy przepis, który cytuje twój raport. Jest to ustawa z 26 kwietnia 2024 r. w Polsce, zákon č. 424/2023 Sb. w Czechach, BFSG w Niemczech, BaFG w Austrii albo zákon č. 351/2022 Z. z. na Słowacji. Przepis wybierany jest dla każdego raportu osobno, nie według języka, więc raport po niemiecku może cytować przepis austriacki.
Trzyminutowy test klawiatury
Dwa najgorsze przypadki sprawdzisz sam, na dowolnej stronie, od razu.
- Kliknij pasek adresu przeglądarki i naciśnij Tab. Fokus powinien przejść na pierwszy element strony.
- Naciskaj Tab dalej i obserwuj, czy zawsze widać, gdzie jest fokus.
- Otwórz menu i pasek cookie tylko klawiaturą i zamknij je klawiszem Escape. Jeśli fokus utknie, masz pułapkę.
Czego nie twierdzimy
Przejście to ustalenie heurystyczne z jednego automatycznego przebiegu. Nie wchodzi do twojej punktacji ani oceny, nigdy nie pojawia się jako potwierdzone naruszenie, a przy każdym ustaleniu prosimy o ręczną weryfikację, zanim potraktujesz je jako usterkę. Wolno ładujący się widget potrafi wytworzyć ten sam wzorzec co prawdziwy błąd. Przejście obejmuje najwyżej trzy strony, w sklepie na Shoptecie cztery, w kolejności znalezionej przez crawlera, nie znajdzie więc pułapki na stronie ani w procesie, do którego nie dotarło, a czyste przejście nie jest dowodem, że pułapki nie ma. To nie jest pełny audyt ręczny i nie sprzedajemy tego jako pełnego audytu ręcznego. To zapis tego, co się wydarzyło, gdy ktoś naprawdę nacisnął Tab na twojej stronie.
Sprawdź, jak wypada Twoja strona
Bezpłatne skanowanie sprawdza Twoją stronę pod kątem WCAG 2.1 AA i pokazuje pierwsze wyniki w kilka minut.
Ten artykuł ma charakter informacyjny i nie stanowi porady prawnej.