Cel kryterium – czyli o co chodzi?
Kryterium 2.4.7 (poziom AA) dotyczy widocznego wskaźnika fokusu, który pozwala użytkownikowi zorientować się, który element interfejsu jest aktualnie zaznaczony i gotowy do interakcji. Ma to kluczowe znaczenie dla osób korzystających z nawigacji klawiaturą, ponieważ bez widocznego oznaczenia mogliby oni stracić orientację na stronie.
Kto skorzysta z tego rozwiązania?
Fokus jest niezwykle ważny dla:
- Osób, które nie korzystają z myszy i nawigują po stronie wyłącznie za pomocą klawiatury.
- Osób z ograniczeniami ruchowymi, które używają urządzeń alternatywnych, np. przełączników sterowanych głosem lub joysticków.
- Osób niewidomych lub niedowidzących, które wspierają się czytnikami ekranu i potrzebują wyraźnego oznaczenia aktywnego elementu.
Jak działa fokus?
Gdy użytkownik porusza się po stronie internetowej klawiszem TAB (przejście do następnego interaktywnego elementu) lub SHIFT + TAB (powrót do poprzedniego elementu), powinien widzieć wyraźne oznaczenie wskazujące, gdzie aktualnie znajduje się kursor klawiatury. Standardowe przeglądarki automatycznie stosują domyślny fokus dla elementów takich jak:
<a>– linki<button>– przyciski<input>– pola formularzy<textarea>– pola tekstowe<select>– rozwijane listy
Natomiast niestandardowe elementy interaktywne, stworzone np. z użyciem <div> czy <span>, wymagają ręcznej implementacji fokusu przy użyciu atrybutu tabindex="0".
Jak zapewnić czytelny fokus?
Aby fokus spełniał standardy WCAG, należy pamiętać o:
- Widoczności – fokus powinien być wyraźny i dobrze odróżniać się od tła.
- Kontraście – wskaźnik fokusu powinien mieć wystarczający kontrast w stosunku do otoczenia (minimum 3:1 zgodnie z WCAG 2.1).
- Kolejności – elementy powinny być dostępne w logicznej kolejności zgodnej z ich rozmieszczeniem na stronie.
- Równoważnym działaniu na różnych urządzeniach – fokus powinien być widoczny nie tylko na komputerach, ale także na urządzeniach mobilnych, do których można podłączyć klawiaturę.
Przykłady poprawnej implementacji
Oto kilka sposobów na zapewnienie dobrego fokusu:
- Domyślny styl przeglądarki: jeśli strona jest zbudowana semantycznie (np. używa
<button>zamiast<div>do przycisków), większość przeglądarek automatycznie wyświetli wskaźnik fokusu. - Ręczne stylowanie CSS: jeśli chcesz poprawić widoczność fokusu, możesz dodać stylowanie w CSS:
button:focus, a:focus { outline: 3px solid #ffcc00; box-shadow: 0 0 5px #ffcc00; } - Użycie
tabindex: dla niestandardowych elementów interaktywnych (np. przycisków w JavaScript), można dodać obsługę fokusu:
<div role="button" tabindex="0">Kliknij tutaj</div> Dlaczego to jest ważne?
Brak widocznego fokusu powoduje, że użytkownicy klawiatury mogą łatwo stracić orientację i nie będą w stanie korzystać z interaktywnych elementów strony. Poprawnie wdrożony fokus znacząco podnosi użyteczność serwisu i sprawia, że jest on dostępny dla wszystkich.
Czy wiesz, że?
W WCAG 2.2 pojawiły się nowe wymagania dotyczące fokusu, takie jak jego minimalny rozmiar i kontrast w stosunku do otaczających elementów. Oznacza to, że przyszłe standardy będą jeszcze bardziej restrykcyjne w zakresie widoczności fokusu!
Dbając o widoczność fokusu, zwiększasz komfort korzystania ze strony dla wszystkich użytkowników, niezależnie od sposobu nawigacji.
