Funkcjonalność · Poziom AAA

2.4.13 Wygląd fokusu

Fokus ma być nie tylko widoczny, ale też wystarczająco duży i kontrastowy.

Krótko

Gdy widoczny jest fokus klawiatury, jego wskaźnik musi mieć minimalny rozmiar i odpowiedni kontrast zmiany. Najprostszy bezpieczny wzorzec to wyraźny obrys o grubości co najmniej 2 px.

W WCAG 2.2 kryterium 2.4.13 ma poziom AAA. Nie jest tym samym co 2.4.7: 2.4.7 wymaga, żeby fokus w ogóle był widoczny, a 2.4.13 opisuje jego minimalny wygląd.

Problem w praktyce

Przycisk dostaje fokus, ale zmienia się tylko bardzo subtelny cień albo minimalnie ciemnieje tło. Użytkownik korzystający z klawiatury widzi, że coś się zmieniło, ale nie jest w stanie pewnie określić, który element jest aktywny.

To kryterium nie zastępuje 2.4.7. Najpierw sprawdź, czy fokus jest widoczny, a dopiero potem oceniaj rozmiar i kontrast jego wskaźnika.

Kogo to dotyczy

  • Osób korzystających z klawiatury, przełączników albo innych urządzeń sterowanych interfejsem klawiatury.
  • Osób słabowidzących, które potrzebują wyraźnego punktu odniesienia.
  • Osób starszych, które trudniej zauważają małe zmiany wizualne.
  • Użytkowników powiększenia ekranu, którzy widzą tylko fragment strony.

Dobry przykład

  • Przycisk po fokusie ma obrys 2 px o wyraźnym kontraście.
  • Link w treści dostaje solidny obrys, który obejmuje link także wtedy, gdy zawija się na kilka linii.
  • Wskaźnik fokusu ma kontrast zmiany co najmniej 3:1 względem stanu bez fokusu.
  • Projekt nie usuwa domyślnego fokusu przeglądarki, jeśli autor nie daje własnego lepszego wskaźnika.

Zły przykład

  • Fokus jest tylko delikatnym cieniem o niskim kontraście.
  • Wskaźnik ma 1 px i zlewa się z tłem.
  • Projekt usuwa outline bez zamiennika.
  • Zmienia się tylko kolor tła, ale zmiana nie osiąga kontrastu 3:1.

Przykłady kodu

Dobry przykład: mocny obrys

Solidny obrys jest prosty do zauważenia i łatwy do utrzymania.

Kod — CSS

.button:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 3px;
}

Dobry przykład: wskaźnik dwukolorowy

Dwa kolory pomagają utrzymać kontrast na różnych tłach.

Kod — CSS

.card-link:focus-visible {
  outline: 2px solid #ffffff;
  box-shadow: 0 0 0 5px #4b0082;
}

Zły przykład: usunięcie fokusu

Taki kod psuje co najmniej widoczność fokusu, a często także jego wygląd.

Kod — CSS

a:focus,
button:focus {
  outline: none;
}

Przykład graficzny

Źle

Cień 1 px, niski kontrast

Fokus istnieje, ale trudno go zauważyć.

Dobrze

Obrys 3 px, kontrastowa zmiana

Wskaźnik jest duży i jednoznaczny.

Statyczne demo pokazuje różnicę między samą widocznością fokusu a jego wyraźnym wyglądem.

Jak sprawdzić

  1. Przejdź przez stronę klawiszem Tab.
  2. Sprawdź, czy każdy fokusowany element ma widoczny wskaźnik.
  3. Oceń, czy wskaźnik ma obszar co najmniej jak obrys 2 px wokół komponentu albo równoważny rozmiar.
  4. Sprawdź kontrast zmiany między stanem z fokusem i bez fokusu: minimum 3:1.
  5. Oddziel ocenę od 2.4.11: fokus może być wyraźny, ale nadal zasłonięty przez sticky header.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • reguły outline: none,
  • część stylów :focus i :focus-visible,
  • część problemów kontrastu koloru wskaźnika.

Automat nie oceni pewnie

  • rzeczywistego obszaru wskaźnika dla każdego komponentu,
  • kontrastu zmiany w złożonych tłach,
  • czy wskaźnik jest wystarczająco czytelny po powiększeniu i na różnych breakpointach.

Typowe błędy

  • Usunięcie domyślnego obrysu bez zamiennika.
  • Zbyt cienki obrys wokół dużych przycisków.
  • Fokus pokazany tylko zmianą bardzo podobnego koloru.
  • Dobry fokus na przyciskach, ale słaby na linkach w treści lub elementach menu.