Cerință WCAG A/AA Prioritate: Moderat
Unele etichete sunt puse acolo unde cititoarele de ecran le ignoră
Unele elemente folosesc atribute de accesibilitate interzise pentru tipul lor, cel mai des aria-label pe un <div> sau <span> simplu, fără rol.
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 sar adesea peste astfel de etichete. Un rating cu stele scris ca aria-label="4,5 din 5", o pictogramă „Reducere” sau o etichetă de disponibilitate pot să nu spună nimic sau să spună altceva decât văd ceilalți clienți.
Pe cine afectează
- utilizatorii de cititoare de ecran
- clienții nevăzători
Cum se remediază
Nu puneți aria-label sau aria-labelledby pe elemente fără un rol potrivit (div, span, p simple sau elemente cu role="presentation"). În schimb, oferiți informația ca text, de exemplu într-un <span> ascuns vizual, sau dați elementului un rol potrivit, cum ar fi role="img" pentru un rating format din pictograme stea.
În Shopify
De obicei cod pentru recenzii, insigne sau pictograme din temă ori din aplicații. Modificați fragmentul Liquid pentru a folosi text ascuns vizual sau role="img"; widgeturile aplicațiilor semnalați-le dezvoltatorului.
În Shoptet (CZ)
De obicei ratinguri, insigne sau pictograme din șablon ori din suplimente. Semnalați problema la Shoptet sau unui partener Shoptet.
În PrestaShop
De obicei ratinguri, etichete sau pictograme din temă ori din module. Corectați în șabloanele .tpl sau în șabloanele de module suprascrise.
În WooCommerce
De obicei ratinguri cu stele, insigne sau pictograme din temă, page builder sau pluginuri de recenzii. Corectați în tema copil sau semnalați problema autorului pluginului.
Standarde
| Standard | Punct |
|---|---|
| WCAG 2.2 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.1 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.0 | 4.1.2 (A) Name, Role, Value |
| EN 301 549 4.1.1 | 9.4.1.2 |
| EN 301 549 3.2.1 | 9.4.1.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.4.1.2 |
Verificare automată: regula axe-core aria-prohibited-attr.
dequeuniversity.com, github.com, www.w3.org