Cel kryterium – czyli o co chodzi?
Kryterium 2.4.12 (poziom AAA) to rozszerzenie zasad dotyczących widoczności fokusu, wprowadzone w WCAG 2.2. Jego celem jest zapewnienie, że aktywny element na stronie zawsze pozostanie w pełni widoczny, niezależnie od nakładających się na niego innych elementów interfejsu, takich jak paski nawigacyjne, banery czy okna dialogowe.
Kto skorzysta z tego rozwiązania?
Gwarancja pełnej widoczności fokusu ma kluczowe znaczenie dla:
- Osób korzystających z nawigacji klawiaturą – umożliwia im śledzenie interakcji z elementami interfejsu.
- Osób z ograniczeniami motorycznymi, które używają alternatywnych urządzeń sterujących.
- Użytkowników technologii asystujących, np. osób niewidomych, które polegają na czytnikach ekranu i wizualnych wskaźnikach interakcji.
Czym różni się to kryterium od 2.4.11?
Podczas gdy kryterium 2.4.11 (Fokus niezakryty – minimum) wymaga, aby wskaźnik fokusu był przynajmniej częściowo widoczny, wersja wzmocniona (2.4.12) stawia bardziej rygorystyczne wymagania – fokus musi być w pełni widoczny. Oznacza to, że żadne nałożone elementy, takie jak:
- pływające nagłówki (
position: sticky), - okna modalne i powiadomienia,
- banery zgód na pliki cookie,
nie mogą zasłaniać fokusu w żaden sposób.
Jak spełnić to kryterium?
Projektując strony internetowe, należy zadbać o:
- Unikanie zasłaniania aktywnych elementów
Jeśli nawigacja lub inne stałe elementy strony zajmują dużo przestrzeni, należy zapewnić, że fokus przesuwa stronę w taki sposób, by użytkownik zawsze widział aktywny element.
- Automatyczne przewijanie strony
W sytuacji, gdy fokus znajdzie się pod warstwą zasłaniającą (np. modalnym oknem), można zastosować mechanizm automatycznego przewijania (
scrollIntoView()w JavaScript), aby element stał się widoczny. - Testowanie w różnych konfiguracjach
Należy sprawdzić działanie fokusu zarówno na dużych ekranach, jak i urządzeniach mobilnych, gdzie interfejs może różnić się układem.
Dlaczego to jest ważne?
Pełna widoczność fokusu znacząco poprawia komfort korzystania z witryny dla użytkowników nawigujących za pomocą klawiatury i technologii asystujących. Ponadto, eliminacja problemów związanych z zasłanianiem elementów poprawia ogólną jakość interfejsu i ułatwia interakcję wszystkim użytkownikom.
Czy wiesz, że?
Wprowadzenie WCAG 2.2 przyniosło nowe, bardziej rygorystyczne wymagania dotyczące dostępności. Gwarantowanie widoczności fokusu może poprawić nie tylko użyteczność strony, ale także jej zgodność z nowoczesnymi standardami UX.
Dbanie o pełną widoczność fokusu to krok w stronę bardziej inkluzywnych i dostępnych stron internetowych!
