Practică recomandată Prioritate: Moderat
Conținutul principal se află în interiorul altei zone a paginii
Elementul <main> sau zona cu role="main", care marchează începutul conținutului propriu al paginii, este inclusă în alt reper, de exemplu în antet, în navigare sau într-o bară laterală. Este o bună practică recomandată, care depășește nivelul WCAG 2.2 AA pe care se bazează legislația privind accesibilitatea.
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, iar capitolul „conținut principal” este cel pe care îl folosesc cel mai des: îi duce direct la lista de produse, la descrierea produsului sau la formularul de comandă. Când este inclus în antet sau meniu, structura devine confuză, iar clienții pierd timp ca să înțeleagă unde încep de fapt cumpărăturile.
Pe cine afectează
- utilizatori de cititoare de ecran
- clienți nevăzători și cu vedere slabă
- persoane care navighează între zonele paginii cu instrumente din browser
Cum se remediază
Faceți din <main> (sau role="main") o parte de nivel superior a paginii: nu în interiorul <header>, <nav>, <aside>, <footer> sau al unui element cu rol de reper. De obicei cauza este un container cu role="banner" sau role="navigation" în jurul întregii pagini ori un role="main" în plus adăugat într-un reper existent. Păstrați exact o zonă principală pe pagină.
În Shopify
<main> este de obicei definit în layout/theme.liquid. Verificați ca niciun container al antetului sau aplicație încorporată să nu îl cuprindă și ca secțiunile să nu adauge propriul role="main".
În Shoptet (CZ)
Este stabilit de structura HTML a șablonului. Verificați dacă o versiune mai nouă a șablonului rezolvă problema; altfel, semnalați-o la Shoptet sau unui partener.
În PrestaShop
De obicei în fișierele .tpl de layout ale temei, unde se deschide containerul de conținut. Asigurați-vă că nu se află în antet, într-o coloană sau în alt element cu rol de reper.
În WooCommerce
De obicei header.php al temei deschide un container cu rol de reper care cuprinde apoi zona de conținut sau un page builder adaugă role="main" unui container interior. Corectați în șabloanele temei copil sau în setările de layout ale builderului.
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-main-is-top-level.
dequeuniversity.com, github.com, www.w3.org