Niestandardowe elementy sterujące powinny być możliwe do wybrania. Jeśli na przykład za pomocą JavaScriptu zmienisz element <div> na menu rozwijane, nie zostanie ono automatycznie wstawione w prawidłowej kolejności kart.
Musisz ręcznie sprawdzić, czy wszystkie niestandardowe elementy sterujące można zaznaczyć przy użyciu klawiatury.
W miarę możliwości używaj semantycznych elementów HTML, które umożliwiają interakcję.
Jak przeprowadzić test
Aby sprawdzić, czy element sterujący niestandardowy można zaznaczyć, naciśnij klawisz TAB, aby poruszać się po witrynie:
Czy możesz korzystać ze wszystkich interaktywnych elementów sterujących na stronie?
Jeśli nie, może być konieczne użycie tabindex, aby ułatwić skupienie się na tych elementach sterujących.
Zobacz też artykuł Kontrolowanie punktu skupienia za pomocą atrybutu tabindex.
Rozwiązanie
Aby umożliwić skupienie na elemencie sterowania niestandardowego, użyj elementu sterowania niestandardowego w naturalnej kolejności kart za pomocą 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, klawiatura jest podstawowym sposobem na poruszanie się po ekranie. Dobre wrażenia z używania klawiatury zależą od logicznego porządku kart i łatwo dostrzegalnych stylów fokusowania. Jeśli użytkownik korzystający z klawiatury nie widzi, na czym jest skupiony kursor, nie może wchodzić w interakcję ze stroną.
Jeśli dopiero zaczynasz testować ułatwienia dostępu, dowiedz się więcej o ręcznym testowaniu ułatwień dostępu i testowaniu technologii wspomagającej.