Widoczny fokus

Czego wymaga kryterium

Gdy dowolny element interaktywny otrzymuje fokus klawiatury, przeglądarka — lub CSS strony — musi wyświetlić widoczny wskaźnik pokazujący, który element jest sfokusowany. Kryterium nie określa, jak wskaźnik ma wyglądać — tym zajmuje się kryterium 2.4.13 na poziomie AAA. Wymaga jedynie, by cokolwiek było widoczne. Klasycznym błędem jest *:focus { outline: none; } bez żadnego zastępczego stylu.

Kryterium dotyczy każdego elementu, który może otrzymać fokus: łączy, przycisków, pól formularza, własnych widżetów, ramek iframe oraz wszystkiego z atrybutem tabindex. Obowiązuje niezależnie od tego, czy użytkownik dotarł do elementu klawiszem Tab, Shift+Tab czy programowym wywołaniem fokusa.

Jak spełnić kryterium

• Nie należy pisać outline: none (ani outline: 0) bez natychmiastowego zastępczego stylu. Używając :focus-visible, można ograniczyć własny wskaźnik wyłącznie do użytkowników klawiatury, eliminując go przy kliknięciu myszą.
• Należy zapewnić styl fokusa wystarczająco kontrastowy i wyrazisty: obramowanie o grubości 2px i kontraście 3:1 względem sąsiedniego tła to konserwatywny punkt odniesienia.
• Dla jasnych elementów na jasnym tle należy stosować ciemne obramowanie (i odwrotnie). Szare obramowanie na szarym tle w stanie hover to klasyczna pułapka niewidoczności.
• Własne widżety (combobox, listbox, menu) muszą przenosić fokus na aktywną opcję i wyświetlać na niej widoczny wskaźnik.
• Weryfikację przeprowadza się, przesuwając fokus klawiszem Tab przez całą stronę od paska URL. Każdy przystanek musi być oczywisty bez zmrużenia oczu.

Typowe błędy

• Globalny reset: *:focus { outline: none; } w bazowym CSS bez ponownego dodania stylu.
• Biblioteki komponentów dostarczane z obramowaniem o grubości 1px i niskim kontraście dopasowanym do koloru marki na gradientowym tle — w praktyce niewidoczne.
• Wskaźnik fokusa ukryty za przyklejonym nagłówkiem przy przewijaniu (zob. 2.4.11 — ta sama przyczyna, inne kryterium).
• Przyciski zmieniające kolor tła przy :hover, ale nie przy :focus — użytkownicy klawiatury nie otrzymują żadnego sygnału.
• Własne listy rozwijane, w których fokus przenosi się na ukryty element <li> poza ekranem, a nic nie zmienia się wizualnie.
• Projektanci zastępujący obramowanie małym cieniem niewidocznym na złożonych tłach.

Jak działa :focus-visible

Przeglądarki udostępniają :focus-visible do odróżniania fokusa klawiatury od fokusa myszy. Wzorzec:

:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Dzięki temu kliknięcia myszą pozostają czyste, a użytkownicy klawiatury otrzymują wskaźnik. Bezpieczne do wdrożenia we wszystkich nowoczesnych przeglądarkach od 2026 roku.

Dlaczego to ważne

Widoczny fokus to kryterium najczęściej cytowane w audytach dostępności klawiaturowej — i prawdopodobnie o największym wpływie. Strona, która nie spełnia kryterium 2.4.7, jest nieużyteczna przy nawigacji klawiaturą, nawet jeśli wszystkie pozostałe kryteria są spełnione. Osoby z niepełnosprawnościami ruchowymi, użytkownicy z dysfunkcją wzroku korzystający z powiększalników oraz osoby z urazami rąk tracą dostęp. Użytkownicy klawiatury na urządzeniach mobilnych (zewnętrzne klawiatury Bluetooth na tabletach) napotykają ten sam problem. Naprawienie go sprowadza się zazwyczaj do jednej reguły CSS, co sprawia, że utrzymywanie się tego błędu w całym internecie jest szczególnie uderzające.