Dobre praktyki

Widoczność fokusu: dlaczego outline: none psuje dostępność z klawiatury

Usuwając outline CSS ze względów estetycznych, uniemożliwia się korzystanie ze strony za pomocą klawiatury. Ta powszechna praktyka narusza dwa kryteria WCAG: widoczność fokusu (2.4.7) oraz niezasłonięty fokus (2.4.11). Nowoczesne rozwiązania, takie jak :focus-visible i outline-offset, pozwalają na dyskretny, kontrastowy i zgodny z wymogami wskaźnik.

La réponse courte

Krótka odpowiedź: wskaźnik fokusu (często szary lub niebieski obrys) sygnalizuje, że element formularza, link lub przycisk otrzymuje interakcję za pomocą klawiatury. Usunięcie tego obrysu za pomocą outline: none bez zastąpienia go sprawia, że nawigacja klawiaturowa staje się niewidoczna – co stanowi poważną barierę dla każdego użytkownika, który nie może korzystać z myszy. Kryterium WCAG 2.4.7 tego wymaga; 2.4.11 precyzuje, że nie może być ono ukryte.

Fokus nie służy jedynie do pokazania, że element jest zaznaczony. Pozwala także zrozumieć, gdzie znajdujemy się w obrębie strony, jaką akcję wywoła naciśnięcie klawisza Enter oraz które pole otrzyma kolejne wprowadzane dane. Bez wskaźnika wizualnego użytkownik musi zgadywać swoją pozycję lub rozpoczynać nawigację od nowa.

Poprawa nie polega więc na obowiązkowym zachowaniu natywnego stylu przeglądarki. Polega na zapewnieniu wskaźnika zauważalnego, spójnego i o wystarczającym kontraście na każdym interaktywnym komponencie. Wskaźnik ten może być zgodny z identyfikacją wizualną strony, pod warunkiem że pozostaje widoczny we wszystkich stanach i na wszystkich tłach.

Dlaczego outline: none stało się nawykiem

Domyślny outline przeglądarek to dość gruby szary lub niebieski prostokąt, narzucony od lat 90. ze względów bezpieczeństwa dostępu. Już w latach 2010. projektanci uznali go za nieestetyczny: „psuł” minimalistyczny design. Resetowanie CSS (Normalize, Reset czy natywne rozwiązania Bootstrapa) zaczęło go ukrywać, często bez zastępstwa: „outline: none” rozprzestrzeniło się jako standardowy wzorzec w frameworkach i zespołach developerskich.

Problem ma charakter systemowy: to usuwanie jest prawie automatyczne, rzadko celowe. Badanie Inclaria 2026 pokazuje, że wśród 55 analizowanych francuskich sklepów internetowych większość krytycznych niezgodności obejmuje co najmniej jedno usunięcie outline bez zastępstwa. To objaw: brak testów klawiaturowych, brak przeglądu dostępności na etapie projektowania.

Inną częstą przyczyną jest mylenie focusu wywołanego kliknięciem z tym wywołanym klawiaturą. Zespoły chcą usunąć obwódkę pojawiającą się po kliknięciu myszą, a następnie stosują outline: none do wszystkich stanów :focus. Ta reguła wpływa wówczas również na osoby korzystające z klawisza Tab, Shift + Tab lub technologii wspomagających. :focus-visible rozwiązuje ten problem, precyzyjnie rozróżniając tryby interakcji.

Kto jest zablokowany?

Cztery profile są bezpośrednio dotknięte.

• Użytkownicy korzystający wyłącznie z klawiatury: niepełnosprawność ruchowa, drżenie rąk, paraliż lub technologia wspomagająca (pedał, mysz adaptacyjna). Nie widzą, co się dzieje, gdy poruszają się po formularzu za pomocą klawisza Tab.
• Użytkownicy preferujący nawigację za pomocą klawiatury: programiści, analitycy danych, zaawansowani użytkownicy, którzy oszczędzają 15 sekund na formularzu, osoby niewidome i słabowidzące korzystające z czytnika ekranu (który często opiera się na wizualnym fokusie przeglądarki lub pierścieniu czytnika).
• Użytkownicy w podeszłym wieku lub w sytuacji zmęczenia motorycznego: precyzyjne posługiwanie się myszą staje się trudne; klawiatura jest łatwiejsza i szybsza.
• Sytuacje tymczasowej niepełnosprawności: złamana ręka, uszkodzony touchpad, praca na monitorze dotykowym bez myszy.

Blokada może być całkowita w przypadku długiego formularza. Osoba może dotrzeć do przycisku zatwierdzenia, nie wiedząc, który element jest aktywny, przypadkowo uruchomić link pomocniczy lub zmienić już wypełnione pole. W oknie modalnym brak wskaźnika może również sprawić wrażenie, że klawiatura przestała działać, podczas gdy fokus nadal przesuwa się po elementach niewidocznych lub znajdujących się za oknem.

Kryteria WCAG w grze

Dwa kryteria sprawiają problemy:

Na poziomie zgodności prawnej te dwa kryteria są poziomu AA, obowiązkowe we Francji na mocy dyrektywy europejskiej (European Accessibility Act, stosowany od 28 czerwca 2025 r. dla nowych usług, 28 czerwca 2030 r. dla istniejących usług).

Widoczność należy sprawdzać w rzeczywistych warunkach użytkowania, a nie tylko na izolowanym komponencie w bibliotece projektowej. Zgodny pierścień na białym tle może stać się niewidoczny w niebieskim pasku, zostać przycięty przez „overflow: hidden” lub zniknąć pod nagłówkiem pozycjonowanym jako „fixed”. Zgodność zależy więc od finalnego renderowania, pozycji elementu i jego środowiska wizualnego.

Nowoczesne rozwiązanie: :focus-visible i outline-offset

Nowoczesne przeglądarki i technologie wspomagające obsługują :focus-visible (od 2018 r., IE 11 nie jest obsługiwany, ale wymaga strategii degradacji: .element:focus { outline: 2px solid #0066cc; }, a następnie .element:focus-visible { /* bardziej wyrafinowane reguły */ }).

Zasada do zapamiętania: :focus-visible dotyczy wyłącznie fokusu z klawiatury, a nie fokusu myszą (na .element:focus-visible { … }). Pozwala to zachować interfejs przejrzysty przy kliknięciu, jednocześnie zapewniając dostępność z klawiatury.

Przykład 1: zastąpienie domyślnego outline

a, button, input:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }

Tutaj outline-offset: 2px tworzy odstęp między elementem a obwódką, co zapobiega zasłanianiu treści (kryterium 2.4.11).

Aby zapewnić jednolite pokrycie, ta sama logika musi być zastosowana do innych komponentów interaktywnych: pól tekstowych, list rozwijanych, niestandardowych kontrolek, elementów z tabindex oraz widgetów JavaScript. Dodanie reguły tylko do linków i przycisków często pozostawia luki w nawigacji za pomocą klawiatury.

Przykład 2: kontrastowa obwódka w odcieniach szarości, także w trybie ciemnym

a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #333; outline-offset: 4px; } @media (prefers-color-scheme: dark) { a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #fff; } }

Zachowany jest minimalny kontrast 3:1 (punkt 1.4.11, odcień szarości): #333 na białym tle = 8,6:1 kontrastu.

Przykład 3: box-shadow jako wskaźnik

Co zrobić, jeśli naprawdę chcesz zastąpić outline? box-shadow również działa, ale nie tworzy odstępu jak outline-offset:

a:focus-visible { outline: none; box-shadow: 0 0 0 3px #0066cc; }

Uwaga: box-shadow zużywa nieco więcej zasobów GPU niż outline i nie jest rysowany poza kontenerami z właściwością overflow: hidden. outline jest bardziej niezawodny.

Jeśli outline: none jest konieczne w określonej regule, jego zamiennik musi być zdefiniowany w tym samym bloku lub w regule łatwo identyfikowalnej. Takie sąsiedztwo ogranicza ryzyko, że przyszła modyfikacja kaskady usunie alternatywny wskaźnik. Należy również przetestować stany łączone, w szczególności :hover, :active, :disabled i :focus-visible, aby bardziej specyficzny styl nie nadpisał przypadkowo fokusu.

Jak sprawdzić, czy fokus jest widoczny

• Nacisnąć klawisz Tab na klawiaturze: każdy element interaktywny (link, przycisk, pole wprowadzania) powinien mieć widoczny pierścień wokół siebie.
• Otworzyć narzędzia deweloperskie przeglądarki (F12), zakładkę „Accessibility” (Chrome, Edge) lub „Inspector → Accessibility” (Firefox) i obserwować wskaźnik fokusu podczas poruszania się klawiszem Tab.
• Użyć czytnika ekranu (NVDA na Windows, VoiceOver na Mac/iOS): ogłasza on element w fokusie; wizualny fokus powinien być widoczny jednocześnie.

Test powinien obejmować całą stronę w obu kierunkach, z użyciem Tab, a następnie Shift + Tab. Kolejność poruszania się musi pozostać logiczna, wskaźnik nie może nigdy znikać, a żaden element nie może blokować klawiatury. Należy również otworzyć menu, akordeony, okna modalne i komponenty dynamiczne, ponieważ ich zachowanie nie zawsze jest widoczne podczas prostego przeglądania głównej strony.

Na koniec przetestuj różne szerokości ekranu i poziomy powiększenia. Przy 200% stały nagłówek lub pasek zgody może zasłonić element w fokusie, podczas gdy przy 100% wszystko wydaje się poprawne. Fokus musi pozostać przynajmniej częściowo widoczny, gdy treść się reorganizuje.

Wykrywanie usuwania konturu (outline)

Skaner Inclaria testuje dwie rzeczy: (1) obecność widocznego wskaźnika fokusu na kluczowych elementach (formularze, przyciski, linki); (2) przesunięcie tego wskaźnika (brak zasłaniania pod stałym menu, na przykład). Usunięcie „outline: none” bez zastąpienia jest oznaczane jako niezgodne z WCAG 2.4.7.

Raport priorytetyzuje tę usterkę: często pojawia się na setkach elementów (globalny reset CSS), a ma bezpośredni wpływ na użyteczność.

Automatyczne wykrywanie pozwala szybko zidentyfikować podejrzane reguły CSS oraz komponenty bez stylu zastępczego. Musi jednak być uzupełnione ręcznym testem z użyciem klawiatury, ponieważ rzeczywista widoczność zależy od kontrastu, kontekstu graficznego, przewijania oraz ewentualnych elementów nakładających się.