Interaktywne elementy sterujące można zaznaczyć za pomocą klawiatury

Opublikowano: 2 maja 2019 r.

Ręcznie sprawdź, czy wszystkie niestandardowe elementy sterujące można zaznaczyć za pomocą klawiatury i czy wyświetlają one wskaźnik zaznaczenia. Kolejność, w jakiej elementy są zaznaczane, powinna być zgodna z kolejnością w DOM. Jeśli nie wiesz, które elementy powinny być aktywne, zapoznaj się z modułem dotyczącym aktywności w kursie Learn Accessibility na web.dev.

Jak przeprowadzić test ręczny

Aby sprawdzić, czy element niestandardowy można zaznaczyć i czy wyświetla on wskaźnik zaznaczenia, zacznij od przechodzenia między elementami witryny za pomocą klawisza Tab. Użyj klawisza TAB (lub SHIFT + TAB), aby przechodzić między elementami sterującymi, a klawiszy strzałek oraz ENTER i SPACE, aby zmieniać ich wartości (zobacz też Podstawy obsługi klawiatury):

Czy możesz korzystać ze wszystkich interaktywnych elementów sterujących na stronie? Czy każdy element interaktywny ma wskaźnik fokusu?

Rozwiązanie

Jeśli nie możesz przejść do wszystkich elementów na stronie za pomocą klawisza Tab, może być konieczne użycie tabindex, aby poprawić możliwość zaznaczania tych elementów.

Aby umożliwić zaznaczanie niestandardowego elementu sterującego, wstaw go do naturalnej kolejności tabulacji za pomocą atrybutu tabindex="0" (zobacz też Sterowanie zaznaczaniem za pomocą atrybutu tabindex). Na przykład:

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

Może też być konieczne dodanie odpowiednich ról ARIA do elementów sterujących niestandardowych. Zobacz Elementy sterujące mają role ARIA.

Jeśli nie widzisz wskaźnika fokusu, rozważ użycie :focus, aby zawsze go wyświetlać. Niezależnie od tego, czy do przejścia do niego używasz myszy czy klawiatury, wskaźnik zaznaczenia przycisku zawsze wygląda tak samo (patrz też Styl zaznaczenia).

Dlaczego to jest ważne

Użytkownicy, którzy nie mogą lub nie chcą używać myszy, korzystają z nawigacji za pomocą klawiatury jako głównego sposobu dostępu do wszystkich elementów na ekranie. Dobre wrażenia z korzystania z klawiatury zależą od logicznej kolejności tabulacji i rozróżnialnych stylów zaznaczenia. Jeśli użytkownik klawiatury nie widzi ani nie wie, co jest zaznaczone, nie może wchodzić w interakcję ze stroną.

Więcej informacji o ułatwieniach dostępu znajdziesz w sekcji Ułatwienia dostępu.

Zasoby