WCAG 2.4.7 Widoczny fokus

Kryterium sukcesu 2.4.7 sprawia, że osoby korzystające z klawiatury widzą, w którym miejscu strony się znajdują. Bez widocznego wskaźnika fokusu naciskanie klawisza Tab przypomina przesuwanie myszy z niewidocznym kursorem: widzący użytkownicy klawiatury — osoby z niepełnosprawnością ruchową, wiele osób słabowidzących, zaawansowani użytkownicy — nie wiedzą, który link lub przycisk zareaguje. To poziom AA, część normy EN 301 549 (punkt 9.2.4.7).

Czego wymaga kryterium

Każdy interfejs użytkownika obsługiwany za pomocą klawiatury ma tryb działania, w którym wskaźnik fokusu klawiatury jest widoczny.

W praktyce: zawsze, gdy element otrzymuje fokus z klawiatury, widać wskaźnik — domyślny obrys przeglądarki albo własny styl. Udokumentowane błędy:

• style, które usuwają lub ukrywają wskaźnik fokusu (outline: none, outline: 0 albo obramowanie, które go zasłania) bez widocznego zamiennika;
• skrypty, które zdejmują fokus z elementu, gdy tylko go otrzyma.

WCAG 2.2 dodało też 2.4.13 Wygląd fokusu na poziomie AAA, z zasadami dotyczącymi rozmiaru i kontrastu wskaźnika; na poziomie AA wymagana jest tylko widoczność.

Typowe błędy w sklepie internetowym

• reset stylów w motywie z *:focus { outline: none; }, żeby ukryć „brzydką” obwódkę po kliknięciu myszą;
• przyciski i próbki kolorów z własnym stylem, który przy fokusie tylko minimalnie zmienia kolor;
• obwódka fokusu w tym samym kolorze co firmowe tło, przez co znika na kolorowych banerach;
• własne pola wyboru i przyciski opcji, w których prawdziwe pole jest ukryte, a jego fokus nie jest pokazany na widocznym zamienniku;
• karty produktów, w których fokus trafia na niewidoczny nakładający się link.

Jak to sprawdzić

Automatycznie: axe-core nie ma reguły dla tego kryterium. To, czy fokus jest widoczny, zależy od tego, co zmienia się na ekranie, gdy element otrzymuje fokus, a axe tego nie porównuje, dlatego potrzebna jest kontrola ręczna.

Ręcznie: przejść klawiszem Tab przez całą stronę, łącznie z nagłówkiem, rozbudowanym menu, filtrami, opcjami produktu, wysuwanym koszykiem, formularzami i stopką. Na każdym kroku powinno być wyraźnie widać, który element ma fokus. Warto sprawdzić to na jasnym i ciemnym tle oraz w okienkach wyskakujących. Jeśli wskaźnik znika, należy poszukać w CSS reguł outline: none lub :focus.

Jak to naprawić

• Nigdy nie usuwać obrysu bez zamiennika. Użyć :focus-visible, aby pokazać wyraźną obwódkę użytkownikom klawiatury, a kliknięcia myszą zostawić bez niej.
• Solidny styl: :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } albo dwukolorowa obwódka, która działa na każdym tle.
• Pokazywać fokus na widocznej części własnych elementów sterujących (np. na ostylowanej próbce koloru, a nie na ukrytym polu).
• Dążyć do kontrastu 3:1 względem sąsiednich kolorów, żeby obwódka była dobrze widoczna.

Powiązane kryteria

• 2.4.11 Fokus niezasłonięty (minimum) — element z fokusem nie może być ukryty za inną treścią.
• 1.4.11 Kontrast elementów nietekstowych — wizualne części elementów sterujących potrzebują kontrastu 3:1.
• 2.4.3 Kolejność fokusu — fokus musi przesuwać się w logicznej kolejności.

Najczęstsze pytania

Czy outline: none to błąd według WCAG?

Narusza 2.4.7, gdy usuwa wskaźnik fokusu i nic innego nie pokazuje, gdzie jest fokus. Usunięcie domyślnego obrysu jest w porządku, jeśli zastąpi go wyraźnie widoczny własny styl.

Czym różni się 2.4.7 Widoczny fokus od 2.4.13 Wygląd fokusu?

2.4.7 (poziom AA) wymaga tylko, by wskaźnik fokusu był widoczny. 2.4.13 Wygląd fokusu (poziom AAA, nowość w WCAG 2.2) określa minimalny rozmiar wskaźnika i zmianę kontrastu co najmniej 3:1.

Czy wskaźnik fokusu musi mieć minimalny kontrast?

Nie na podstawie samego 2.4.7. Obwódka fokusu jest jednak wizualną częścią elementu sterującego, więc znaczenie ma 1.4.11 Kontrast elementów nietekstowych (3:1), a wskaźnik, którego w praktyce nikt nie widzi, nie czyni fokusu widocznym.