Wygląd fokusu

Co wymaga kryterium

Kryterium 2.4.7 (Fokus widoczny) mówi, że wskaźnik musi istnieć. Kryterium 2.4.13 (Wygląd fokusu) precyzuje, jak ma wyglądać. Aby spełnić wymaganie, wskaźnik fokusu musi:

1. Mieć obszar co najmniej tak duży jak obwód 2 pikselów CSS wokół sfokusowanej kontrolki lub linię o grubości 1 px o tej samej łącznej powierzchni.
2. Osiągać kontrast 3:1 między stanem sfokusowanym i niefokusowanym tych samych pikseli.
3. Nie być przesłonięty przez inną treść (co obejmuje też zakres 2.4.11 i 2.4.12).

To pierwszy raz, gdy WCAG podaje liczby dotyczące stylizacji fokusu, i kryterium to zmieniło sposób, w jaki systemy projektowania obsługują style klawiatury. Należy oczekiwać, że każdy audyt dostępności w 2026 roku wymieni je z nazwy.

Jak spełnić wymaganie

• Używaj jednolitego konturu o grubości co najmniej 2 px. Typowy wzorzec: outline: 2px solid currentColor; outline-offset: 2px;.
• Wybierz kolor fokusu osiągający kontrast 3:1 względem przyległego koloru, nie tylko tła strony — przyciski są umieszczane na stanach hover, gradientach, obrazach.
• Dla trybu ciemnego i jasnego dostarcz dwa kolory fokusu i przełączaj je przez prefers-color-scheme lub token themingu.
• Unikaj polegania na poświacie lub pierścieniu box-shadow o niskim kontraście; jeśli używasz box-shadow, nadaj mu twardą krawędź i odpowiednią grubość.
• Preferuj :focus-visible, by użytkownicy myszy nie widzieli pierścienia, ale upewnij się, że aktywuje się przy każdym fokusu klawiaturze, w tym fokusu programowym.

:focus-visible {
  outline: 2px solid #1d4ed8;       /* 3:1 na białym i szarych stanach hover */
  outline-offset: 2px;
  border-radius: inherit;
}

Typowe błędy

• Kontury fokusu o grubości 1 px (domyślne w większości bibliotek komponentów sprzed 2023).
• Markowe-niebieskie pierścienie fokusu na przycisku w stanie hover tego samego markowego błękitu — kolor identyczny, kontrast 1:1.
• Fokus stylizowany wyłącznie miękkim box-shadow bez zdefiniowanej krawędzi, zanikającym na wzorzystych tłach.
• Niestandardowe pola, gdzie stan fokusu zmienia tylko kolor obramowania bez zwiększania grubości lub kontrastu — zbyt subtelny, by był zaliczany.
• „Wewnętrzne” pierścienie fokusu na małych przyciskach z ikoną, malowane wewnątrz obszaru trafienia 16×16 px i stające się niewidoczne za glifem ikony.
• Komponenty przechodzące na białych tłach, ale zawodzące w wariancie ciemnym, którego nikt nie przetestował.

Praktyczna lista kontrolna kontrastu

Dla każdego komponentu interaktywnego wypisz wszystkie stany powierzchni, na których może się znaleźć (domyślny, hover, wciśnięty, wyłączony, w karcie, w modalu, na obrazie hero) i zweryfikuj, czy pierścień fokusu osiąga 3:1 na każdym z nich. Jest to żmudne; biblioteki komponentów, które tego nie robią, są dostarczane z ukrytymi błędami. Automatyzacja z użyciem Storybook + pa11y lub axe-playwright się tu opłaca.

Dlaczego to ważne

Kryterium 2.4.13 zamyka najczęstszą lukę w 2.4.7: pierścień fokusu, który technicznie istnieje, ale jest zbyt cienki, zbyt niskokontrastowy lub zbyt przycięty pozycyjnie, by być użytecznym. Użytkownicy słabowidzący polegający na pierścieniu do śledzenia fokusu otrzymują mierzalną, testowalną gwarancję. Projektanci zyskują czytelną regułę, którą mogą zweryfikować przed wdrożeniem, zamiast negocjować po fakcie.

Nawet zespoły formalnie zobowiązane tylko do poziomu AA powszechnie adoptują 2.4.13 jako cel, ponieważ błędy są łatwe do wykrycia w audytach i łatwe do wykorzystania w sporach prawnych. Jeśli masz wdrożyć tylko jedno kryterium AAA z WCAG 2.2, niech to będzie właśnie to.