Zalecana praktyka Priorytet: Drobne
Element dekoracyjny i tak jest odczytywany przez czytniki ekranu
Element oznaczony jako dekoracyjny (role="presentation" lub role="none") ma też atrybuty ARIA albo może otrzymać fokus z klawiatury, więc jedne czytniki ekranu go pomijają, a inne nie. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Osoby korzystające z czytników ekranu mogą słyszeć zbędne, pozbawione sensu elementy albo trafiać na pusty przystanek podczas naciskania Tab, np. na dekoracyjnej ikonie lub separatorze. To drobna niedogodność, ale dodatkowy „szum” spowalnia przeglądanie produktów i wypełnianie formularzy.
Kogo to dotyczy
- osoby korzystające z czytników ekranu
- osoby korzystające z klawiatury zamiast myszy
Jak to naprawić
Jeśli element jest naprawdę dekoracyjny, usuń z niego globalne atrybuty ARIA (np. aria-label lub aria-describedby) i każdy tabindex, aby był konsekwentnie pomijany. Jeśli niesie treść lub ma być klikalny, usuń role="presentation" lub role="none" i nadaj mu właściwą rolę oraz dostępną nazwę. Nigdy nie nadawaj roli dekoracyjnej linkom, przyciskom ani polom formularza.
W Shopify
Zwykle pochodzi ze snippetów ikon lub sekcji motywu albo z aplikacji. Popraw kod w snippetach lub sekcjach motywu (Liquid) albo zgłoś to twórcy aplikacji.
W Shoptet (CZ)
Zależy od szablonu lub dodatku. Warto sprawdzić, czy nowsza wersja szablonu to poprawia; w przeciwnym razie zgłosić to do Shoptet lub partnera albo poprawić własny wstawiony kod.
W PrestaShop
Zwykle w plikach .tpl motywu lub w szablonach modułu. Nadpisz szablon w motywie zamiast edytować moduł bezpośrednio.
W WooCommerce
Zwykle pochodzi z motywu, page buildera lub wtyczki. Popraw to w szablonie motywu potomnego albo zgłoś autorowi wtyczki, aby aktualizacje nie cofnęły poprawki.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core presentation-role-conflict.
dequeuniversity.com, github.com