Practică recomandată Prioritate: Minor
Două zone ale paginii sună la fel pentru cititoarele de ecran
Pagina are mai multe zone de același tip, de exemplu două meniuri sau două bare laterale, fără o etichetă care să le deosebească. Este o practică recomandată, care depășește nivelul WCAG 2.2 AA pe care se bazează legea.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Utilizatorii de cititoare de ecran sar între zonele paginii (antet, meniu, conținut principal, subsol) ca între capitole. Dacă în listă apare de două ori „navigare”, nu știu care este meniul principal al magazinului și care este meniul contului sau al subsolului, așa că îl deschid pe cel greșit și revin.
Pe cine afectează
- persoane nevăzătoare care folosesc cititoare de ecran
- persoane cu dizabilități cognitive care folosesc instrumente de citire
- persoane care folosesc extensii de browser ce listează zonele paginii
Cum se remediază
Dați fiecărui reper repetat un nume accesibil unic prin aria-label sau aria-labelledby, de exemplu <nav aria-label="Meniu principal"> și <nav aria-label="Subsol">. Procedați la fel pentru elementele <aside>, <section> sau <form> repetate care funcționează ca repere. Dacă un element nu este de fapt o zonă separată, eliminați-i mai bine rolul de reper.
În Shopify
De obicei, meniul din antet, meniul mobil glisant și meniul din subsol sunt toate <nav> fără etichete. Adăugați aria-label fiecărui <nav> din fișierele secțiunilor de antet și subsol ale temei.
În Shoptet (CZ)
De obicei, provine din meniurile șablonului. Semnalați problema către Shoptet sau un partener; dacă zona repetată este în HTML propriu adăugat, etichetați-o chiar acolo.
În PrestaShop
De obicei, modulul de meniu, blocurile de linkuri din subsol și linkurile contului afișează fiecare un <nav> sau <section> fără etichetă. Adăugați aria-label în suprascrierile șabloanelor modulelor din temă.
În WooCommerce
De obicei, sunt meniurile temei sau zonele de widgeturi (mai multe bare laterale, mai multe meniuri de navigare). Adăugați aria-label în șabloanele temei copil sau în setările blocului de navigare din editorul de blocuri, dacă tema folosește blocuri.
Standarde
Nu este un criteriu WCAG, ci o practică recomandată care face site-ul mai ușor de folosit.
Verificare automată: regula axe-core landmark-unique.
dequeuniversity.com, github.com, www.w3.org