WCAG 2.4.7 Widoczny fokus (AA) · WCAG 2.4.11 Fokus niezasłonięty (minimum) (AA) · aktualizacja 2026-09-25

Niewidoczny fokus: gdy z klawiatury nie widać, gdzie jesteś

Fokus to zaznaczenie elementu, na którym jest klawiatura. Musi być widoczny (WCAG 2.4.7) i nie może chować się pod przyklejonym paskiem (WCAG 2.4.11). Najczęstsza przyczyna błędu to jedna linijka CSS: outline: none, dodana, bo „obwódka brzydko wygląda".

Komu to przeszkadza

Osoby, które nie używają myszy: z niepełnosprawnością ruchową, niewidome korzystające z klawiatury, ale też użytkownicy, którzy po prostu wolą Tab i Enter. Bez widocznego fokusu wypełnienie formularza zamówienia przypomina chodzenie po ciemnym mieszkaniu.

Skąd się bierze

Globalny reset CSS: *:focus { outline: none; } bez żadnego zamiennika.
Gotowy motyw sklepu, który usuwa obwódkę z przycisków i linków.
Obwódka w kolorze tła albo tak cienka, że jej nie widać.
Przyklejony nagłówek albo pasek „Dodaj do koszyka", pod który chowa się aktywny element.

Poprawka w kodzie

Przed

*:focus { outline: none; }

Po

:focus-visible {
  outline: 3px solid #1a4fd6;
  outline-offset: 2px;
}
html { scroll-padding-top: 80px; } /* wysokość przyklejonego nagłówka */

:focus-visible pokazuje obwódkę przy nawigacji klawiaturą, a nie po kliknięciu myszą. To zwykle kończy spór z projektantem.

Jak sprawdzić to samodzielnie

Kliknij w pasek adresu przeglądarki i naciskaj Tab.
Przy każdym naciśnięciu powinieneś wyraźnie widzieć, który element jest aktywny.
Przejdź tak cały koszyk i formularz zamówienia. Zanotuj miejsca, w których zgubiłeś zaznaczenie.
Sprawdź, czy aktywny element nie chowa się pod przyklejonym nagłówkiem albo paskiem na dole.

Co wykryje skaner, a czego nie

Skaner wykryje

Axe tego nie mierzy. Dostepli ma własną kontrolę: przechodzi stronę klawiszem Tab i porównuje wygląd elementu z fokusem i bez niego. Wykrywa też element całkowicie zasłonięty przez przyklejony pasek.

Wymaga sprawdzenia przez człowieka

Automat nie oceni, czy wskaźnik jest wystarczająco wyraźny dla konkretnej osoby, ani czy kolejność przechodzenia ma sens. To wymaga przejścia strony człowiekiem.

Najczęstsze pytania

Czy mogę usunąć obwódkę fokusu, jeśli jest brzydka?

Możesz ją zastąpić, ale nie usuwać bez zamiennika. Użyj :focus-visible, żeby obwódka pojawiała się tylko przy nawigacji klawiaturą, i dopasuj jej kolor do marki.

Jak gruby powinien być wskaźnik fokusu?

Kryterium 2.4.7 wymaga, żeby był widoczny. Bardziej szczegółowe wymagania co do wielkości ma kryterium 2.4.13 (poziom AAA). W praktyce obwódka 2-3 px w kolorze kontrastującym z tłem jest bezpiecznym wyborem.

Źródła

[1] Understanding Success Criterion 2.4.7W3C Web Accessibility Initiative (WAI)
[2] Understanding Success Criterion 2.4.11W3C Web Accessibility Initiative (WAI)
[3] Web Content Accessibility Guidelines (WCAG) 2.2W3C (World Wide Web Consortium)