brak logicznego porządku w tabulacji

Brak logicznego porządku w tabulacji to usterka dostępności utrudniająca nawigację po formularzu za pomocą klawiatury.

Na czym polega brak logicznego porządku w tabulacji

Brak logicznego porządku w tabulacji oznacza, że przechodzenie klawiszem Tab między elementami interfejsu nie odpowiada ich znaczeniu ani układowi widocznemu na ekranie. Użytkownik może zostać przeniesiony z pola imię do przycisku znajdującego się w innej części formularza, następnie do pola adresowego, a dopiero później do pola nazwiska. Taki przebieg utrudnia obsługę formularza bez myszy i zwiększa ryzyko wpisania danych w niewłaściwe miejsce.

W typowej stronie internetowej kolejność tabulacji wynika przede wszystkim z kolejności elementów w drzewie DOM, czyli strukturze dokumentu HTML odczytywanej przez przeglądarkę. Znaczenie mogą mieć także atrybuty tabindex, skrypty JavaScript, elementy interfejsu otwierane dynamicznie oraz sposób zarządzania fokusem. Samo wizualne ułożenie pól za pomocą CSS nie musi zmieniać kolejności, w której klawisz Tab przechodzi między kontrolkami.

Źródła nieprawidłowej kolejności fokusu

Częstą przyczyną jest niezgodność kolejności kodu HTML z kolejnością prezentowaną użytkownikowi. Przykładowo formularz może zawierać najpierw wszystkie pola przeznaczone dla lewej kolumny, a następnie pola prawej kolumny, podczas gdy układ CSS pokazuje je w kolejności wierszowej. Podobny problem może powstać po użyciu właściwości order w układzie Flexbox albo po zastosowaniu CSS Grid. Elementy mogą wyglądać poprawnie, ale fokus nadal porusza się według struktury dokumentu.

Problemy powoduje również nieprawidłowe stosowanie atrybutu tabindex. Wartość tabindex="0" pozwala włączyć element do naturalnej kolejności tabulacji, natomiast wartość -1 usuwa go z przechodzenia klawiszem Tab, pozostawiając możliwość ustawienia fokusu skryptem. Dodatnie wartości, takie jak tabindex="1" lub tabindex="2", tworzą osobną kolejność przed elementami o naturalnym fokusu. Przy większej liczbie kontrolek szybko prowadzi to do trudnej do przewidzenia nawigacji i wymaga aktualizowania wielu wartości po każdej zmianie formularza.

Nieprawidłowość może pojawić się także wtedy, gdy skrypt po otwarciu okna dialogowego nie przenosi fokusu do jego zawartości albo po zamknięciu dialogu nie zwraca fokusu do elementu, który go otworzył. W formularzach wieloetapowych znaczenie ma również miejsce ustawienia fokusu po przejściu do następnego etapu. Użytkownik powinien trafić do nowo dostępnego nagłówka lub pierwszego pola tego etapu, a nie do przypadkowego elementu znajdującego się dalej w dokumencie.

Sprawdzanie tabulacji i relacji między polami

Weryfikację należy rozpocząć od obsługi strony wyłącznie klawiaturą. Po użyciu klawisza Tab powinien być widoczny wskaźnik fokusu, a jego położenie powinno przesuwać się zgodnie z logicznym przebiegiem zadania. W formularzu rejestracyjnym naturalny porządek może obejmować kolejno nazwę użytkownika, adres poczty elektronicznej, hasło, potwierdzenie hasła, zgody i przycisk wysłania. Klawisz Shift+Tab powinien przenosić fokus w kierunku przeciwnym, bez pomijania ważnych kontrolek.

Podczas analizy warto sprawdzić, czy każde pole ma prawidłowo powiązaną etykietę, czy grupy przycisków radiowych i pól wyboru mają opis oraz czy elementy wyłączone są pomijane w sposób zgodny z ich stanem. Należy odróżnić element, który jest niedostępny z założenia, od elementu przypadkowo usuniętego z kolejności tabulacji przez tabindex="-1". Kontrola w narzędziach deweloperskich pozwala porównać kolejność DOM z kolejnością wizualną i wykryć dodatnie wartości tabindex.

Istotne jest także sprawdzenie widoczności fokusu. Zastosowanie outline: none bez zastąpienia go innym wyraźnym oznaczeniem może sprawić, że użytkownik nie wie, które pole jest aktywne. Test powinien obejmować pola obowiązkowe, komunikaty błędów, rozwijane listy, przyciski oraz elementy pojawiające się po wykonaniu działania. Kryterium sukcesu WCAG 2.4.3 dotyczące kolejności fokusu wymaga, aby kolejność przechodzenia przez elementy zachowywała znaczenie i sposób działania treści.

Porządkowanie formularza w kodzie i podczas naprawy

Najtrwalszym rozwiązaniem jest uporządkowanie struktury HTML tak, aby kolejność elementów odpowiadała logicznemu przebiegowi obsługi. CSS powinien służyć do prezentacji, a nie do całkowitego odwracania kolejności interaktywnych kontrolek. Jeżeli zmiana struktury jest niemożliwa, należy ograniczyć użycie dodatnich wartości tabindex i świadomie zarządzać fokusem tylko w sytuacjach wymagających reakcji na zmianę widoku, otwarcie dialogu lub przejście do kolejnego etapu.

W przypadku interfejsu generowanego przez JavaScript trzeba sprawdzić, czy nowe elementy otrzymują właściwy fokus, czy elementy ukryte nie pozostają dostępne dla klawiatury oraz czy zamykane komponenty nie pozostawiają fokusu w niewidocznej części dokumentu. Po wprowadzeniu zmian należy ponownie przejść cały formularz klawiszami Tab i Shift+Tab, sprawdzić obsługę komunikatów walidacyjnych oraz wykonać test w aktualnie używanej przeglądarce. Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów i komputerów PC, w tym diagnostyką problemów z oprogramowaniem oraz działaniem aplikacji używanych na komputerach.