Recommended practice Priority: Moderate
The page has more than one site header
The page contains two or more header ("banner") regions, for example a normal header plus a separate sticky or mobile copy, or a promo strip marked as a banner. 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 and expect exactly one header chapter with the logo, search, account and cart. With two or more, they hear the header listed repeatedly, cannot tell which one is the real one and may go through the same links and cart button twice.
Who is affected
- screen reader users
- blind shoppers
- people using screen readers on mobile
How to fix it
Keep only one top-level <header> or role="banner" per page. If the theme renders separate desktop and mobile headers, or copies the header for a sticky bar, make the copy a plain <div>, or hide the inactive one from everyone with display:none or the hidden attribute. Remove role="banner" from hero images and announcement bars: a marketing banner is not a banner landmark.
On Shopify
Usually caused by an announcement bar, a sticky header copy or an app that adds its own <header> or role="banner". Check the header section group and layout/theme.liquid and change the extra element to a <div>; for app code, ask the app developer.
On Shoptet (CZ)
Decided by the template, which may render separate headers for desktop and mobile. Check whether a newer template version fixes it; otherwise report it to Shoptet or a partner.
On PrestaShop
Usually a module (mega menu, banner slider or sticky header) adds a second <header> or role="banner". Override the module's template in your theme and replace it with a <div>.
On WooCommerce
Page builders often output separate desktop, mobile and sticky headers that are all <header> elements. Change the HTML tag of the extra headers to <div> where the builder allows it, or adjust the child theme's header.php.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule landmark-no-duplicate-banner.
dequeuniversity.com, github.com, www.w3.org