Funkcjonalność · Poziom AA

2.4.7 Widoczny fokus

Widoczny wskaźnik musi pokazywać, który element ma aktualnie fokus podczas nawigacji klawiaturą.

Występuje w: WCAG 2.0, WCAG 2.1 i WCAG 2.2.

Krótko

Gdy użytkownik porusza się po stronie klawiaturą, musi widzieć, który element jest aktualnie aktywny.

Problem w praktyce

Użytkownik naciska Tab i przechodzi przez linki, przyciski, pola formularza oraz elementy menu. Jeśli nie widzi fokusu, nie wie, gdzie jest, co może aktywować i czy nie zgubił się na stronie.

To szczególnie trudne w długich formularzach, menu mobilnych, koszykach zakupowych i stronach z wieloma linkami. Strona może technicznie działać z klawiatury, ale bez widocznego fokusu korzystanie z niej przypomina poruszanie się po omacku.

Kogo to dotyczy?

  • Osób korzystających z klawiatury zamiast myszy.
  • Osób z niepełnosprawnościami ruchowymi, dla których mysz albo touchpad są niewygodne lub niedostępne.
  • Osób korzystających z przełączników, alternatywnych klawiatur albo innych technologii wspomagających.
  • Osób słabowidzących, które potrzebują wyraźnego sygnału, gdzie aktualnie znajduje się fokus.
  • Użytkowników zaawansowanych, którzy poruszają się po stronie szybciej klawiaturą.

Dobry przykład

  • Link dostaje wyraźny obrys po fokusie, widoczny na jasnym i ciemnym tle.
  • Przycisk ma ramkę i zmianę tła, więc stan fokusu nie opiera się wyłącznie na kolorze.
  • Pole formularza ma mocny stan aktywny, np. obrys, cień i czytelną etykietę.
  • Element menu pokazuje fokus niezależnie od stanu hover, czyli działa także bez myszy.

Zły przykład

  • outline: none bez widocznego zamiennika.
  • Fokus widoczny tylko przez bardzo subtelną zmianę koloru.
  • Styl hover wygląda dobrze, ale element nie ma osobnego stanu dla klawiatury.
  • Fokus jest zasłonięty przez sticky header, popup albo pasek cookies.
  • Wskaźnik fokusu znika na ciemnym, wzorzystym albo kolorowym tle.
  • Elementy interaktywne działają myszą, ale przy klawiaturze nie pokazują, gdzie jest użytkownik.

Przykłady kodu

Dobry fokus dla linków i przycisków

Użyj widocznego obrysu dla elementów, które mogą dostać fokus z klawiatury. :focus-visible pomaga pokazać wskaźnik wtedy, gdy jest najbardziej potrzebny.

Kod — CSS

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #FA9632;
  outline-offset: 3px;
}

Jak to działa

Po przejściu klawiaturą użytkownik widzi wyraźny obrys wokół aktywnego linku, przycisku albo pola formularza.

Zły przykład: usunięty outline

Usunięcie domyślnego obrysu bez zapewnienia widocznego zamiennika tworzy barierę dla osób korzystających z klawiatury.

Kod — CSS

button:focus {
  outline: none;
}

Jak to działa

Przycisk nadal może mieć fokus technicznie, ale użytkownik nie widzi, który element jest aktywny. To nie spełnia celu kryterium 2.4.7.

Fokus dopasowany do komponentu

W komponentach, np. kartach-linkach, warto połączyć obrys z dodatkowym cieniem. Wskaźnik jest wtedy czytelny także na bardziej złożonym tle.

Kod — CSS

.card-link:focus-visible {
  outline: 3px solid #FA9632;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(95, 40, 180, 0.18);
}

Jak to działa

Obrys pokazuje granicę aktywnego elementu, a cień zwiększa widoczność bez zmiany układu strony.

Przykład graficzny

Źle

Symulacja: fokus jest prawie niewidoczny i łatwo go przeoczyć.

Dobrze

Symulacja: aktywny element ma wyraźny obrys, odsunięcie i dodatkowy cień.

Porównanie symulowanych stanów fokusu. Informacja jest opisana tekstem i nie opiera się wyłącznie na kolorze.

Jak sprawdzić?

  1. Otwórz stronę w przeglądarce.
  2. Odłóż mysz.
  3. Naciskaj Tab, Shift + Tab, Enter i Space.
  4. Sprawdź, czy na każdym linku, przycisku, polu formularza i elemencie menu widać fokus.
  5. Sprawdź, czy fokus nie znika na żadnym etapie.
  6. Sprawdź, czy fokus jest widoczny na różnych tłach.
  7. Sprawdź, czy kolejność fokusu jest logiczna.
  8. Sprawdź, czy fokus nie jest zasłaniany przez sticky header, popup, cookie banner albo inny element.
  9. Przetestuj stronę przy powiększeniu 200%.
  10. Nie oceniaj wyłącznie automatem. To kryterium wymaga testu manualnego.

Co sprawdzi automat, a czego nie?

Automat może wykryć

  • Część przypadków outline: none.
  • Elementy interaktywne bez dostępnej nazwy.
  • Niektóre problemy z kontrastem elementów interfejsu.
  • Część problemów z kolejnością DOM.

Automat nie oceni pewnie

  • Czy fokus jest realnie dobrze widoczny.
  • Czy użytkownik łatwo zauważa zmianę miejsca.
  • Czy fokus nie ginie w złożonym layoucie.
  • Czy fokus jest wystarczająco czytelny na wszystkich tłach.
  • Czy projekt graficzny nie maskuje wskaźnika fokusu.

Typowe błędy

  • Usuwanie outline w CSS, bo „brzydko wygląda”.
  • Projektowanie tylko stanu hover, bez stanu focus.
  • Brak testów klawiaturą.
  • Fokus widoczny na desktopie, ale niewidoczny w menu mobilnym.
  • Fokus przykryty przez elementy fixed albo sticky.
  • Zbyt delikatna zmiana koloru.
  • Brak widocznego fokusu w komponentach niestandardowych.

Powiązane kryteria

Źródła