- Poziom
- AA
- Od wersji
- WCAG 2.2
- Pozycje
- 49 / 193
2.4.11 Fokus niezasłonięty (minimum)
Gdy element dostaje fokus z klawiatury, nie może być całkowicie schowany za czymś, co strona kładzie na wierzchu, na przykład za przyklejonym nagłówkiem albo banerem cookies.
/ Czego wymaga
Przyklejone nagłówki, stałe stopki, banery cookies i okienka czatu zostają na miejscu, gdy strona przewija się pod nimi. Kiedy osoba korzystająca z klawiatury przechodzi klawiszem Tab do linku, który przeglądarka przewinęła pod jeden z nich, link ma fokus i jego wskaźnik jest narysowany, ale nikt go nie widzi. Użytkownik dalej naciska Tab i nie ma pojęcia, gdzie jest. Zatrzymuje to osoby, które polegają na klawiaturze i na wzroku, oraz osoby używające powiększenia.
Kryterium nie jest spełnione tylko wtedy, gdy komponent z fokusem jest całkowicie zasłonięty przez treść stworzoną przez autora. Komponent zasłonięty częściowo na tym poziomie przechodzi, a kryterium 2.4.12 na poziomie AAA wymaga, by żadna jego część nie była ukryta. WCAG dodaje uwagi: gdy użytkownik może przesuwać treść, liczy się tylko jej położenie początkowe, treść otwarta przez użytkownika może zasłaniać fokus, a jeśli zasłaniającą treść da się zamknąć bez przenoszenia fokusu, na przykład klawiszem Escape, komponent nie jest uznawany za ukryty.
To kryterium jest nowe w WCAG 2.2 i nie należy do WCAG 2.0 ani 2.1.
/ Jak strony go nie spełniają
- Przyklejony nagłówek zasłania linki przy górnej krawędzi okna, gdy użytkownik cofa się klawiszami Shift+Tab.
- Stały pasek stopki zasłania kontrolki przy dolnej krawędzi okna, gdy użytkownik idzie klawiszem Tab do przodu.
- Baner cookies, który nie zatrzymuje fokusu w sobie, leży na stronie, a fokus przechodzi po linkach pod nim.
- Okienko czatu albo pływająca promocja przypięta w rogu leży na przycisku wysyłania formularza.
- Przyklejony nagłówek tabeli albo panel boczny chowa komórkę lub link z fokusem w przewijanym obszarze pod nim.
/ Jak sprawdzić samodzielnie
- Wczytaj stronę na świeżo, zostaw otwarty baner cookies i przejdź klawiszem Tab przez całą stronę. Przy każdym zatrzymaniu sprawdź, czy widać choć część elementu z fokusem.
- Na dole strony wróć w górę klawiszami Shift+Tab. W tym kierunku przyklejone nagłówki chowają fokus najczęściej.
- Powtórz w małym oknie albo przy powiększonym widoku przeglądarki, gdzie przypięte paski zajmują większą część okna.
- Gdy fokus znika, wpisz w konsoli DevTools document.activeElement i obejrzyj element, żeby zobaczyć, co jest narysowane nad nim.
/ Jak to naprawić
- Ustaw na elemencie html właściwość scroll-padding-top równą wysokości przyklejonego nagłówka, a dla stałej stopki scroll-padding-bottom, żeby przeglądarka kończyła przewijanie, zanim element z fokusem wejdzie pod pasek.
- Albo ustaw scroll-margin-top i scroll-margin-bottom na samych elementach przyjmujących fokus.
- Włącz baner cookies w układ strony, tak żeby spychał treść w dół, albo zbuduj go jako okno modalne, które trzyma fokus, dopóki użytkownik nie odpowie.
- Odpinaj paski przy małej wysokości okna zapytaniem o media, które zamienia position: sticky na position: static.
- Odsuń okienka czatu i pływające przyciski od kontrolek formularzy i pozwól je zamknąć przyciskiem oraz klawiszem Escape.
/ Co sprawdza nasz skaner
Nasz test focus-obscured działa w prawdziwej przeglądarce. Daje fokus maksymalnie 80 zatrzymaniom tabulatora, pozwala przeglądarce przewinąć stronę do każdego z nich, a potem sprawdza, co jest narysowane w trzech punktach elementu: w dwóch górnych rogach i na środku. Jeśli co najmniej dwa zakrywa coś z pozycją fixed albo sticky, zgłasza to zatrzymanie. Nie sprawdza, czy zasłaniającą treść da się zamknąć, i może zgłosić element zasłonięty tylko częściowo.
/ Kto je łamie, według naszych pomiarów
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Czy przyklejony nagłówek narusza WCAG 2.2?
Nie przez to, że istnieje. Narusza 2.4.11 wtedy, gdy komponent dostający fokus z klawiatury kończy całkowicie schowany za nim. Jeśli przeglądarka trzyma element z fokusem poza nagłówkiem, co zapewnia scroll-padding-top, przyklejony nagłówek przechodzi. Testuj, cofając się klawiszem Tab w górę strony, bo właśnie wtedy elementy wsuwają się pod nagłówek.
Czy częściowo zasłonięty element z fokusem jest błędem?
Nie na poziomie AA. Kryterium 2.4.11 to wersja minimalna i nie jest spełnione tylko wtedy, gdy komponent jest zasłonięty w całości. Kryterium 2.4.12 Fokus niezasłonięty (wzmocniony) na poziomie AAA wymaga, by żadna część komponentu nie była ukryta. Częściowo zasłonięty fokus i tak utrudnia obsługę, więc warto go naprawić tą samą zmianą scroll-padding.
Czy baner cookies narusza 2.4.11?
Może. Baner przypięty do dolnej krawędzi okna, który zostaje otwarty, gdy fokus przechodzi po stronie pod nim, zasłoni część elementów z fokusem całkowicie. Baner zbudowany jako okno modalne, które trzyma fokus w środku, dopóki użytkownik nie odpowie, tego nie robi, podobnie jak baner, który spycha treść strony w dół, zamiast ją zakrywać.