Practică recomandată Prioritate: Minor
Antetul site-ului se află în interiorul altei zone a paginii
Zona antetului (reperul „banner” cu logo, căutare și coș) este inclusă în alt reper, de exemplu în conținutul principal sau în navigare, în loc să stea separat în partea de sus a paginii. 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 capitolele unei cărți. Când antetul e ascuns în altă zonă, lista capitolelor devine confuză: un client care sare la antet ca să ajungă la căutare, cont sau coș poate ajunge în locul greșit sau nu găsește deloc antetul ca un capitol separat.
Pe cine afectează
- utilizatori de cititoare de ecran
- clienți nevăzători care caută căutarea, contul sau coșul
Cum se remediază
Plasați <header>-ul site-ului (sau elementul cu role="banner") direct în structura paginii, în afara <main>, <nav>, <aside> și a oricărui element cu rol de reper. De obicei cauza este un container de pagină cu role="main" sau role="navigation" în jurul antetului ori role="banner" adăugat unui element aflat în alt reper. Un <header> în interiorul unui <article> sau <section> este în regulă, deoarece nu este tratat ca antet al site-ului.
În Shopify
De obicei cauza este layout/theme.liquid sau un container propriu în jurul grupului de secțiuni al antetului, de exemplu un div cu rol de reper pus greșit. Mutați antetul în afara acelui container sau eliminați rolul în plus.
Î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 care includ antetul. Asigurați-vă că blocul antetului nu se află într-un element cu role="main" sau alt rol de reper.
În WooCommerce
De obicei vine din header.php al temei sau din șablonul de antet al unui page builder care înfășoară pagina într-un element cu rol de reper. Corectați în header.php al temei copil sau în șablonul de antet al 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-banner-is-top-level.
dequeuniversity.com, github.com, www.w3.org