Recommended practice Priority: Minor
A sidebar sits inside another page area
An <aside> or "complementary" region, such as a filter sidebar, related products or a promo box, is nested inside another landmark instead of standing on its own next to the main content. This is a recommended practice that goes beyond the WCAG 2.2 AA level the accessibility laws rely on.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users jump between page areas (header, menu, main content, sidebar, footer) like chapters. A sidebar with filters or related products is meant to be its own chapter beside the main content. When it is buried inside another area, users hear it in an unexpected place, may skip it by accident and find it hard to tell where the product list ends and the extras begin.
Who is affected
- screen reader users
- blind and partially sighted shoppers who use filters
How to fix it
Move the <aside> (or the element with role="complementary") out of <main>, <header>, <nav> or <footer>, so that it sits next to them in the page structure. If the box really belongs to the main content, for example a tip inside a product description, use a <div> or a <section> with a heading instead of <aside> or role="complementary".
On Shopify
Themes usually render all sections inside <main> in layout/theme.liquid, so the easier fix is usually to change that <aside> in the section's Liquid (for example a filter sidebar or a promo block) to a <div> or <section>.
On Shoptet (CZ)
Decided by the template's HTML structure. Check whether a newer template version fixes it; otherwise report it to Shoptet or a partner.
On PrestaShop
Usually the left or right column in the theme's layout .tpl files. Make sure the column is not inside <main> or an element with role="main", or change the column tag to a <div>.
On WooCommerce
Usually the theme's sidebar.php or a widget area placed inside the content wrapper, or a page-builder widget that outputs <aside>. Fix the structure in the child theme's templates or change the element's HTML tag in the builder, where it allows that.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule landmark-complementary-is-top-level.
dequeuniversity.com, github.com, www.w3.org