Zasada 2: Funkcjonalność 2.4 Możliwość nawigacji

2.4.3 Kolejność fokusu

WCAG 2.4.3 Focus Order

W skrócie

Kolejność, w jakiej klawisz Tab przechodzi przez elementy, jest logiczna i zgodna z sensem strony.

Poziom
A Podstawowe minimum – bez tego część osób w ogóle nie skorzysta ze strony.
Czy to obowiązkowe?
Wymagane prawem
Kto w zespole odpowiada
Programowanie
Jak to wykryć
Tylko test ręczny

Wyjaśnienie prostym językiem: Kolejność przechodzenia po stronie

Komu i dlaczego to pomaga

Skaczący fokus (np. z nagłówka do stopki, a potem do środka formularza) dezorientuje osoby niewidome i korzystające z klawiatury.

  • Osoby niewidome
  • Osoby z niepełnosprawnością ruchową
  • Osoby z trudnościami poznawczymi

Jak zrobić to dobrze

  • Nie używaj tabindex > 0. Układaj elementy w kodzie w logicznej kolejności.
  • Zarządzaj fokusem w oknach modalnych (przenieś fokus do okna, zatrzymaj go w nim, przywróć po zamknięciu).

Najczęstsze błędy

  • Dodatnie wartości tabindex (tabindex="3") zmieniające naturalną kolejność.
  • Okno modalne, po którego otwarciu fokus zostaje pod spodem.
  • Elementy przestawione CSS-em w innej kolejności niż w kodzie.

Jak to sprawdzić

  1. Przejdź Tabem przez stronę i formularze – czy fokus idzie w kolejności czytania?
  2. Otwórz okno dialogowe – czy fokus do niego przechodzi, a po zamknięciu wraca na przycisk, który je otworzył?

Tylko test ręczny. Automat tego nie sprawdzi – potrzebny jest test ręczny lub audyt ekspercki.

Czy to obowiązkowe?

Wymagane prawem

Kryterium poziomu A z WCAG 2.1 – obowiązkowe dla podmiotów publicznych (ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych) oraz dla firm objętych European Accessibility Act (ustawa o zapewnianiu spełniania wymagań dostępności przez niektóre produkty i usługi). Brak zgodności trzeba wykazać w deklaracji dostępności.

Naucz się tego w praktyce

Zobacz wszystkie kursy dostępności

Powiązane kryteria

1.3.2

Zrozumiała kolejność

Poziom A Wymagane prawem

Jeśli kolejność czytania ma znaczenie, kolejność elementów w kodzie musi być taka sama jak ta widoczna na ekranie.

2.1.1

Klawiatura

Poziom A Wymagane prawem

Wszystko, co da się zrobić myszą, musi dać się zrobić samą klawiaturą: menu, przyciski, formularze, suwaki, okna dialogowe, odtwarzacze.

2.4.7

Widoczny fokus

Poziom AA Wymagane prawem

Element, na którym jest fokus klawiatury, musi być wyraźnie widoczny (obramowanie, podświetlenie).

Ostatnia aktualizacja: .
Źródło: Understanding SC 2.4.3: Focus Order – oficjalne objaśnienie W3C (po angielsku).