Widoczny fokus: nigdy nie ukrywaj obrysu

Użytkownik klawiatury może jednocześnie widzieć tylko jedną rzecz: element sterujący, na którym znajduje się fokus. Ten widoczny znacznik nazywa się wskaźnikiem fokusu. 👀

Domyślnie przeglądarka rysuje obrys fokusu wokół aktywnego elementu podczas przechodzenia klawiszem Tab. To wbudowany znacznik wskazujący bieżące miejsce.

Projektanci często nie lubią obrysu i go usuwają. Ta jedna reguła, outline none, natychmiast odbiera widoczność użytkownikom klawiatury. Proszę nigdy nie publikować jej bez zamiennika.

Można usunąć domyślny obrys, ale tylko po dodaniu wyraźnego zamiennika. Nie wolno pozostawiać elementu z fokusem wyglądającego dokładnie tak samo jak element nieaktywny.

Dobry wskaźnik łatwo zauważyć: może to być gruby obrys, pierścień lub wyraźna zmiana koloru. W tym przypadku subtelność jest wrogiem, a nie sprzymierzeńcem.

Selektor focus-visible pokazuje pierścień użytkownikom klawiatury, ale ukrywa go przy zwykłych kliknięciach myszy. Zapewnia bezpieczeństwo bez wizualnego szumu.

Obrys zlewający się z tłem nikomu nie pomaga. Styl fokusu musi mieć wystarczający kontrast, aby wyróżniać się na stronie.

Należy uważać na overflow hidden na elemencie nadrzędnym. Może on przyciąć obrys fokusu, przez co dolna krawędź po cichu zniknie.

Proszę użyć outline-offset, aby odsunąć pierścień od elementu. Niewielki odstęp znacznie ułatwia zauważenie wskaźnika.

Nie chodzi tylko o wygląd. WCAG wymaga widocznego wskaźnika fokusu na każdym elemencie interaktywnym, więc jego ukrycie może oznaczać brak zgodności.

Najszybszy test nic nie kosztuje: proszę przejść klawiszem Tab przez całą stronę. Jeśli fokus kiedykolwiek zostanie zgubiony, wskaźnik wymaga poprawy.

Nigdy nie należy usuwać pierścienia fokusu bez zastąpienia go innym rozwiązaniem. Warto używać focus-visible, zapewnić mu wyraźny kontrast i odstęp oraz samodzielnie przetestować go klawiszem Tab. ✅