Practică recomandată Prioritate: Moderat
O fereastră pop-up nu are nume
O fereastră de dialog, cum ar fi coșul glisant, bannerul de cookie-uri, pop-up-ul de newsletter sau vizualizarea rapidă a produsului, are role="dialog" sau role="alertdialog", dar nu are un nume accesibil. Aceasta este o practică recomandată, nu o cerință WCAG de nivel AA în sine.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Când fereastra se deschide, cititorul de ecran spune doar „dialog”, fără să spună despre ce este vorba. Clienții trebuie să o exploreze ca să afle dacă este coșul, o ofertă de reducere sau o întrebare despre cookie-uri. Acest lucru derutează în momente importante, de exemplu după adăugarea în coș.
Pe cine afectează
- utilizatorii de cititoare de ecran
- clienții nevăzători și cu vedere slabă
Cum se remediază
Dați un nume fiecărui element cu role="dialog" sau role="alertdialog": indicați prin aria-labelledby titlul vizibil al ferestrei sau adăugați un aria-label, de exemplu aria-label="Coș de cumpărături". Totodată, mutați focusul în fereastră la deschidere și înapoi pe butonul care a deschis-o la închidere.
În Shopify
De obicei provine din coșul glisant, căutare, vizualizarea rapidă sau aplicații de pop-up. Adăugați aria-labelledby sau aria-label în secțiunea ori snippetul Liquid respectiv; pentru ferestrele aplicațiilor, contactați dezvoltatorul aplicației.
În Shoptet (CZ)
De obicei provine din pop-up-urile șablonului sau din scripturi terțe, precum bannere de cookie-uri sau chat. Corectați propriul cod; pentru elementele șablonului, raportați problema către Shoptet sau un partener.
În PrestaShop
De obicei provine din ferestrele modale ale temei (confirmarea adăugării în coș, vizualizarea rapidă) sau din module. Adăugați aria-labelledby în marcajul ferestrei din șabloanele .tpl, de preferat printr-un override.
În WooCommerce
De obicei provine din pluginuri de consimțământ cookie, pop-up, mini-coș sau vizualizare rapidă. Căutați în setările pluginului o opțiune de accesibilitate, adăugați numele î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-dialog-name.
dequeuniversity.com, github.com, www.w3.org