Practică recomandată Prioritate: Moderat
Pagina are mai mult de un antet al site-ului
Pagina conține două sau mai multe zone de antet („banner”), de exemplu antetul obișnuit plus o copie separată fixă sau pentru mobil ori o bandă promoțională marcată ca banner. 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 și se așteaptă la un singur capitol de antet, cu logo, căutare, cont și coș. Când există două sau mai multe, aud antetul de mai multe ori în listă, nu știu care este cel adevărat și pot parcurge de două ori aceleași linkuri și butonul coșului.
Pe cine afectează
- utilizatori de cititoare de ecran
- clienți nevăzători
- persoane care folosesc cititorul de ecran pe telefon
Cum se remediază
Păstrați pe pagină un singur <header> de nivel superior sau role="banner". Dacă tema afișează antete separate pentru desktop și mobil ori copiază antetul pentru o bară fixă, transformați copia într-un simplu <div> sau ascundeți versiunea inactivă pentru toți cu display:none ori atributul hidden. Eliminați role="banner" de pe imaginile hero și barele de anunțuri: un banner de marketing nu este un reper banner.
În Shopify
De obicei cauza este bara de anunțuri, o copie a antetului fix sau o aplicație care adaugă propriul <header> ori role="banner". Verificați grupul de secțiuni al antetului și layout/theme.liquid și schimbați elementul în plus într-un <div>; pentru codul aplicației, contactați dezvoltatorul acesteia.
În Shoptet (CZ)
Este stabilit de șablon, care poate afișa antete separate pentru desktop și mobil. Verificați dacă o versiune mai nouă a șablonului rezolvă problema; altfel, semnalați-o la Shoptet sau unui partener.
În PrestaShop
De obicei un modul (mega meniu, slider de bannere sau antet fix) adaugă un al doilea <header> sau role="banner". Suprascrieți șablonul modulului în tema dvs. și înlocuiți-l cu un <div>.
În WooCommerce
Page builderele generează adesea antete separate pentru desktop, mobil și bara fixă, toate fiind elemente <header>. Schimbați tagul HTML al antetelor în plus în <div>, dacă builderul permite, sau ajustați header.php al temei copil.
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-no-duplicate-banner.
dequeuniversity.com, github.com, www.w3.org