Sprawdź ręcznie, czy wszystkie niestandardowe elementy sterujące można zaznaczyć przy użyciu klawiatury i wyświetlają wskaźnik zaznaczenia. Kolejność elementów, na których skupia się użytkownik, powinna być zgodna z kolejnością w DOM. Jeśli nie masz pewności, które elementy powinny być skupione, zapoznaj się z modułem na temat skupienia w szkoleniu z ułatwień dostępu na stronie web.dev.
Jak przeprowadzić test ręczny
Aby sprawdzić, czy element sterujący można zaznaczyć i czy wyświetla on wskaźnik, zacznij od poruszania się po witrynie klawiszem Tab.
Aby poruszać się między elementami sterującymi, użyj klawisza TAB
(lub SHIFT +
TAB
). Aby zmieniać ich wartości, użyj klawiszy strzałek oraz ENTER
i SPACE
(patrz też Podstawy korzystania z klawiatury):
Czy możesz korzystać ze wszystkich interaktywnych elementów sterujących na stronie? Czy przy każdym interaktywnym elemencie sterowania znajduje się wskaźnik skupienia?
Rozwiązanie
Jeśli nie możesz przełączać się między elementami na stronie,
możesz użyć tabindex
, aby ułatwić skupienie się na tych elementach.
Aby umożliwić skupienie na elemencie sterowania niestandardowego,
wstaw element sterowania niestandardowego do naturalnego porządku elementów sterowania za pomocą tabindex="0"
(patrz też Ustawienie fokusa za pomocą tabindex).
Na przykład:
<div tabindex="0">Focus me with the TAB key</div>
Konieczne może być też dodanie odpowiednich ról ARIA do niestandardowych elementów sterujących. Zobacz Elementy sterujące niestandardowe mają role ARIA.
Jeśli nie widzisz wskaźnika ostrości,
rozważ użycie :focus
, aby zawsze wyświetlać wskaźnik ostrości.
Niezależnie od tego, czy używasz myszy czy klawiatury, aby przełączyć się na ten przycisk, wskaźnik skupienia przycisku zawsze wygląda tak samo (patrz też Styl skupienia).
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 może zobaczyć ani dowiedzieć się, co jest aktywne, nie może wchodzić w interakcję ze stroną.
Więcej informacji znajdziesz w artykule Jak przeprowadzić przegląd ułatwień dostępu.
Zasoby
- Weryfikacja kodu źródłowego pod kątem możliwości zaznaczania elementów sterujących za pomocą klawiatury.
- Niektóre elementy mają wartość atrybutu
[tabindex]
większą niż0
. - Używaj semantycznego kodu HTML, aby ułatwić sobie korzystanie z klawiatury.