Fokus nieprzesłonięty (minimum)

Co wymaga kryterium

Gdy użytkownik tabuluje do kontrolki, co najmniej część tej kontrolki musi pozostać widoczna. Najczęstszy wzorzec błędu: użytkownik tabuluje poniżej stałego nagłówka, strona automatycznie przewija się tak, że sfokusowany link trafia za stały pasek, i użytkownik nie widzi już pierścienia fokusu. Kontrolka nadal ma fokus i reaguje na Enter, ale użytkownik jest nieświadomy jej położenia.

Kryterium ustala poziom minimalny: sfokusowany element może być częściowo przykryty, ale nie całkowicie. Poziom AAA — 2.4.12 — zaostrza wymaganie do „żadnego przykrycia”.

To jedno z czterech nowych kryteriów operacyjności wprowadzonych w WCAG 2.2 i wywarło duży wpływ, ponieważ stałe nagłówki, stałe stopki, bannery cookie i dymki widgetów czatu są powszechne.

Jak spełnić wymaganie

• Dodaj CSS scroll-margin-top do elementów fokusowanych o wartości równej wysokości stałego nagłówka, by przeglądarki automatycznie przewijały sfokusowaną kontrolkę poza nagłówek.
• Dla stałych stopek i dymków czatu upewnij się, że nie zasłaniają w całości żadnego elementu fokusowanego. Albo zmniejszaj je przy fokusu, albo zakotwicz tak, by zostawiały bufor przy krawędzi strony.
• Bannery cookies i odrzucalne nakładki: nigdy nie czyń ich stałymi w sposób pułapkujący późniejsze stop tabulacji pod nimi. Uczyń je modalnymi (z pułapką fokusu) lub nieblokującymi.
• Na stronach zarówno ze stałym nagłówkiem, jak i stałą stopką testuj sekwencję tabulacji wokół pionowego centrum rzutni — tam sfokusowany element jest ściśnięty.
• Użyj scroll-padding-top na kontenerze przewijania jako rezerwę dla starszych przeglądarek.

html { scroll-padding-top: 80px; }       /* dopasuj do wysokości stałego nagłówka */
:target, :focus { scroll-margin-top: 80px; }

Typowe błędy

• Stały nagłówek bez kompensacji scroll-padding: każde tabowanie do górnej połowy rzutni ukrywa pierścień fokusu.
• Banner zgody na cookies przypięty do dołu, zakrywający ostatni rząd pól formularza, gdy te pola otrzymują fokus.
• Dymek live czatu w prawym dolnym rogu, nakładający się na przycisk „Wyślij” w rogu formularza.
• Stałe paski promocyjne (banery Black Friday) dodawane przez zespoły marketingu bez aktualizacji tokenów scroll-padding.
• Stałe nagłówki tabel w dashboardach, gdzie Tab do pierwszego wiersza danych trafia za nagłówek.

Dlaczego to ważne

Kryterium naprawia klasę błędów frustrujących użytkowników klawiatury na co dzień, która rzadko pojawia się w automatycznych skanach — żadna reguła axe nie przewidzi, przy jakim przewinięciu stały element nałoży się na sfokusowany. Dotyczy też nieproporcjonalnie użytkowników powiększenia ekranu, których widoczna rzutnia jest już zmniejszona do ćwierci ekranu, więc stały element zajmuje jeszcze większy jej fragment.

Należy oczekiwać, że 2.4.11 będzie jednym z najczęściej cytowanych nowych wyników w raportach audytów w 2026 roku. Poprawka jest niewielka (kilka tokenów CSS), ale wymaga, by każdy zespół odpowiedzialny za stały element — nagłówek, stopkę, banner, widget — skoordynował swoje działania.