Recommended practice Priority: Minor
The site header sits inside another page area
The header region (the "banner" landmark with the logo, search and cart) is nested inside another landmark, such as the main content or a navigation area, instead of standing on its own at the top of the page. 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, footer) like chapters of a book. When the header is tucked inside another area, the list of chapters is muddled: a shopper who jumps to the header to reach search, the account or the cart may land in the wrong place or not find the header as a separate chapter at all.
Who is affected
- screen reader users
- blind shoppers looking for search, account or cart
How to fix it
Place the site's <header> (or the element with role="banner") directly in the page structure, outside <main>, <nav>, <aside> and any element with a landmark role. Usually the cause is a page wrapper with role="main" or role="navigation" around the header, or role="banner" added to an element inside another landmark. A <header> inside an <article> or <section> is fine, because it is not treated as the site header.
On Shopify
Usually caused by layout/theme.liquid or a custom wrapper around the header section group, for example a div with a landmark role in the wrong place. Move the header out of that wrapper or remove the extra role.
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 in the theme's layout .tpl files that include the header. Make sure the header block is not inside an element with role="main" or another landmark role.
On WooCommerce
Usually comes from the theme's header.php or a page-builder header template that wraps the page in an element with a landmark role. Fix it in the child theme's header.php or in the builder's header template.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule landmark-banner-is-top-level.
dequeuniversity.com, github.com, www.w3.org