Practică recomandată Prioritate: Moderat
Un bloc de text ascunde linkurile sau butoanele din interior
Un element cu role="text" conține un link, un buton sau alt element care poate primi focus. role="text" este un rol nestandard care le cere unor cititoare de ecran să citească tot conținutul ca text simplu. Aceasta este o practică recomandată, nu o cerință WCAG de nivel AA.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
În cititoarele de ecran care suportă role="text", în special VoiceOver pe iPhone și Mac, linkul sau butonul din interior poate fi citit ca text simplu. Clientul nu știe că îl poate activa sau nu ajunge deloc la el. Dacă rolul cuprinde un link cu preț sau butonul „Adaugă în coș”, poate împiedica o comandă.
Pe cine afectează
- utilizatorii de cititoare de ecran
- utilizatorii VoiceOver pe iPhone, iPad și Mac
Cum se remediază
Folosiți role="text" doar pe elemente care conțin text simplu, de exemplu ca un preț despărțit precum „€19<sup>99</sup>” să nu fie citit pe bucăți. Eliminați role="text" de pe orice element care conține linkuri, butoane, câmpuri de formular sau elemente cu tabindex ori mutați aceste elemente interactive în afara lui.
În Shopify
De obicei provine din marcaj personalizat pentru prețuri sau etichete în snippeturi Liquid ori dintr-o aplicație. Eliminați role="text" de pe elementele care conțin linkuri sau butoane.
În Shoptet (CZ)
De obicei provine din cod personalizat. Eliminați role="text" de pe elementele care conțin linkuri sau butoane; dacă îl adaugă șablonul, cereți ajutorul Shoptet sau al unui partener.
În PrestaShop
De obicei provine din șabloane .tpl modificate pentru liste de produse sau prețuri ori din module. Eliminați role="text" din jurul elementelor interactive, de preferat printr-un override.
În WooCommerce
De obicei provine din șabloane personalizate de preț, widgeturi de page builder sau pluginuri. Corectați-o într-un șablon al temei copil sau contactați autorul 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-text.
dequeuniversity.com, github.com