2.4.7 Widoczny fokus - poziom AA

Podczas nawigacji klawiaturą użytkownik musi widzieć, który element interfejsu jest aktualnie aktywny, czyli ma fokus klawiatury, bo bez tego nie da się pewnie poruszać po stronie ani wykonywać działań.

O co chodzi w kryterium 2.4.7 Widoczny fokus?

Gdy ktoś porusza się po stronie klawiszem Tab, fokus przeskakuje po linkach, przyciskach, polach formularzy, elementach menu. W każdym momencie użytkownik musi mieć jasny sygnał: jestem tutaj.

To nie jest detal estetyczny. Jeśli fokus jest niewidoczny albo ledwo zauważalny, użytkownik:

• gubi się,
• klika „w ciemno”,
• uruchamia złe rzeczy
• albo rezygnuje.

Najczęstsze powody niespełnienia kryterium sukcesu 2.4.7

Brak ramki focusu

Fokus jest usunięty w stylach (np. przez wyłączenie obrysu), więc podczas tabowania nie widać żadnego wyróżnienia elementu.

Niewidoczny dla użytkownika focus

Wyróżnienie fokusu jest tak słabe, że praktycznie go nie widać (np. delikatna poświata w kolorze podobnym do tła).

Wybiórcza ramka focusa

Fokus jest widoczny tylko w części komponentów, a znika w elementach niestandardowych (menu, przyciski z ikonami, własne selecty, elementy w modalach). Użytkownik raz widzi fokus, a raz nie, przez co traci orientację.

Jak sprawdzić 2.4.7 na gotowej stronie www?

Odłóż mysz i użyj przycisku "Tab". Przejdź przez menu, linki w treści, przyciski, formularze, modale. W każdym kroku fokus powinien być dobrze widoczny.

Jeżeli fokus „znika” w którymś komponencie albo jest tak subtelny, że nie da się go zauważyć, to zachodzi konkretny problem z kryterium 2.4.7.

Rekomendacje jak spełnić kryterium 2.4.7

Zostaw wyraźny styl fokusu dla wszystkich elementów interaktywnych: linków, przycisków, pól formularzy i komponentów niestandardowych. Najważniejsze, żeby wyróżnienie było zauważalne na tle, na którym element się znajduje.

Dopilnuj spójności: fokus powinien działać w całym serwisie, także w menu, w stopce, w formularzach, w popupach itd.

Pełny tekst kryterium 2.4.7 Widoczny fokus

Każdy interfejs posiadający możliwość obsługi przy pomocy klawiatury ma tryb obsługi, w którym fokus klawiatury jest stale widoczny.

Źródło: https://www.w3.org/Translations/WCAG21-pl/#widoczny-fokus

Chcesz wiedzieć więcej?

• 2.1.1 Klawiatura - poziom A
• 2.1.2 Brak pułapki na klawiaturę - poziom A
• 2.1.3 Klawiatura (bez wyjątków) - poziom AAA
• 2.1.4 Jednoznakowe skróty klawiaturowe - poziom A
• 2.2.1 Dostosowanie czasu - poziom A
• 2.2.2 Pauza, zatrzymanie, ukrycie - poziom A
• 2.2.3 Brak czasu - poziom AAA
• 2.2.4 Przerywanie - poziom AAA
• 2.2.6 Ostrzeżenie o limicie czasu - poziom AAA
• 2.3.1 Trzy błyski lub wartości poniżej progu - poziom A
• 2.3.2 Trzy błyski - poziom AAA
• 2.3.3 Animacja po interakcji (Poziom AAA)
• 2.4.1 Możliwość pominięcia bloków - poziom A
• 2.4.2 Tytuł strony - poziom A
• 2.4.3 Kolejność fokusu - poziom A
• 2.4.4 Cel łącza (w kontekście) - poziom A
• 2.4.5 Wiele dróg - poziom AA
• 2.4.6 Nagłówki i etykiety - poziom AA
• 2.4.7 Widoczny fokus - poziom AA
• 2.4.8 Lokalizacja - poziom AAA
• 2.4.9 Cel łącza (z samego łącza) - poziom AAA
• 2.4.10 Nagłówki sekcji - poziom AAA
• 2.5.1 Gesty wskazujące - poziom A
• 2.5.2 Rezygnacja ze wskazania - poziom A
• 2.5.3 Etykieta w nazwie - poziom A
• 2.5.4 Aktywowanie ruchem - poziom A
• 2.5.5 Rozmiar celu - poziom AAA
• 2.5.6 Równoległy mechanizm wprowadzania danych - poziom AAA