6 minut czytania
Jak zaprojektować wyraźny wskaźnik fokusu i sprawdzić, czy cały serwis da się obsłużyć klawiaturą — z odniesieniem do kryteriów WCAG 2.2.
Czym jest wskaźnik fokusu?
Wskaźnik fokusu pokazuje, który element strony jest aktualnie aktywny. Korzystają z niego osoby poruszające się klawiaturą, przełącznikami, sterowaniem głosowym czy z powiększeniem ekranu — bez niego tracą orientację po pierwszym naciśnięciu klawisza Tab.
Kryterium 2.4.7 „Widoczny fokus” (poziom AA) wymaga, by fokus klawiatury był widoczny na każdym interaktywnym elemencie.
Co zmienia WCAG 2.2?
WCAG 2.2 dodało kryteria, które doprecyzowują, jak fokus ma wyglądać i gdzie może się znaleźć.
2.4.11 Fokus niezasłonięty (minimum), poziom AA — aktywny element nie może być całkowicie przykryty np. przyklejonym nagłówkiem, banerem cookies czy czatem.
2.4.12 Fokus niezasłonięty (rozszerzony), poziom AAA — element z fokusem nie jest zasłonięty nawet częściowo.
2.4.13 Wygląd fokusu, poziom AAA — określa minimalny obszar i kontrast wskaźnika.
Jak zaprojektować dobry fokus?
Zapewnij kontrast wskaźnika co najmniej 3:1 względem sąsiednich kolorów (kryterium 1.4.11 „Kontrast elementów nietekstowych”).
Stosuj obrys o grubości co najmniej 2 px z odstępem od elementu — działa na jasnym i ciemnym tle.
Nie usuwaj domyślnego outline bez zamiennika; używaj selektora :focus-visible.
Projektuj stan fokusu razem ze stanami hover, active i disabled — w tej samej bibliotece komponentów.
Wskazówka Dobra praktyka: jeden wzorzec fokusu dla całego produktu.
Spójny wskaźnik łatwiej zauważyć, a zespołom łatwiej go utrzymać w kolejnych wersjach.
Jak to przetestować?
Przejdź stronę klawiszami Tab i Shift+Tab — kolejność powinna odpowiadać układowi treści.
Aktywuj przyciski i linki klawiszami Enter oraz Spacja.
Otwórz okno modalne: fokus powinien do niego trafić, a Escape — je zamknąć.
Sprawdź, czy przyklejone elementy nie zasłaniają aktywnego pola.
Checklista
Widoczność: Każdy interaktywny element ma wyraźny stan fokusu.
Kontrast: Wskaźnik ma kontrast co najmniej 3:1 z otoczeniem.
Kolejność: Kolejność fokusu odpowiada wizualnemu układowi treści.
Brak zasłaniania: Nagłówki i banery nie przykrywają aktywnego elementu.
