Fokus nieprzesłonięty (rozszerzony)

Co wymaga kryterium

Kryterium 2.4.11 dopuszcza częściowe przykrycie, o ile jakaś część sfokusowanego elementu pozostaje widoczna. Kryterium 2.4.12 znosi to dopuszczenie: sfokusowany element musi być w pełni widoczny. Tabowanie na przycisk musi umieścić cały przycisk w rzutni bez żadnych nakładek — bez stałego nagłówka obcinającego górną krawędź, bez dymka czatu obcinającego prawą dolną część.

Jest to poziom AAA i cel aspiracyjny dla większości zespołów, ale właściwy punkt docelowy dla systemów projektowania stosowanych w administracji publicznej, ochronie zdrowia i edukacji, gdzie niezawodność klawiatury jest bezwzględnie wymagana.

Jak spełnić wymaganie

• Ustaw scroll-padding-top i scroll-padding-bottom na kontenerze przewijania z pewnym zapasem — nieco więcej niż łączna wysokość wszystkich stałych elementów.
• Automatycznie ukrywaj widgety czatu, gdy fokusowany element zbliża się do ich pozycji, lub odsuwaj je przy zdarzeniach fokusu.
• Dla stałych stopek rozważ niestałe alternatywy lub kompresuj je podczas przewijania, by zakrywały tylko treści nagłówkowe, nigdy kontrolki.
• Sprawdź każdą stronę z jednoczesnym stałym nagłówkiem i stałą stopką. „Bezpieczna strefa” w środku szybko się kurczy, zwłaszcza na małych rzutniach.
• Testuj przy 200% powiększeniu przeglądarki i przy 400% (zgodnie z 1.4.10 Reflow) — stałe elementy działające przy 100% mogą teraz wypełniać cały ekran.

Typowe błędy

• Stały nagłówek zakrywający górne 4 px każdego pierścienia fokusu — akceptowalne dla 2.4.11, błąd dla 2.4.12.
• Cele linków pomijających lądujące u samej góry <main> z pierścieniem fokusu częściowo obciętym przez stały nagłówek.
• Pływające przyciski „Pomoc” w prawym dolnym rogu nakładające się na 1 px narożnika sfokusowanych przycisków w tym obszarze.
• Bannery promocyjne wstrzykiwane przez tagi marketingowe, nieuwzględnione w tokenach scroll-padding systemu projektowania.
• Nawigacja dolna na urządzeniach mobilnych, gdzie Tab na ostatnie pole formularza pokazuje pole z pierścieniem fokusu lekko obciętym przy dolnej krawędzi.

Dlaczego to ważne

Dla użytkowników słabowidzących, którzy polegają na wskaźniku fokusu do śledzenia swojego położenia, nawet częściowe obcięcie może sprawić, że wskaźnik stanie się faktycznie niewidoczny — kontur 2 px z obciętym górnym pikselem wygląda jak linia 1 px, łatwa do pomylenia z obramowaniem. Rozszerzone kryterium traktuje wskaźnik fokusu jako element interfejsu pierwszej klasy, który zasługuje na pełną ramkę ograniczającą na ekranie. Zobowiązanie do 2.4.12 zmusza zespoły do racjonalizacji budżetu stałych elementów, co często poprawia układ dla wszystkich użytkowników.