About This Accessibility Rule
Landmarks are one of the primary ways screen reader users orient themselves on a page and navigate between major sections. The contentinfo landmark is specifically intended to hold site-wide footer information — copyright notices, privacy policies, contact links, and similar content. Screen readers like JAWS, NVDA, and VoiceOver provide shortcut keys that let users jump directly to landmarks by role.
When a contentinfo landmark is nested inside another landmark (such as main or navigation), it no longer appears as a top-level landmark in the screen reader’s landmark list. This means blind and deafblind users may not be able to find the footer information efficiently, or they may encounter it unexpectedly while navigating a different section of the page. The organizational benefit of landmarks is undermined when they are improperly nested.
This rule is a Deque best practice aligned with the broader principles of proper landmark usage recommended by the W3C’s ARIA Landmarks specification. While not mapped to a specific WCAG success criterion, correct landmark structure supports WCAG 1.3.1 (Info and Relationships), WCAG 2.4.1 (Bypass Blocks), and the overall goal of providing a clear, navigable document structure.
How to Fix It
-
Locate your
contentinfolandmark. This is either a<footer>element that is a direct child of<body>(which implicitly hasrole="contentinfo") or any element with an explicitrole="contentinfo". -
Check its position in the DOM. If the
contentinfolandmark is nested inside a<main>,<nav>,<aside>,<section>,<header>, or any element with a landmark role, it needs to be moved. -
Move it to the top level. Restructure your HTML so the
contentinfolandmark is a direct child of<body>, outside all other landmark regions.
Note that a <footer> element only has the implicit contentinfo role when it is scoped to the <body>. A <footer> nested inside an <article>, <section>, <aside>, <nav>, or <main> does not have the contentinfo role — it becomes a generic element. This means the issue typically arises when you explicitly add role="contentinfo" to a nested element, or when your page structure accidentally places the site-wide <footer> inside another landmark.
Examples
Incorrect: contentinfo Landmark Nested Inside main
<body>
<main>
<h1>Welcome</h1>
<p>Page content goes here.</p>
<footer>
<p>© 2024 Example Company</p>
</footer>
</main>
</body>
In this example, the <footer> is inside <main>, so it does not receive the implicit contentinfo role. If a developer tries to fix that by adding role="contentinfo" explicitly, the landmark becomes nested inside main, which triggers this rule:
<body>
<main>
<h1>Welcome</h1>
<p>Page content goes here.</p>
<div role="contentinfo">
<p>© 2024 Example Company</p>
</div>
</main>
</body>
Correct: contentinfo Landmark at the Top Level
<body>
<main>
<h1>Welcome</h1>
<p>Page content goes here.</p>
</main>
<footer>
<p>© 2024 Example Company</p>
</footer>
</body>
Here, the <footer> is a direct child of <body> and sits outside the <main> landmark. It automatically receives the implicit contentinfo role, and screen reader users can jump directly to it using landmark navigation.
Incorrect: Explicit role="contentinfo" Inside a region
<body>
<main>
<h1>Dashboard</h1>
</main>
<section aria-label="Additional info">
<footer role="contentinfo">
<p>Privacy Policy | Terms of Service</p>
</footer>
</section>
</body>
Correct: contentinfo Moved Outside the region
<body>
<main>
<h1>Dashboard</h1>
</main>
<footer>
<p>Privacy Policy | Terms of Service</p>
</footer>
</body>
The contentinfo landmark is now at the top level of the document, making it immediately discoverable through screen reader landmark navigation.
Help us improve our guides
Detect accessibility issues automatically
Rocket Validator scans thousands of pages with Axe Core and the W3C Validator, finding accessibility issues across your entire site.