Elementy sterujące niestandardowe mają powiązane etykiety

Niestandardowe interaktywne elementy sterujące powinny być dostępne do zaznaczenia. Jeśli za pomocą JavaScriptu zmienisz element <div> w zaawansowane menu, nie zostanie on automatycznie wstawiony do kolejności kart. Musisz ręcznie sprawdzić, czy wszystkie niestandardowe elementy sterujące można zaznaczyć za pomocą klawiatury. Zobacz też Podstawy korzystania z klawiatury.

Testowanie ręczne

Aby sprawdzić, czy można zaznaczyć to ustawienie niestandardowe, nawiguj po witrynie, naciskając klawisz TAB:

Czy masz dostęp do wszystkich interaktywnych elementów sterujących na stronie? Jeśli nie, użyj tabindex, aby poprawić ostrość tych ustawień. Zobacz też Kontrolowanie zaznaczenia za pomocą indeksu tabulacji.

Rozwiązanie

Aby niestandardowe elementy sterujące można było zaznaczyć, wstaw je w naturalnej kolejności kart za pomocą polecenia tabindex="0". Na przykład:

<div tabindex="0">Focus me with the TAB key</div>

Dlaczego to jest ważne

W przypadku użytkowników, którzy nie mogą lub nie chcą korzystać z myszy, nawigacja za pomocą klawiatury jest podstawowym sposobem na dotarcie do wszystkich elementów na ekranie. Prawidłowe działanie klawiatury zależy od logicznej kolejności kart i łatwego do rozpoznania stylów zaznaczenia. Jeśli użytkownik klawiatury nie widzi zaznaczonego elementu, nie może wchodzić ze stroną w interakcję.

Więcej informacji znajdziesz w artykule Jak przeprowadzić weryfikację ułatwień dostępu.

Zasoby