Zalecana praktyka Priorytet: Drobne · test eksperymentalny: warto sprawdzić ręcznie
Element dostępny z klawiatury nie informuje, czym jest
Element, do którego można dojść klawiszem Tab, np. klikalny div lub span, nie ma roli informującej technologie wspomagające, że jest przyciskiem, linkiem lub innym elementem sterującym. axe oznacza tę kontrolę jako eksperymentalną, więc wyniki trzeba sprawdzić ręcznie. To zalecana dobra praktyka, a nie wymóg WCAG na poziomie AA.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Osoba korzystająca z klawiatury lub czytnika ekranu trafia na element, ale słyszy tylko jego tekst albo nic, bez słów „przycisk” czy „link”. Nie wie, że można go aktywować, więc może pominąć wybór rozmiaru, filtr lub „dodaj do ulubionych”.
Kogo to dotyczy
- użytkownicy czytników ekranu
- osoby korzystające z klawiatury
- osoby sterujące głosem
Jak to naprawić
Używaj natywnych elementów sterujących: <button> do akcji i <a href> do nawigacji. Jeśli własny element musi zostać, dodaj odpowiednią rolę (button, link, tab, checkbox itp.) oraz obsługę klawiatury, jakiej ta rola wymaga. Jeśli element nie jest interaktywny, usuń tabindex, aby nie otrzymywał fokusu. Ponieważ reguła jest eksperymentalna, sprawdź każdy wynik ręcznie przed zmianą kodu.
W Shopify
Zwykle przyczyną jest własny kod motywu lub aplikacji, np. próbki kolorów, szybki podgląd lub przyciski listy życzeń. Zamień klikalny div lub span na <button> w snippecie Liquid albo poproś twórcę aplikacji o poprawkę.
W Shoptet (CZ)
Zależy od szablonu i dodatków. Zgłoś element do Shoptet lub twórcy dodatku; własny kod dodany przez Ciebie możesz poprawić bezpośrednio.
W PrestaShop
Zwykle pochodzi z JavaScriptu motywu lub modułów, takich jak wybór wariantów i slidery. Popraw kod w plikach .tpl i skryptach motywu albo zapytaj autora modułu.
W WooCommerce
Często pochodzi z widżetów kreatora stron lub wtyczek, które robią z divów elementy klikalne. Zaktualizuj wtyczkę albo zmień kod w szablonie motywu potomnego, aby elementy sterujące były prawdziwymi przyciskami lub linkami.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core focus-order-semantics.
dequeuniversity.com, github.com