Wyraźny fokus

Silktide sprawdza, czy elementy sterujące na stronie — linki, przyciski i pola formularza — zmieniają swój wygląd wystarczająco wyraźnie po wybraniu ich za pomocą klawiatury. Nie wystarczy, że zmiana po prostu istnieje; musi być wystarczająco duża i kontrastowa, aby była faktycznie widoczna.

To bardziej rygorystyczna wersja Widocznego fokusu: tamta kontrola sprawdza, czy istnieje jakikolwiek wskaźnik fokusu, natomiast ta mierzy, czy wskaźnik jest wystarczająco wyraźny.

Możesz sprawdzić to samodzielnie: wczytaj stronę i wielokrotnie naciskaj klawisz Tab. Każdy napotkany element sterujący powinien widocznie zmienić wygląd, na przykład zyskać wyraźne obramowanie lub kontrastujące tło.

Dlaczego to ważne

Osoby poruszające się po stronie za pomocą klawiatury — w tym wiele osób z niepełnosprawnościami ruchowymi oraz użytkownicy urządzeń przełącznikowych — polegają na możliwości zobaczenia, gdzie znajduje się . Wskaźnik fokusu, który technicznie istnieje, ale jest słaby, cienki lub ma niski kontrast, jest równie bezużyteczny jak całkowity brak wskaźnika: użytkownik traci miejsce na stronie i nie wie, który element sterujący zostanie aktywowany po naciśnięciu klawisza Enter.

Jak to naprawić

Najprostszym niezawodnym rozwiązaniem jest jednolite obramowanie wokół elementu sterującego z fokusem, o grubości co najmniej 2 pikseli, w kolorze kontrastującym zarówno z elementem, jak i jego otoczeniem.

Wskaźnik dwukolorowy gwarantuje widoczność niezależnie od tła:

/* Przezroczyste obramowanie zachowuje wskaźnik w trybie wymuszonych kolorów */
:focus {
  outline: 2px solid transparent;
  /* Jasna poświata + ciemny pierścień: jeden z nich zawsze zapewnia kontrast */
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

To podejście pochodzi z techniki WCAG C40.

Unikaj wskaźników wzdłuż pojedynczej krawędzi, takich jak dolne obramowanie: to, czy są wystarczająco duże, zależy od długości tej krawędzi, która w przypadku linków tekstowych jest zmienna.

Jak Silktide przeprowadza tę kontrolę

Symuluje użytkownika klawiatury, który przechodzi klawiszem Tab przez wszystkie elementy możliwe do uzyskania fokusu na stronie, pomijając elementy wykluczone z kontroli, elementy ukryte przed widzącymi użytkownikami oraz elementy z wartością tabindex równą -1.
Porównuje style każdego elementu w stanie z fokusem i bez fokusu.
Zalicza elementy zachowujące domyślne obramowanie fokusu przeglądarki lub takie, których kolor tła zmienia się przy kontraście co najmniej 3:1 między oboma stanami.
W przeciwnym razie mierzy obramowania, ramki i cienie w obu stanach oraz zlicza obszar, który zmienia się z wystarczającym kontrastem. Aby zaliczyć kontrolę, obszar ten musi być co najmniej tak duży jak obwód o grubości 2 pikseli wokół elementu, zgodnie z wymaganiem 2.4.13.

Rozwiązywanie problemów

Styl fokusu wymaga JavaScript, aby się pojawić

Style fokusu powinny być zdefiniowane wyłącznie w . Jeśli fokus jest stosowany przez — na przykład skrypt dodający klasę — Silktide może go nie wykryć, a także może on nie działać z technologiami wspomagającymi bez fizycznej klawiatury. Aby to potwierdzić, spróbuj wyłączyć JavaScript i przejść przez stronę klawiszem Tab.

Style fokusu, których nie możemy zmierzyć

Niektórych sposobów implementacji fokusu nie można automatycznie wykryć ani zmierzyć:

Fokus rysowany za pomocą pseudoelementów, takich jak ::before lub ::after.
Fokus stosowany za pomocą :focus-within na kontenerze.
Style fokusu kaskadowo przekazywane do elementów potomnych, takich jak <span> wewnątrz linku. Niektóre z tych przypadków są wykrywane, ale nie wszystkie warianty.

Elementy wykorzystujące te techniki są pomijane, a nie oznaczane jako błędne.

Elementy na obrazach lub z nieprzewidywalnym tłem

Kontrast jest obliczany względem znanego koloru tła. Gdy element znajduje się nad obrazem lub jest pozycjonowany poza elementem nadrzędnym, przez co nie można określić jego tła, Silktide pomija go zamiast zgadywać.

Nieoczekiwane elementy mogą uzyskać fokus

Tagi takie jak <div> lub <span> mogą uzyskać fokus po nadaniu im wartości tabindex równej 0 lub większej, co umożliwia obsługę klawiatury w niestandardowych elementach sterujących. Jeśli jeden z nich pojawia się w wynikach, jest rzeczywiście dostępny z klawiatury i potrzebuje stylu fokusu. Zobacz tabindex w MDN.