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

2.4.13 Wygląd fokusu

WCAG 2.4.13 Focus Appearance

W skrócie

Wskaźnik fokusu jest duży i kontrastowy: co najmniej tak duży jak obramowanie o grubości 2 px wokół elementu i z kontrastem 3:1 między stanem z fokusem i bez.

Poziom
AAA Najwyższy poziom – dobrowolny, warto go stosować tam, gdzie się da.
Czy to obowiązkowe?
Poziom AAA – dobrowolne · od WCAG 2.2
Kto w zespole odpowiada
Projektowanie UX/UI, Programowanie
Jak to wykryć
Częściowo automatyczne

Komu i dlaczego to pomaga

Słabowidzący użytkownicy klawiatury muszą łatwo dostrzec fokus.

  • Osoby słabowidzące
  • Osoby z niepełnosprawnością ruchową

Jak zrobić to dobrze

  • Stosuj outline min. 2 px w kolorze kontrastującym z tłem i elementem.

Najczęstsze błędy

  • Cienki, 1-pikselowy, jasny fokus.

Jak to sprawdzić

  1. Sprawdź grubość i kontrast wskaźnika fokusu.

Częściowo automatyczne. Narzędzia wykryją część problemów (np. brak atrybutu), ale ocena jakości wymaga człowieka.

Czy to obowiązkowe?

Powiązane kryteria

2.4.7

Widoczny fokus

Poziom AA Wymagane prawem

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

1.4.11

Kontrast elementów nietekstowych

Poziom AA Wymagane prawem

Elementy interfejsu (obramowania pól, przyciski, przełączniki, wskaźnik fokusu) i istotne części grafik (linie wykresu, ikony) muszą mieć kontrast co najmniej 3:1 z otoczeniem.

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