- Poziom
- AA
- Od wersji
- WCAG 2.0
- Pozycje
- 96 / 193
2.4.7 Widoczny fokus
Osoba poruszająca się po stronie klawiaturą musi zawsze widzieć, który element ma fokus.
/ Czego wymaga
Widzące osoby korzystające z klawiatury, w tym osoby z niepełnosprawnością ruchową i wszyscy, którzy używają przełącznika albo sterowania głosem, kierują się wskaźnikiem fokusu: obramowaniem, podkreśleniem albo zmianą koloru, która oznacza bieżącą kontrolkę. Bez niego naciskają Tab na ślepo. Nie wiedzą, który link otworzy Enter ani do którego pola trafi wpisywany tekst, i zostaje im zgadywanie albo wypatrywanie adresu URL na pasku stanu.
Strona spełnia kryterium, gdy każdy element obsługiwany z klawiatury pokazuje widoczny wskaźnik, dopóki ma fokus. Domyślny kontur przeglądarki się liczy. Na tym poziomie WCAG nie określa minimalnego rozmiaru ani kontrastu wskaźnika: kryterium 1.4.11 wymaga kontrastu 3:1 względem sąsiednich kolorów dla wskaźników ostylowanych przez autora, a kryterium 2.4.13 na poziomie AAA dodaje wymagania co do rozmiaru. Styl fokusu nadany przez :focus-visible, który przeglądarki pokazują przy obsłudze z klawiatury, spełnia kryterium.
/ Jak strony go nie spełniają
- Arkusz resetujący ustawia outline: none albo outline: 0 na :focus i nic tego nie zastępuje.
- Kontur usunięto tylko z linków i przycisków, więc pola formularza pokazują fokus, a cała reszta nie.
- Styl fokusu istnieje, ale element nadrzędny z overflow: hidden go przycina, więc nic nie jest rysowane.
- Własne pole wyboru albo przycisk radiowy ukrywa natywny element input, a ostylowany zamiennik nie ma stanu fokusu.
- Wskaźnik ma ten sam kolor co tło, na którym leży, na przykład białe obramowanie na białej stronie.
/ Jak sprawdzić samodzielnie
- Kliknij w pasek adresu, a potem przejdź klawiszem Tab przez całą stronę. Przy każdym zatrzymaniu masz bez wahania wskazać element, który ma fokus.
- Zwróć uwagę na link w logo, przyciski z ikonami, własne pola wyboru, strzałki karuzeli i baner cookies, bo tam wskaźnik ginie najczęściej.
- Gdy fokus zdaje się znikać, wpisz w konsoli DevTools document.activeElement, żeby znaleźć element, który go ma.
- Przeszukaj CSS pod kątem outline: none i outline: 0 i sprawdź, czy każde wystąpienie ma styl zastępczy na tym samym selektorze.
- Powtórz test z włączonym motywem kontrastowym Windows. Tryb wymuszonych kolorów nie rysuje box-shadow, więc wskaźnik zrobiony z samego cienia znika.
/ Jak to naprawić
- Usuń outline: none z reguł :focus albo połącz je z widocznym zamiennikiem na tym samym selektorze.
- Dodaj wyraźny styl, na przykład :focus-visible { outline: 2px solid; outline-offset: 2px; }, w kolorze, który odcina się od tła.
- Jeśli obramowanie rysujesz przez box-shadow, zostaw obok outline: 2px solid transparent, żeby tryb wymuszonych kolorów nadal rysował kontur.
- We własnych polach wyboru i przyciskach radiowych styluj widoczny zamiennik, gdy ukryty input ma fokus, selektorem w rodzaju input:focus-visible + label.
- Poszukaj elementu nadrzędnego z overflow: hidden, który obcina kontur, i użyj ujemnego outline-offset albo odrobiny paddingu, żeby wskaźnik został w środku.
/ Co sprawdza nasz skaner
Nasz test focus-not-visible działa w prawdziwej przeglądarce. Po kolei daje fokus maksymalnie 150 zatrzymaniom tabulatora i porównuje, co każdy element rysuje przed i po: kontur, obramowanie, cień, tło, kolor i dekorację tekstu oraz pseudoelementy ::before i ::after. Jeśli nic się nie zmieniło, zgłasza element. Nie widzi wskaźnika rysowanego na elemencie nadrzędnym albo sąsiednim i nie ocenia, czy zmiana jest dość wyraźna, by ją zauważyć.
/ Kto je łamie, według naszych pomiarów
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Czy outline: none jest błędem WCAG?
Sama ta deklaracja usuwa domyślny wskaźnik fokusu przeglądarki i jeśli nic go nie zastępuje, strona nie spełnia kryterium 2.4.7. W3C opisuje to jako błąd F78. Wszystko jest w porządku, gdy ta sama reguła daje inny widoczny wskaźnik, na przykład obramowanie, zmianę tła albo box-shadow, choć sam cień znika w trybie wymuszonych kolorów.
Czym różni się :focus od :focus-visible?
Selektor :focus pasuje zawsze, gdy element ma fokus, także po kliknięciu myszą. Selektor :focus-visible pasuje wtedy, gdy przeglądarka uzna, że wskaźnik jest potrzebny, czyli w praktyce przy nawigacji klawiaturą i w polach tekstowych. Stylowanie :focus-visible nie pokazuje obramowań na przyciskach klikniętych myszą i nadal spełnia 2.4.7, bo osoby korzystające z klawiatury dostają wskaźnik.
Czy wskaźnik fokusu musi mieć minimalny kontrast albo grubość?
Nie według 2.4.7, które wymaga tylko, żeby był widoczny. Kontrast wynika z kryterium 1.4.11 Kontrast elementów nietekstowych, które wymaga co najmniej 3:1 względem sąsiednich kolorów, gdy autor ostylował wskaźnik. Rozmiar oraz zmianę o kontraście 3:1 między stanem z fokusem i bez niego określa 2.4.13 Wygląd fokusu, kryterium poziomu AAA dodane w WCAG 2.2.