Practică recomandată Prioritate: Minor
Un element are un rol care nu i se potrivește
Un element HTML are un atribut role care nu este permis pentru acel element, de exemplu un <button> marcat ca titlu sau un meniu <nav> marcat ca buton. Aceasta este o practică recomandată, nu o cerință WCAG de nivel AA în sine, dar indică adesea alte probleme.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Cititoarele de ecran pot anunța elementul drept altceva decât este sau diferit în fiecare browser, așa că clienții se așteaptă la un comportament pe care nu îl are. De obicei este o mică confuzie, nu un obstacol.
Pe cine afectează
- utilizatorii de cititoare de ecran
- utilizatorii de control vocal
Cum se remediază
Folosiți elementul HTML nativ potrivit scopului (<button> pentru acțiuni, <a href> pentru navigare, <h2> pentru titluri) și eliminați rolul contradictoriu. Dacă un rol propriu este chiar necesar, puneți-l pe un element neutru, precum <div> sau <span>, și adăugați comportamentul de tastatură pe care îl cere rolul. Rolurile permise pentru fiecare element sunt descrise în specificația W3C „ARIA in HTML”.
În Shopify
De obicei provine din secțiuni, snippeturi sau aplicații personalizate (meniuri, slidere, pop-up-uri). Corectați marcajul în secțiunea sau snippetul Liquid respectiv sau raportați problema dezvoltatorului aplicației.
În Shoptet (CZ)
De obicei provine din șablon sau din cod personalizat. Corectați propriul cod; dacă șablonul este cauza, raportați problema către Shoptet sau un partener.
În PrestaShop
De obicei provine din șabloanele .tpl ale temei sau din module terțe (meniuri, slidere). Corectați marcajul în șabloanele temei sau ale modulului, de preferat printr-un override.
În WooCommerce
De obicei provine din widgeturi de page builder, pluginuri de meniu sau slider ori șabloane personalizate ale temei. Corectați-o într-un șablon al temei copil sau raportați-o autorului pluginului.
Standarde
Nu este un criteriu WCAG, ci o practică recomandată care face site-ul mai ușor de folosit.
Verificare automată: regula axe-core aria-allowed-role.
dequeuniversity.com, github.com, www.w3.org