Contentinfo landmark should not be contained in another 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.

There is only one site footer — and it belongs at the page root, not inside main content.

Why this matters and how to fix it

Why this matters

The `contentinfo` landmark identifies site-wide footer information such as copyright, legal links, or global navigation aids. Screen reader users rely on landmark navigation to quickly jump to this region. If the footer is nested inside main or article content, assistive technology may treat it as part of the page content rather than as site-level metadata, making navigation confusing.

How to fix this issue

Place the site-wide footer (`<footer>` or an element with `role="contentinfo"`) as a direct child of `<body>`. If you have section-specific footers (e.g., at the bottom of an article or card), they can remain — but they must **not** use `role="contentinfo"`.

Automated detection · Manual review recommended

Developer guidance

SPA and layout frameworks sometimes inadvertently wrap footers inside layout containers. Check the **rendered DOM**, not the component tree. Only one `contentinfo` landmark should exist at the page level. Any additional footers should be plain `<footer>` elements without `role="contentinfo"`.

Code examples

Incorrect Implementation

<main>
  <footer role="contentinfo">© 2025 MySite</footer>
</main>

Correct Implementation

<footer role="contentinfo">© 2025 MySite</footer>
<main>
  <article>Page content</article>
</main>

Real-World Examples

Before

<div id="app">
  <main>
    <article>Content…</article>
    <footer>© 2025 MySite</footer>
  </main>
</div>
<!-- Footer is structural but will not appear in landmark navigation → confusing -->

After

<div id="app">
  <header>…</header>
  <main>
    <article>Content…</article>
  </main>
  <footer role="contentinfo">© 2025 MySite</footer>
</div>
<!-- Footer is now discoverable via landmark shortcuts → correct behavior -->

CSS Example (Guidance)

/* If you need to visually position the footer inside layout, use CSS—not DOM nesting */
footer[role="contentinfo"] {
  margin-top: auto;
  padding: 1rem;
}

Manual testing

  1. 1. Open Chrome DevTools → Accessibility → Landmarks.
  2. 2. Confirm there is exactly **one** `contentinfo` landmark.
  3. 3. Ensure the `contentinfo` landmark is a sibling of `main`, `header`, and `nav` — not inside them.
  4. 4. Turn on a screen reader:
  5. • NVDA: Press D to cycle landmarks.
  6. • VoiceOver (macOS): VO + U → Landmarks.
  7. • TalkBack: Swipe to navigate landmarks.
  8. 5. Expected: The user should be able to jump directly to the site footer.
  9. 6. If there are section-level footers, ensure they have **no** `role="contentinfo"` and are simply `<footer>` elements.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance