Focus

Focus to stan bycia aktywnym odbiorcą danych z klawiatury. Tylko jeden element na stronie może trzymać fokus w danym momencie, a wizualny wskaźnik tego stanu — pierścień focusu — jest najważniejszym sygnałem nawigacyjnym dla użytkowników klawiatury, urządzeń przełącznikowych i czytników ekranu.

Dlaczego fokus ma znaczenie

Znaczna część użytkowników nawiguje po sieci wyłącznie bez myszy:

• Użytkownicy tylko klawiatury z niepełnosprawnościami motorycznymi, które utrudniają lub uniemożliwiają wskazywanie.
• Użytkownicy urządzeń przełącznikowych skanujący interfejsy jednym przyciskiem lub urządzeniami sip-and-puff.
• Użytkownicy czytników ekranu, którzy korzystają z interfejsu klawiaturowego nawet na ekranach dotykowych.
• Użytkownicy sterowania głosem („Kliknij przycisk Wyślij”), których narzędzia rozpoznają polecenia, dopasowując elementy aktywne.

Dla wszystkich nich fokus jest kursorem. To, gdzie fokus jest, dokąd zmierza i jak wygląda, decyduje o tym, czy strona jest w ogóle użyteczna.

Reguły focusu w WCAG

WCAG 2.x i 2.2 zawierają kilka kryteriów dotyczących focusu:

• 2.1.1 Klawiatura (A) — cała funkcjonalność musi być obsługiwalna z klawiatury.
• 2.1.2 Brak pułapki klawiaturowej (A) — użytkownicy klawiatury muszą móc przenieść fokus z dowolnego aktywnego elementu, używając tylko klawiatury.
• 2.4.3 Kolejność focusu (A) — kolejność focusu musi być logiczna i sensowna.
• 2.4.7 Widoczny fokus (AA) — sfokusowany element musi mieć widoczny wskaźnik.
• 2.4.11 Fokus nie zasłonięty (AA, nowość w WCAG 2.2) — przyklejone nagłówki, banery cookie i pływające widżety czatu nie mogą całkowicie ukrywać sfokusowanego elementu.
• 2.4.13 Wygląd focusu (AAA, nowość w 2.2) — wskaźnik focusu musi spełniać określone progi obszaru i kontrastu.

Najczęstsze błędy

• outline: none bez zamiennika. Projektanci usuwają domyślny pierścień, bo nie pasuje do języka wizualnego, i zapominają zastąpić go stylizowanym odpowiednikiem. To błąd na poziomie AA i jednocześnie najczęstszy błąd dostępności.
• Fokus tylko na :focus-visible, nie na :focus. Nowoczesna praktyka używa :focus-visible, by pierścień pokazywał się tylko przy nawigacji klawiaturą, nie przy kliknięciach myszy. To właściwe — ale wskaźnik na :focus-visible nadal musi spełniać kontrast AA.
• Zagubiony fokus po dynamicznych akcjach. Po zamknięciu modalu fokus musi wrócić do elementu wyzwalającego. Po usunięciu wiersza fokus musi przejść do sensownego sąsiada. W przeciwnym razie użytkownik trafia w przypadkowe miejsce (często body dokumentu) i musi od nowa nawigować Tab od góry.
• Ukryty fokus pod przyklejonym chrome’em. Sfokusowany link 50 pikseli od góry strony chowa się za przyklejonym nagłówkiem o tej samej wysokości. Użytkownik tabuje w pozorną pustkę. Ustaw scroll-padding-top równe wysokości nagłówka lub wykryj nakładanie i przewiń sfokusowany element do widoku.

Najszybszy ręczny audyt

Przejdź Tab przez całą stronę od paska adresu do stopki. Jeśli w jakimkolwiek momencie nie widzisz, gdzie jest fokus, nie możesz dosięgnąć kontrolki interaktywnej albo utknąłeś w pułapce focusu — strona nie spełnia 2.4.7 lub 2.1.2.