WCAG 2.4.3 Kolejność fokusu

Kryterium sukcesu 2.4.3 dba o to, by użytkownicy klawiatury i czytników ekranu napotykali interaktywne elementy strony w sensownej kolejności, dzięki czemu rozumieją stronę i mogą ją obsługiwać. To poziom A, a kryterium należy do normy EN 301 549 (punkt 9.2.4.3).

Czego wymaga kryterium

Jeśli po stronie internetowej można nawigować sekwencyjnie (np. klawiszem Tab), a kolejność nawigacji wpływa na znaczenie lub działanie, komponenty przyjmujące fokus otrzymują go w kolejności zachowującej znaczenie i funkcjonalność.

Kolejność fokusu nie musi piksel w piksel odwzorowywać układu wizualnego. Kryterium nie jest spełnione, gdy kolejność sprawia, że treść staje się myląca lub niemożliwa w użyciu. Błędy opisane przez W3C to m.in.:

• użycie tabindex do utworzenia kolejności, która narusza znaczenie lub działanie;
• umieszczenie okien dialogowych lub menu w kolejności fokusu daleko od elementu, który je otwiera.

Typowe błędy w sklepie internetowym

• tabindex="1", "2" … na elementach nagłówka, przez co fokus skacze po stronie, zanim trafi do normalnej kolejności;
• układ CSS (flexbox order, rozmieszczenie w gridzie), który pokazuje „Dodaj do koszyka” obok ceny, ale umieszcza przycisk na końcu DOM, po opiniach i produktach powiązanych;
• okienko tabeli rozmiarów lub szybkiego podglądu dołączone na końcu strony, przez co fokus do niego nie przechodzi i trzeba przejść tabulatorem przez całą stronę, by do niego dotrzeć;
• po zamknięciu szuflady koszyka fokus wraca na początek strony zamiast na przycisk koszyka;
• pola w procesie zamówienia w innej kolejności niż widoczna (kod pocztowy przed ulicą).

Jak to sprawdzić

Automatycznie: dla tego kryterium nie ma reguły axe-core. To, czy kolejność „zachowuje znaczenie”, wymaga oceny strony, dlatego potrzebna jest kontrola ręczna. (Dodatnie wartości tabindex nasz skaner zgłasza jako ostrzeżenie dotyczące dobrych praktyk, a nie jako błąd 2.4.3).

Ręcznie: naciskać Tab od początku strony i śledzić wskaźnik fokusu. Czy przechodzi przez nagłówek, treść główną i stopkę w sensownej kolejności? Na stronach produktów: wariant, ilość, „Dodaj do koszyka”. Otworzyć każde okienko i szufladę: fokus powinien do nich przejść, pozostać w nich, dopóki są otwarte, i wrócić do elementu wywołującego po zamknięciu. Wypełnić formularz zamówienia, używając tylko klawisza Tab.

Jak to naprawić

• Dopasować kolejność DOM do kolejności wizualnej i logicznej; unikać przestawiania elementów w CSS, jeśli zmienia to znaczenie.
• Usunąć dodatnie wartości tabindex; dla własnych elementów przyjmujących fokus używać 0, a dla elementów otrzymujących fokus ze skryptu -1.
• Po otwarciu okna dialogowego przenosić do niego fokus; po zamknięciu zwracać fokus do elementu wywołującego.
• Wstawiać treść dynamiczną (okienka, komunikaty o błędach) w DOM obok elementu, do którego należy.

Powiązane kryteria

• 2.1.1 Klawiatura — każda funkcja musi działać z klawiatury.
• 2.4.7 Widoczny fokus — użytkownicy muszą widzieć, gdzie jest fokus.
• 2.4.11 Fokus niezasłonięty (minimum) — elementy z fokusem nie mogą być zasłonięte.

Najczęstsze pytania

Czy kolejność fokusu musi odpowiadać kolejności wizualnej?

Nie dokładnie. WCAG wymaga, by kolejność zachowywała znaczenie i funkcjonalność. Drobne różnice są w porządku; przeskoki, przez które formularz lub okno dialogowe staje się mylące albo niemożliwe w obsłudze, nie spełniają kryterium.

Czy dodatni tabindex to błąd WCAG?

Nie automatycznie, ale W3C wymienia użycie tabindex do utworzenia kolejności fokusu, która narusza znaczenie lub działanie, jako częsty błąd. Wartości powyżej 0 prawie zawsze do tego prowadzą, więc lepiej ich unikać.

Dokąd powinien trafić fokus po otwarciu okienka?

Do okienka, a po jego zamknięciu z powrotem na przycisk, który je otworzył. W3C wymienia okna dialogowe umieszczone w kolejności fokusu daleko od elementu, który je wywołuje, jako błąd 2.4.3.