Recommended practice Priority: Moderate
The main content sits inside another page area
The <main> element or role="main" region, which marks where the page's own content starts, is nested inside another landmark, such as the header, a navigation area or a sidebar. 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 the "main content" chapter is the one they use most: it takes them straight to the product list, the product description or the checkout form. When it is nested inside the header or menu, the outline becomes confusing and shoppers lose time working out where the actual shopping starts.
Who is affected
- screen reader users
- blind and partially sighted shoppers
- people who use browser tools to navigate by page areas
How to fix it
Make <main> (or role="main") a top-level part of the page: not inside <header>, <nav>, <aside>, <footer> or any element with a landmark role. Usually the cause is a wrapper with role="banner" or role="navigation" around the whole page, or an extra role="main" added inside an existing landmark. Keep exactly one main region per page.
On Shopify
<main> is usually defined in layout/theme.liquid. Check that no header wrapper or app embed encloses it and that sections do not add their own role="main".
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 where the content wrapper is opened. Make sure it is not inside the header, a column or another element with a landmark role.
On WooCommerce
Usually the theme's header.php opens a wrapper with a landmark role that later contains the content area, or a page builder adds role="main" to an inner container. Fix it in the child theme's templates or the builder's layout settings.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule landmark-main-is-top-level.
dequeuniversity.com, github.com, www.w3.org