All page content must be contained by landmarks
Estimated effort: about 15 minutes.
Screen reader users often navigate a page by jumping between landmark regions — header, navigation, main content, and footer — instead of reading everything top to bottom. If part of the page (a floating cart widget, a promo banner, or a chunk of footer text) sits outside any landmark element, it becomes much harder for those users to find or skip.
How to fix it
- Check that every piece of visible content on the page sits inside one of the semantic landmark elements: <header>, <nav>, <main>, <aside>, or <footer> (or an element carrying the equivalent role, e.g. role="banner", role="navigation", role="main", role="complementary", role="contentinfo").
- Wrap the primary page content — including product listings, the product detail area, and the cart/checkout form — in a single <main> element (only one <main> should exist per page).
- Move any content that currently sits directly inside <body> with no wrapping landmark (a common cause is a floating "mini cart" widget or a promo bar injected outside the theme's template) into an appropriate landmark, such as <aside> for a persistent mini-cart or <header> for a top promo bar.
- Wrap the site navigation menu in a <nav> element and the site-wide footer links/copyright in a <footer> element if they are not already.
- Run an automated scan again and confirm no content is reported as being outside all landmarks.
Before and after
Before
<body>
<div class="site-header">...</div>
<div class="promo-bar">Free shipping over $50</div>
<div class="page-content">
<h1>Shop</h1>
<div class="product-grid">...</div>
</div>
<div class="site-footer">...</div>
</body>
After
<body>
<header>
<div class="promo-bar">Free shipping over $50</div>
<div class="site-header">...</div>
</header>
<main>
<h1>Shop</h1>
<div class="product-grid">...</div>
</main>
<footer>
<div class="site-footer">...</div>
</footer>
</body>