Focus na stronie — dlaczego jest tak ważny?

Na stronie wszystko działa myszą. Menu się rozwija, przyciski reagują, formularz można wysłać. Potem odkładasz mysz, naciskasz Tab i nagle okazuje się, że nie wiadomo, gdzie właściwie jesteś.

To właśnie rola fokusu. Pokazuje, który element interfejsu jest w danym momencie aktywny dla użytkownika klawiatury. Bez niego można przechodzić po stronie „po omacku”.

Focus to nie ozdobna ramka

Przeglądarka domyślnie zaznacza element, który otrzymał fokus. Problem zaczyna się wtedy, gdy projektant albo frontendowiec usuwa ten efekt, bo „nie pasuje do designu”. Klasyczny przykład to:

button:focus {
  outline: none;
}

Samo usunięcie obrysu nie jest rozwiązaniem. Jeżeli zastępujesz domyślny focus własnym stylem, musi on nadal być dobrze widoczny.

WCAG 2.2 na poziomie AA wymaga między innymi, żeby element mający fokus nie był całkowicie zasłonięty przez treści utworzone przez autora strony. W praktyce problem robią często przyklejone nagłówki, sticky footery, paski zgód na cookies i różnego rodzaju panele przyklejone do krawędzi ekranu.

Najprostszy test: przejdź stronę klawiaturą

Naciśnij Tab i idź po stronie od początku do końca. Nie próbuj od razu analizować każdego kryterium WCAG. Zobacz, czy przez cały czas potrafisz odpowiedzieć na jedno pytanie: gdzie teraz jestem?

• Czy aktywny element jest wyraźnie widoczny?
• Czy fokus przechodzi w logicznej kolejności?
• Czy nie trafia do elementów niewidocznych?
• Czy da się otworzyć i zamknąć menu?
• Czy po zamknięciu modala fokus wraca w sensowne miejsce?
• Czy sticky header lub baner nie zasłania aktywnego elementu?

Ten test zajmuje kilka minut i bardzo szybko ujawnia problemy, których nie widać podczas obsługi myszą.

Widoczny focus nie musi być brzydki

Dostępność nie wymaga niebieskiej ramki wokół każdego elementu. Focus można zaprojektować tak, żeby pasował do identyfikacji wizualnej strony: zmienić kolor obrysu, zastosować dodatkową ramkę, cień albo zmianę tła.

Ważne, żeby zmiana była naprawdę zauważalna. Delikatne przesunięcie koloru z jasnoszarego na trochę ciemniejszy może wyglądać elegancko na makiecie, ale w praktyce użytkownik może go po prostu nie zobaczyć.

Warto też testować focus na różnych tłach. Ten sam obrys może być bardzo wyraźny na białej sekcji i praktycznie znikać na zdjęciu albo ciemnym footerze.

Focus i kolejność to dwie różne rzeczy

Nawet idealnie widoczny focus nie pomoże, jeżeli skacze po stronie bez logiki. Częstym źródłem problemów jest ręczne ustawianie dodatnich wartości tabindex, wizualne przestawianie elementów CSS-em bez zmiany kolejności w DOM albo komponenty JavaScript, które przechwytują fokus w niewłaściwy sposób.

Najbezpieczniej, gdy kolejność interakcji wynika naturalnie ze struktury HTML. Im więcej ręcznego sterowania fokusem, tym łatwiej stworzyć problem, który ujawni się dopiero podczas testów klawiaturą lub czytnikiem ekranu.

Kiedy problem robi się większy

Na prostej stronie wizytówkowej kilka błędów fokusu często da się poprawić szybko. Inaczej wygląda to w rozbudowanej aplikacji, sklepie, serwisie z modalami, filtrami, dropdownami i dynamicznie ładowaną treścią. Tam pojedynczy problem w komponencie może powtarzać się w dziesiątkach miejsc.

Jeśli nie wiesz, czy problem leży w CSS, strukturze HTML czy logice komponentu, napisz na redakcja@dostepnoscwcag.pl. Nasi audytorzy i programiści mogą sprawdzić problem, wskazać sposób naprawy i przygotować wycenę prac.

Źródła

• W3C WAI — Understanding Focus Visible
• W3C WAI — Focus Not Obscured (Minimum)
• W3C WAI — What’s New in WCAG 2.2