landmark-main-is-top-level
Web validation
main landmark should remain at the top level of the document and never sit inside another landmark region.Assistive technology users rely on landmark regions to jump to the heart of a page. When a main landmark appears inside another landmark, such as main, article, or navigation, it “breaks” the logical outline of the page, leaving the experience disorienting and hard to understand. Keeping main at the top level preserves a clear and predictable page outline.
Pass Patterns
The <main> element is in the document’s top level
The <main> element sits directly under <body>, alongside other landmark regions.
<body>
<header role="banner">
<!-- branding -->
</header>
<nav role="navigation">
<!-- site navigation -->
</nav>
<main role="main">
<!-- Main content goes here -->
</main>
<footer role="contentinfo">
<!-- copyright -->
</footer>
</body>Fail Patterns
The <main> element is a descendant of a region landmark
The main landmark is nested inside another landmark, breaking the top-level rule.
<body>
<header role="banner">
<!-- branding -->
</header>
<nav role="navigation">
<!-- site navigation -->
</nav>
<section role="region" aria-label="Featured content">
<main role="main">
<!-- Main content goes here -->
</main>
<aside>
<!-- Complementary content goes here -->
</aside>
</section>
<footer role="contentinfo">
<!-- copyright -->
</footer>
</body>Try It Yourself
Inspecting the browser dev-tools
- In the browser dev tools, go to the Accessibility tree.
- Expand the tree to the
bodynode. - Check the position of the
mainlandmark.
Expected result: The <main> element appears as a direct child of <body>.
Actual result: The <main> element appears under another landmark element.
FAQ
Why is this validation considered a best practice?
HTML Living Standard and ARIA guidance agree that a page should contain only one top-level main landmark. Following this convention keeps landmark navigation clear and predictable, even though it is not tied to a specific WCAG success criterion.
Why is this issue marked as Moderate?
Nesting the main landmark does not block access to content, but it does slow navigation and can confuse assistive-technology users. The impact is noticeable across most screen readers and browsers, warranting a moderate severity rating.