Kolejność fokusa

Czego wymaga kryterium

Naciśnięcie klawisza Tab przez osobę nawigującą klawiaturą powinno przenosić fokus między elementami interaktywnymi w kolejności umożliwiającej wykonanie każdego zadania bez utraty kontekstu. W układach LTR (od lewej do prawej) oznacza to niemal zawsze porządek od góry do dołu i od lewej do prawej. Kolejność nie musi być identyczna z wizualną, lecz każde odstępstwo musi zachowywać sens — na przykład łącze „Przejdź do stopki” może znajdować się poza głównym przepływem, o ile reszta strony jest logicznie uporządkowana.

Typowe błędy, przed którymi chroni to kryterium, to okna dialogowe ukrywające fokus, siatki z przestarzałą kolejnością Tab po zmianie kolejności elementów metodą przeciągnij i upuść, a także CSS przeorganizowujący treść wizualnie przy zachowaniu oryginalnej kolejności DOM.

Jak spełnić kryterium

• Należy budować DOM w kolejności czytania. Jeśli układ wizualny różni się od niej, właściwości order CSS Grid lub Flexbox powinno się stosować ostrożnie — to właśnie porządek źródłowy wyznacza ścieżkę klawisza Tab.
• Po otwarciu okna modalnego należy przenieść do niego fokus i utrzymywać go wewnątrz do momentu zamknięcia. Po zamknięciu fokus powinien wrócić do elementu, który wywołał okno.
• Nigdy nie należy używać dodatnich wartości tabindex (np. tabindex="3"). Tworzą one własne kolejności kolidujące z DOM, które psują się przy każdej zmianie strony.
• W przypadku list z możliwością przeciągania należy aktualizować kolejność DOM tak, aby odpowiadała nowej kolejności wizualnej i zachować synchronizację ścieżki Tab.
• Weryfikację przeprowadza się, naciskając Tab od paska adresu i przechodząc przez każdy element fokusowany na stronie. Każde poczucie „zagubiania się” doświadczają również użytkownicy.

Typowe błędy

• Okno modalne otwiera się, ale fokus pozostaje na stronie w tle. Klawisz Tab cyklicznie przechodzi przez ukryte elementy, podczas gdy okno modalne unosi się bez możliwości dostępu.
• Wysuwane menu mobilne otwiera się, a fokus pozostaje w treści strony. Użytkownicy czytników ekranu nie mogą odnaleźć dopiero co wyświetlonej zawartości.
• flex-direction: row-reverse odwraca kolejność wizualną; kolejność DOM pozostaje niezmieniona; klawisz Tab porusza się teraz od prawej do lewej, podczas gdy czytanie odbywa się od lewej do prawej.
• Własne wartości tabindex rozrzucone po formularzu, a elementy dodane później dziedziczą tabindex="0" i lądują na końcu kolejności.
• Automatyczne przenoszenie fokusa na wyskakujące okno „subskrypcji” pojawiające się 8 sekund po załadowaniu strony — wyrywające fokus od czytającego użytkownika.

Dlaczego to ważne

Kolejność fokusa jest klawiaturowym odpowiednikiem kolejności czytania. Gdy jest zaburzona, korzystanie ze strony nie jest jedynie wolniejsze — staje się niekoherentne. Osoby z niepełnosprawnościami ruchowymi nawigujące wyłącznie klawiszami Tab i Shift+Tab mogą trafić do błędnej sekcji formularza, całkowicie pominąć wymagane pole lub stracić orientację na długiej stronie za sprawą jednego źle umiejscowionego elementu sterującego.