Zasada 2: Funkcjonalność 2.4 Możliwość nawigacji

2.4.7 Widoczny fokus

WCAG 2.4.7 Focus Visible

W skrócie

Element, na którym jest fokus klawiatury, musi być wyraźnie widoczny (obramowanie, podświetlenie).

Poziom
AA Standard, którego wymaga prawo – usuwa najczęstsze bariery.
Czy to obowiązkowe?
Wymagane prawem
Kto w zespole odpowiada
Programowanie, Projektowanie UX/UI
Jak to wykryć
Częściowo automatyczne

Wyjaśnienie prostym językiem: Widoczny fokus

Komu i dlaczego to pomaga

Bez widocznego fokusu osoba korzystająca z klawiatury nie wie, gdzie jest na stronie – jak kursor myszy, który zniknął.

  • Osoby z niepełnosprawnością ruchową
  • Osoby słabowidzące
  • Osoby z trudnościami poznawczymi

Jak zrobić to dobrze

  • Nie usuwaj outline bez zastępstwa. Najlepiej ustal wyraźny styl :focus-visible dla całego serwisu.

Najczęstsze błędy

  • outline: none w CSS bez zastępczego stylu fokusu.
  • Fokus w kolorze prawie takim samym jak tło.

Przykład w kodzie

Źle
*:focus { outline: none; }
Dobrze
:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }

Jak to sprawdzić

  1. Przejdź Tabem po całej stronie – czy zawsze widzisz, który element jest aktywny?

Częściowo automatyczne. Narzędzia wykryją część problemów (np. brak atrybutu), ale ocena jakości wymaga człowieka.

Czy to obowiązkowe?

Wymagane prawem

Kryterium poziomu AA z WCAG 2.1 – obowiązkowe dla podmiotów publicznych (ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych) oraz dla firm objętych European Accessibility Act (ustawa o zapewnianiu spełniania wymagań dostępności przez niektóre produkty i usługi). Brak zgodności trzeba wykazać w deklaracji dostępności.

Naucz się tego w praktyce

Zobacz wszystkie kursy dostępności

Powiązane kryteria

2.4.11

Fokus nie jest zasłonięty (minimum)

Poziom AA Nowe w 2.2

Element z fokusem nie może być całkowicie zasłonięty przez treści stworzone przez autora strony – np. przyklejony nagłówek, stopkę czy baner cookies.

2.4.13

Wygląd fokusu

Poziom AAA Nowe w 2.2

Wskaźnik fokusu jest duży i kontrastowy: co najmniej tak duży jak obramowanie o grubości 2 px wokół elementu i z kontrastem 3:1 między stanem z fokusem i bez.

1.4.11

Kontrast elementów nietekstowych

Poziom AA Wymagane prawem

Elementy interfejsu (obramowania pól, przyciski, przełączniki, wskaźnik fokusu) i istotne części grafik (linie wykresu, ikony) muszą mieć kontrast co najmniej 3:1 z otoczeniem.

Ostatnia aktualizacja: .
Źródło: Understanding SC 2.4.7: Focus Visible – oficjalne objaśnienie W3C (po angielsku).