Practică recomandată Prioritate: Minor
O bară laterală se află în interiorul altei zone a paginii
Un <aside> sau o zonă complementară („complementary”), de exemplu bara de filtre, produsele similare sau o casetă promoțională, este inclusă în alt reper în loc să stea separat lângă conținutul principal. 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, bară laterală, subsol) ca între capitole. O bară cu filtre sau produse similare ar trebui să fie un capitol separat lângă conținutul principal. Când e îngropată în altă zonă, este citită într-un loc neașteptat, poate fi sărită din greșeală și e greu de înțeles unde se termină lista de produse și unde încep extrasele.
Pe cine afectează
- utilizatori de cititoare de ecran
- clienți nevăzători și cu vedere slabă care folosesc filtrele
Cum se remediază
Mutați <aside>-ul (sau elementul cu role="complementary") în afara <main>, <header>, <nav> sau <footer>, astfel încât să stea lângă acestea în structura paginii. Dacă blocul aparține cu adevărat conținutului principal, de exemplu un sfat în descrierea produsului, folosiți un <div> sau o <section> cu titlu în loc de <aside> sau role="complementary".
În Shopify
Temele afișează de obicei toate secțiunile în interiorul <main> din layout/theme.liquid, așa că de obicei e mai simplu să schimbați acel <aside> din Liquid-ul secțiunii (de exemplu bara de filtre sau blocul promoțional) într-un <div> sau <section>.
Î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 este coloana din stânga sau din dreapta în fișierele .tpl de layout ale temei. Asigurați-vă că coloana nu se află în <main> sau într-un element cu role="main" ori schimbați tagul coloanei în <div>.
În WooCommerce
De obicei este sidebar.php al temei sau o zonă de widgeturi aflată în containerul de conținut ori un widget de page builder care generează <aside>. Corectați structura în șabloanele temei copil sau schimbați tagul HTML al elementului în builder, dacă permite acest lucru.
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-complementary-is-top-level.
dequeuniversity.com, github.com, www.w3.org