Zalecana praktyka Priorytet: Drobne
Element ma rolę, która do niego nie pasuje
Element HTML ma atrybut role niedozwolony dla tego elementu, na przykład <button> oznaczony jako nagłówek albo menu <nav> oznaczone jako przycisk. To zalecana praktyka, a nie samodzielny wymóg WCAG na poziomie AA, ale często wskazuje na inne problemy.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Czytniki ekranu mogą ogłaszać element jako coś, czym nie jest, albo różnie w różnych przeglądarkach, więc klienci oczekują innego działania. Zwykle to niewielkie zamieszanie, a nie przeszkoda.
Kogo to dotyczy
- użytkownicy czytników ekranu
- użytkownicy sterowania głosowego
Jak to naprawić
Użyj natywnego elementu HTML pasującego do celu (<button> dla akcji, <a href> dla nawigacji, <h2> dla nagłówków) i usuń sprzeczną rolę. Jeśli własna rola jest naprawdę potrzebna, nadaj ją neutralnemu elementowi, takiemu jak <div> lub <span>, i dodaj obsługę klawiatury, której ta rola wymaga. Dozwolone role dla każdego elementu opisuje specyfikacja W3C „ARIA in HTML”.
W Shopify
Zwykle pochodzi z własnych sekcji, snippetów lub aplikacji (menu, slidery, pop-upy). Popraw znaczniki w odpowiedniej sekcji lub snippecie Liquid albo zgłoś to twórcy aplikacji.
W Shoptet (CZ)
Zwykle pochodzi z szablonu lub własnego kodu. Popraw własny kod; jeśli przyczyną jest szablon, zgłoś to Shoptet lub partnerowi.
W PrestaShop
Zwykle pochodzi z szablonów .tpl motywu lub modułów zewnętrznych (menu, slidery). Popraw znaczniki w szablonach motywu lub modułu, najlepiej przez nadpisanie.
W WooCommerce
Zwykle pochodzi z widżetów page buildera, wtyczek menu lub sliderów albo własnych szablonów motywu. Popraw to w szablonie motywu potomnego lub zgłoś autorowi wtyczki.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core aria-allowed-role.
dequeuniversity.com, github.com, www.w3.org