WCAG 3.2.1 Po otrzymaniu fokusu

Kryterium sukcesu 3.2.1 sprawia, że nawigacja klawiaturą jest przewidywalna. Osoby korzystające z klawiatury, urządzenia przełącznikowego lub czytnika ekranu poruszają się po stronie, przenosząc fokus z jednego elementu na kolejny. Jeśli fokus na elemencie nagle otwiera nową stronę albo przerzuca kursor w inne miejsce, tracą orientację. To poziom A, część normy EN 301 549 jako punkt 9.3.2.1.

Czego wymaga kryterium

Gdy dowolny komponent interfejsu użytkownika otrzymuje fokus, nie może inicjować zmiany kontekstu. WCAG definiuje zmiany kontekstu jako duże zmiany, które mogą zdezorientować użytkownika, jeśli następują bez jego wiedzy: zmiany przeglądarki (klienta użytkownika), obszaru wyświetlania, fokusu lub treści, która zmienia znaczenie strony. Przykłady to otwarcie nowego okna, przeniesienie fokusu na inny komponent i przejście na nową stronę.

Zmiana treści nie zawsze jest zmianą kontekstu. Rozwinięcie menu, pokazanie wskazówki czy wyróżnienie pola przy fokusie są dozwolone. Innych wyjątków nie ma.

Typowe błędy w sklepie internetowym

• okienko newslettera lub pomocy otwiera się i przejmuje fokus, gdy tylko użytkownik klawiatury przejdzie klawiszem Tab do pola formularza;
• fokus na kategorii w menu od razu przenosi na stronę kategorii;
• fokus na miniaturze produktu otwiera okno galerii;
• skrypt zdejmuje fokus z pola, gdy tylko go otrzyma, więc nie da się w nim pisać;
• przejście klawiszem Tab na wybór języka lub waluty przeładowuje stronę.

Jak to sprawdzić

Automatycznie: nasz skaner nie ma reguły dla tego kryterium. To, czy fokus uruchamia nawigację, okienko lub przeskok fokusu, zależy od skryptów i od oczekiwań użytkownika, dlatego potrzebna jest kontrola ręczna.

Ręcznie: odłożyć mysz i przejść klawiszem Tab przez całą stronę: nagłówek, menu, filtry, karty produktów, formularze i stopkę. Kombinacją Shift+Tab wracać. Na każdym kroku zanotować, czy oprócz przesunięcia fokusu coś się wydarzyło: nowa strona, nowe okno lub karta, okno dialogowe albo przeskok fokusu w inne miejsce. Powtórzyć to w procesie zamówienia i na stronach konta.

Jak to naprawić

• Uruchamiać nawigację i okna dialogowe przy aktywacji (kliknięcie, Enter, spacja), a nie przy zdarzeniach focus lub focusin.
• Pokazywać pomoc jako tekst na stronie lub podpowiedź, która nie przejmuje fokusu.
• W rozbudowanych menu można otwierać podmenu przy fokusie, ale nie przechodzić na nową stronę, dopóki link nie zostanie aktywowany.
• Usunąć skrypty, które wywołują blur() na elementach z fokusem.

Powiązane kryteria

• 3.2.2 Podczas wprowadzania danych — ta sama zasada przy zmianie wartości.
• 2.4.3 Kolejność fokusu — fokus przesuwa się w sensownej kolejności.
• Lista kontrolna WCAG 2.2 — wszystkie kryteria A i AA w skrócie.

Najczęstsze pytania

Czym jest zmiana kontekstu w WCAG?

To duża zmiana, która może zdezorientować użytkownika, jeśli się jej nie spodziewał: otwarcie nowego okna lub strony, przeniesienie fokusu na inny komponent albo zmiana treści, która zmienia znaczenie strony.

Czy pokazanie podpowiedzi lub listy rozwijanej przy fokusie jest dozwolone według 3.2.1?

Tak, jeśli to tylko zmiana treści. Rozwijające się menu lub pojawiająca się wskazówka są w porządku; przeniesienie fokusu gdzie indziej, nowa strona lub nowe okno — nie.

Czy narzędzie automatyczne może sprawdzić 3.2.1?

Nie. To, czy coś się zmienia, gdy element otrzymuje fokus, zależy od skryptów i trzeba to sprawdzić ręcznie, przechodząc przez stronę klawiszem Tab.