How to fix: Content should sit inside landmarks

Who this affects

Screen-reader users move around a page by region: NVDA users press D, JAWS users press R, and VoiceOver users open the rotor and pick Landmarks. Content sitting outside every landmark never appears in that list, so it can only be reached by the slower routes, heading navigation or reading through in document order. No success criterion covers this, so it is good practice rather than a conformance requirement, and it is one that daily screen-reader users rely on to get around a page at all.

Before and after

<div class="promo">Summer sale</div>

<main>…<section aria-label="Promotions">Summer sale</section>…</main>

Where this usually comes from

• A JavaScript app mounts into <div id="root"> and the router renders page content with no <main> wrapper around it.
• Cookie or consent banners injected at the end of <body> by a third-party script.
• A CMS theme built with <div class="site-header"> and <div class="site-footer"> instead of the <header> and <footer> elements.
• Content parked between the header and <main>, such as a breadcrumb trail, a hero band or a promotional strip.
• Drawers and panels rendered through a portal at the end of the document as plain <div> elements; a real <dialog> or role="dialog" counts as a region and is exempt.

Related fixes