Obsługa klawiaturą i widoczny fokus: test, który zajmuje dwie minuty
Czego wymagają kryteria
Kryterium 2.1.1 wymaga, aby każdą funkcję serwisu dało się obsłużyć z klawiatury. Kryterium 2.1.2 zakazuje pułapek, czyli sytuacji, w której da się wejść w element, ale nie da się z niego wyjść. Kryterium 2.4.7 wymaga, aby element z fokusem był widoczny.
Kogo to dotyczy
Osób niewidomych, które nie używają myszy w ogóle. Osób z niepełnosprawnością ruchową, które korzystają z klawiatury albo przełącznika. Osób z urazem nadgarstka. A także każdego, kto wypełnia formularz szybciej tabulatorem niż myszą.
Test, który możesz zrobić teraz
Odłóż mysz. Naciskaj tabulator i przejdź przez całą stronę. Sprawdź trzy rzeczy: czy zawsze widzisz, gdzie jesteś; czy kolejność ma sens i odpowiada układowi wizualnemu; czy dasz radę wykonać pełną ścieżkę zakupu albo wysłać formularz kontaktowy. Otwórz też okno modalne i spróbuj je zamknąć klawiszem Escape.
Trzy najczęstsze usterki
Usunięty obrys. Ktoś uznał, że domyślny obrys jest brzydki, i wpisał regułę usuwającą go w całym serwisie. Efekt: osoba korzystająca z klawiatury nie wie, gdzie się znajduje.
/* źle */
:focus { outline: none; }
/* dobrze: wyraźny własny wskaźnik */
:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 2px;
}
Fokus pod przyklejonym nagłówkiem. Element dostaje fokus, strona przewija się do niego, ale ląduje pod belką przyklejoną do góry ekranu. Formalnie to kryterium 2.4.11 z WCAG 2.2, praktycznie problem istnieje od dawna.
html { scroll-padding-top: 90px; }
Element klikalny, który nie jest przyciskiem. Div z obsługą kliknięcia nie jest osiągalny tabulatorem i nie reaguje na Enter. Używaj znaczników button i a, zamiast odtwarzać ich zachowanie.
Link pomijający
Osoba korzystająca z klawiatury przechodzi przez menu na każdej podstronie od nowa. Link pomijający, ukryty do momentu otrzymania fokusu, rozwiązuje to jednym elementem i jest wymagany przez kryterium 2.4.1.
<a class="pomin" href="#tresc">Przejdź do treści</a> … <main id="tresc">