Dostępne stany fokusu: projektowanie widocznego fokusu klawiatury

Dlaczego stany skupienia mają znaczenie

Osoby korzystające z klawiatury, urządzenia przełączającego lub lupy poruszają się po stronie o jeden element na raz. Wskaźnik skupienia to jedyny sposób, w jaki wiedzą, gdzie się znajdują. Usunięcie konturu przeglądarki bez wymiany to jeden z najczęstszych błędów dostępności.

Czego wymaga WCAG 2.2

Kryterium sukcesu 2.4.7 Fokus widoczny (poziom AA) wymaga, aby każdy interfejs obsługiwany za pomocą klawiatury posiadał tryb, w którym widoczny jest wskaźnik fokusu. W WCAG 2.2 dodano 2.4.13 Wygląd ostrości (poziom AAA), który opisuje silny wskaźnik: co najmniej tak duży jak obszar obwodu komponentu o grubości 2 pikseli CSS, ze współczynnikiem kontrastu co najmniej 3:1 pomiędzy stanami skupienia i nieostrości.

:ostrość widoczna

MDN wyjaśnia, że ​​:focus-visible ma zastosowanie, gdy element ma fokus, a przeglądarka za pomocą heurystyki decyduje, że fokus powinien być pokazany, zazwyczaj w przypadku użycia klawiatury. Dzięki temu możesz wyświetlać silne pierścienie ostrości użytkownikom klawiatury bez pokazywania ich za każdym razem, gdy ktoś kliknie przycisk myszą. Użyj go zamiast usuwać kontury.

Projektowanie pierścionka

Praktyczne wskazówki:

• Użyj konturu lub pierścienia z przesunięciem, aby nie wtapiał się w element.
• Sprawdź kontrast na każdym tle, na którym może pojawić się element; pomaga dwukolorowy pierścień.
• Zachowaj spójność między komponentami, zdefiniowanymi jako token w systemie projektowym.
• Nigdy nie polegaj wyłącznie na subtelnej zmianie koloru.
• Upewnij się, że zaznaczony element nie jest ukryty za lepkimi nagłówkami.

Fokus i ruch

Pierścień ostrości może pojawić się po bardzo krótkim przejściu, ale powinien być odczuwalny natychmiastowo. Unikaj animacji, które opóźniają dzwonek lub przesuwają element, a w przypadku niestandardowych komponentów rysowanych na płótnie upewnij się, że na stronie nadal znajduje się element, na którym można ustawić fokus, aby użytkownicy klawiatury mogli do niego dotrzeć.