WCAG 2.4.11 Fokus niezasłonięty (minimum)

Kryterium sukcesu 2.4.11 jest nowością w WCAG 2.2. Dba o to, by osoby korzystające z klawiatury rzeczywiście widziały element, do którego przeszły, zamiast tracić fokus za przyklejonym nagłówkiem, przyciskiem czatu lub banerem cookie. To poziom AA, a kryterium należy do normy EN 301 549 (punkt 9.2.4.11).

Czego wymaga kryterium

Gdy komponent interfejsu użytkownika otrzymuje fokus klawiatury, nie jest całkowicie zasłonięty przez treść utworzoną przez autora.

Najważniejsze punkty według W3C:

• na poziomie AA dopuszczalne jest częściowe zasłonięcie — element nie może być zasłonięty całkowicie. Poziom AAA (2.4.12 Fokus niezasłonięty (wzmocniony)) wymaga, by żadna część nie była zasłonięta;
• jeśli użytkownik może przesuwać treść (np. przeciągnąć pasek narzędzi), bierze się pod uwagę tylko początkowe położenie tej treści;
• treść otwarta przez użytkownika może zasłaniać element z fokusem; jeśli użytkownik może go odsłonić bez przenoszenia fokusu klawiatury (np. zamykając okienko klawiszem Esc), element nie jest uznawany za zasłonięty.

Typowe błędy w sklepie internetowym

• przyklejony nagłówek lub pasek „Dodaj do koszyka”, który zasłania linki i przyciski, gdy użytkownik przechodzi tabulatorem w dół strony;
• baner zgody na cookie przyklejony do dołu ekranu, który ukrywa za sobą linki w stopce i pola formularzy;
• pływający przycisk czatu lub „Do góry” nad polami w procesie zamówienia;
• pasek promocyjny, który wysuwa się i zasłania element z fokusem;
• niemodalny panel „Newsletter”, który pozostaje otwarty, gdy fokus przesuwa się za niego.

Jak to sprawdzić

Automatycznie: dla tego kryterium nie ma reguły axe-core. To, czy fokus jest zasłonięty, zależy od pozycji przewinięcia i nakładających się warstw w chwili otrzymania fokusu, czego axe nie testuje, dlatego potrzebna jest kontrola ręczna.

Ręcznie: w oknie wielkości laptopa, a potem przy powiększeniu 200 %, przejść tabulatorem przez całą stronę z wciąż otwartym banerem cookie, a następnie jeszcze raz po jego zamknięciu. Obserwować przyklejony nagłówek, przyklejone paski „Dodaj do koszyka” i pływające przyciski. Za każdym razem, gdy fokus trafia na element, przynajmniej jego część musi być widoczna. Zwrócić uwagę na formularz zamówienia i stopkę.

Jak to naprawić

• Dodać do przewijanego kontenera scroll-padding-top (i scroll-padding-bottom) równe wysokości przyklejonych pasków, aby elementy z fokusem przewijały się do wolnego obszaru.
• Zrobić z banera cookie okno modalne (fokus przechodzi do niego i zostaje tam do dokonania wyboru) albo umieścić go tak, by nie zasłaniał treści.
• Zmniejszyć przyklejone elementy na małych ekranach i przy powiększeniu.
• Pozwolić użytkownikom zamykać pływające widżety klawiszem Esc i z klawiatury.

Powiązane kryteria

• 2.4.7 Widoczny fokus — wskaźnik fokusu musi być widoczny.
• 2.4.3 Kolejność fokusu — fokus musi przesuwać się w logicznej kolejności.
• Lista kontrolna WCAG 2.2 — co jeszcze nowego w WCAG 2.2.

Najczęstsze pytania

Czy przyklejony nagłówek narusza WCAG 2.4.11?

Tylko wtedy, gdy całkowicie zasłania element z fokusem. Jeśli część elementu pozostaje widoczna, 2.4.11 (AA) jest spełnione; kryterium AAA 2.4.12 wymaga, by żadna część nie była zasłonięta. Zwykle pomaga CSS scroll-padding.

Czy baner cookie narusza 2.4.11?

Niemodalny baner cookie, który całkowicie zasłania element otrzymujący fokus, nie spełnia kryterium. W3C opisuje sposoby, by tego uniknąć: zrobić z banera okno modalne, które przejmuje fokus, użyć scroll padding, aby elementy z fokusem nie znajdowały się pod nim, albo zamykać baner, gdy fokus go opuści.

Czy 2.4.11 to nowość w WCAG 2.2?

Tak. Fokus niezasłonięty (minimum) dodano w WCAG 2.2 na poziomie AA, razem z kryterium Fokus niezasłonięty (wzmocniony) na poziomie AAA.