Document should not have more than one contentinfo landmark
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
One website = one site footer. All others are just footers, not contentinfo.
Overview
Why this matters
The `contentinfo` landmark identifies the site-level footer that applies to the whole experience. Screen reader users rely on it to jump to global information or navigation. If multiple contentinfo landmarks exist, users cannot tell which one is the real site footer, creating confusion during landmark navigation.
How to fix this issue
Ensure exactly one site-level contentinfo landmark exists (`<footer>` at document scope or `role="contentinfo"`). Secondary footers in modules/articles should not expose additional contentinfo landmarks.
Developer Guidance
CMS templates and layout systems frequently duplicate footers. Always verify the final rendered DOM. If your app uses multiple layouts or nested routes, ensure only the outermost layout includes the page-level contentinfo landmark.
Code Examples
Incorrect Implementation
<footer role='contentinfo'>© 2025 MySite</footer>
<article>
<footer role='contentinfo'>Related links</footer>
</article>Correct Implementation
<footer role='contentinfo'>© 2025 MySite</footer>
<article>
<footer>Related links</footer>
</article>Real-World Implementation
Before
<div id="app">
<main>…</main>
<footer role="contentinfo">© 2025 MySite</footer>
<footer role="contentinfo">Secondary info</footer>
</div>
<!-- Screen reader announces two contentinfo regions → unclear which is the real footer -->After
<div id="app">
<main>…</main>
<footer role="contentinfo">© 2025 MySite</footer>
<footer>Secondary info</footer>
</div>
<!-- Only one true site-level contentinfo landmark → clear navigation -->CSS Example (Guidance)
/* Section-specific footers can look identical to the global footer using CSS */
article > footer {
padding: 1rem 0;
border-top: 1px solid #ddd;
}Manual Testing
- 1. List landmarks in accessibility tools and confirm one contentinfo landmark only.
- 2. Verify global/site footer is the one exposed as contentinfo.
- 3. Check section-level footers are not additionally exposed as contentinfo.
- 4. Navigate landmarks with a screen reader and confirm only one site footer announcement.
- 5. Remove extra `role="contentinfo"` assignments where duplicates exist.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance