landmark-contentinfo-is-top-level
Web validation
<footer> elements or elements with role="contentinfo") should sit at the top level of the landmark tree, never inside another landmark region.The contentinfo landmark points assistive-technology users straight to site-wide information such as copyright or a contact address. When this landmark sits outside all other landmark regions, the page’s “sign-posts” stay clear and predictable. Nesting it inside another landmark like main, region, or aside, breaks that map, forcing users to explore an unexpected hierarchy before they can find the footer.
Note:
Native HTML elements such as <aside>, <header>, and <footer> may appear inside other landmarks (for example, inside <main>). They do not inflate the landmark list because browsers expose them to AT only when they occur at the document root.
In contrast, ARIA roles are always exposed. When you nest <div role="contentinfo"> inside another landmark, every screen reader receives an extra landmark entry. The result is an over-crowded landmark rotor, making navigation slower and error-prone.
Pass Patterns
Top-level semantic <footer> elements
Using HTML’s built-in semantics keeps code clean and delivers landmarks without extra attributes.
<body>
<header><!-- site header --></header>
<main><!-- page content --></main>
<footer>
<p>© 2026 Example Corp.</p>
</footer>
</body>Fail Patterns
The contentinfo landmark nested inside a main landmark
The contentinfo landmark is nested inside another landmark, breaking the top-level rule.
<body>
<div role="main">
<!-- page content -->
<div role="contentinfo">
<p>© 2026 Example Corp.</p>
</div>
</div>
</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
contentinfolandmark.
Expected result: The contentinfo element appears as a direct child of <body>.
Actual result: The contentinfo element appears under another landmark element.
FAQ
Why is this validation considered a best practice?
WCAG does not prohibit nesting contentinfo, but keeping it at the document root mirrors HTML’s <footer> rules and delivers a cleaner landmark outline, improving orientation for assistive-technology users.
Why is this issue marked as Moderate?
Users relying on landmark navigation can still reach a nested footer, yet they must spend extra time traversing an unexpected hierarchy. The added cognitive load and potential for multiple contentinfo regions make the experience noticeably harder, but not completely blocking, hence a moderate impact.