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

2.4.11 Fokus nie jest zasłonięty (minimum)

WCAG 2.4.11 Focus Not Obscured (Minimum)

W skrócie

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.

Poziom
AA Standard, którego wymaga prawo – usuwa najczęstsze bariery.
Czy to obowiązkowe?
Nowe w WCAG 2.2 – zalecane · od WCAG 2.2
Kto w zespole odpowiada
Programowanie, Projektowanie UX/UI
Jak to wykryć
Tylko test ręczny

Wyjaśnienie prostym językiem: Widoczny fokus

Komu i dlaczego to pomaga

Jeśli fokus chowa się pod przyklejonym paskiem, osoba z klawiaturą traci orientację.

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

Jak zrobić to dobrze

  • Dodaj scroll-padding-top równy wysokości przyklejonego nagłówka.
  • Zamknięcie banera cookies powinno być pierwszą rzeczą dostępną z klawiatury.

Najczęstsze błędy

  • Przyklejony (sticky) nagłówek zasłaniający element, do którego przewinął się fokus.
  • Baner cookies zasłaniający dół strony przez cały czas.
  • Czat w rogu zasłaniający przyciski.

Przykład w kodzie

Dobrze
html { scroll-padding-top: 5rem; } /* wysokość przyklejonego nagłówka */

Jak to sprawdzić

  1. Przejdź Tabem po stronie z otwartym banerem cookies i przewiniętym nagłówkiem – czy aktywny element zawsze jest choć częściowo widoczny?

Tylko test ręczny. Automat tego nie sprawdzi – potrzebny jest test ręczny lub audyt ekspercki.

Czy to obowiązkowe?

Nowe w WCAG 2.2 – zalecane

Polskie prawo odsyła dziś do WCAG 2.1 (przez normę EN 301 549), więc to kryterium nie jest jeszcze formalnie obowiązkowe. Kolejne wydania normy mają jednak objąć WCAG 2.2, a kryterium opisuje realną barierę – warto spełnić je już teraz.

Naucz się tego w praktyce

Zobacz wszystkie kursy dostępności

Powiązane kryteria

2.4.7

Widoczny fokus

Poziom AA Wymagane prawem

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

1.4.10

Dopasowanie do ekranu

Poziom AA Wymagane prawem

Treść musi się dopasować do szerokości 320 px (odpowiednik zoomu 400% na ekranie 1280 px) bez przewijania w dwóch kierunkach – wyjątki to np. mapy, tabele danych i edytory.

Ostatnia aktualizacja: .
Źródło: Understanding SC 2.4.11: Focus Not Obscured (Minimum) – oficjalne objaśnienie W3C (po angielsku).