Logiczna kolejność tabulatora podąża za treścią

Naciśnięcie klawisza Tab powoduje przechodzenie fokusu stałą trasą przez stronę. Ta trasa to kolejność tabulacji, a jej poprawne ustalenie pomaga użytkownikom zachować orientację. 🧭

Domyślnie kolejność tabulacji odpowiada kolejności źródłowej — sekwencji elementów w kodzie HTML od góry do dołu — a nie temu, co widać na ekranie.

Należy dążyć do tego, aby fokus poruszał się w tej samej kolejności, w której użytkownicy czytają stronę. Najpierw nagłówek, potem główna treść, a na końcu stopka — to naturalny układ.

Narzędzia układu, takie jak flexbox order, przesuwają elementy wizualnie, ale nie zmieniają DOM. Fokus nadal podąża za kolejnością źródłową, więc oba układy mogą się różnić.

Gdy CSS zmienia kolejność elementów, użytkownik klawiatury może niespodziewanie przeskakiwać wstecz i naprzód. Rozwiązaniem jest dopasowanie kolejności HTML do kolejności wizualnej.

Dodatni tabindex, na przykład 3, wymusza przeniesienie elementu na początek kolejności. Niemal zawsze tworzy to zagmatwany i trudny w utrzymaniu bałagan.

Zamiast łatać problem za pomocą tabindex, należy po prostu umieścić elementy we właściwej kolejności w znacznikach. Poprawna kolejność źródłowa nie wymaga specjalnych atrybutów.

Element z właściwością display none całkowicie opuszcza kolejność tabulacji. Po ponownym wyświetleniu po cichu wraca na swoje miejsce w DOM.

Gdy JavaScript wstrzykuje nowe elementy sterujące, trafiają one tam, gdzie zostaną dodane. Należy wstawiać je w sensownym miejscu, aby zachować logiczną kolejność.

Okno dialogowe dodane na końcu strony może pozostawić fokus daleko od właściwego miejsca. Dobre zarządzanie fokusem przenosi użytkownika do modalu po jego otwarciu.

Sprawdzenie jest proste. Należy przejść klawiszem Tab od początku i upewnić się, że fokus porusza się w logicznej kolejności, bez zaskakujących przeskoków po ekranie.

Należy utrzymywać ruch fokusu zgodny ze sposobem czytania strony. Trzeba dopasować kolejność źródłową do układu wizualnego, unikać dodatniego tabindex i przetestować wynik klawiszem Tab. ✅