Zalecana praktyka Priorytet: Umiarkowane
Pozycje menu drzewiastego nie mają nazwy
Niektóre pozycje menu w formie drzewa, na przykład rozwijanego drzewa kategorii, nie mają tekstu, który mogą odczytać technologie wspomagające. 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 czytnika ekranu, przechodząc przez drzewo kategorii, słyszy tylko „element drzewa” bez nazwy kategorii, więc nie wie, która gałąź prowadzi do szukanych produktów. Wiele osób przestaje szukać i opuszcza sklep.
Kogo to dotyczy
- użytkownicy czytników ekranu
- osoby niewidome
- osoby sterujące głosem
Jak to naprawić
Nadaj każdemu elementowi z role="treeitem" dostępną nazwę: widoczny tekst w środku albo aria-label / aria-labelledby, gdy pozycja pokazuje tylko ikonę. Nazwa powinna odpowiadać temu, co widzą osoby widzące. Jeśli widżet tak naprawdę nie jest drzewem, usuń role drzewa i użyj zwykłej zagnieżdżonej listy linków.
W Shopify
Role drzewa zwykle dodaje aplikacja mega menu, filtrów lub kategorii, a nie motyw. Sprawdź ustawienia aplikacji lub zapytaj jej twórcę; jeśli role="treeitem" dodaje fragment menu samego motywu, popraw go w tym snippecie Liquid.
W Shoptet (CZ)
Zależy od szablonu lub dodatku. Sprawdź, czy nowsza wersja szablonu poprawia drzewo kategorii; w przeciwnym razie zwróć się do Shoptet lub partnera.
W PrestaShop
Zwykle pochodzi z modułu drzewa kategorii lub menu. Nadpisz szablon .tpl modułu w swoim motywie, aby każda pozycja zawierała nazwę kategorii, albo zapytaj autora modułu.
W WooCommerce
Zwykle pochodzi z widżetu kategorii, wtyczki menu lub filtrów. Zaktualizuj wtyczkę, sprawdź jej opcje dostępności albo nadpisz jej szablon w motywie potomnym, aby każda pozycja wyświetlała swój tekst.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core aria-treeitem-name.
dequeuniversity.com, github.com, www.w3.org