Document should not have more than one contentinfo landmark

WCAG 1.3.1
Info and Relationships

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.

Why this matters and how to fix it

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 there is exactly one site-wide `<footer>` or element with `role="contentinfo"`. Any secondary or section-level footers inside articles, cards, or modules must NOT use `role="contentinfo"`; they should simply use `<footer>` without a landmark role.

Automated detection · Manual review recommended

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 Examples

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. 1. Open Chrome DevTools → Accessibility → Landmarks.
  2. 2. Verify there is **exactly one** `contentinfo` landmark.
  3. 3. Confirm the `contentinfo` landmark is at the page level (a sibling to `main`, not inside it).
  4. 4. If multiple footers exist, inspect each:
  5. • The footer with site-wide info should have `role="contentinfo"`.
  6. • Other footers must be plain `<footer>` elements with NO `role` attribute.
  7. 5. Turn on a screen reader:
  8. • NVDA: Press D to move between landmarks.
  9. • VoiceOver (macOS): VO + U → Landmarks.
  10. • Expected: Only one site footer is listed and easy to locate.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance