One contentinfo landmark per page

A page must contain only one contentinfo landmark

Each page must expose one, and only one, contentinfo landmark.

This landmark represents page-level site information, typically the global footer.

Multiple contentinfo regions clutter landmark navigation for assistive technology users.

Why It Matters

Screen reader users rely on landmarks to jump quickly to key areas.

If several contentinfo landmarks exist, the landmark list becomes noisy and harder to parse.

People with mobility impairments who use quick-nav keys must spend extra keystrokes moving past duplicates.

Common Causes

• Adding role="contentinfo" to both the global footer and article footers
• Using a UI component library that injects role="contentinfo" into multiple widgets
• Copying a footer snippet with role="contentinfo" into nested sections or modals
• Misunderstanding HTML vs ARIA: multiple <footer> elements, all given role="contentinfo"
• Server-side templates that render multiple footers across partials on the same page

How to Fix

1. Identify the page-level footer
   • Choose the global footer that contains site-wide info (copyright, legal, contact, policies).
2. Map only that footer to the contentinfo landmark
   • Option A (recommended): Use a top-level <footer>. Do not add role attributes to other local footers.
   • Option B: If you cannot use <footer>, add role="contentinfo" to a single container at the end of the document.
3. Remove duplicate contentinfo roles
   • Delete role="contentinfo" from article/section footers, widgets, and components.
   • Keep local footers as plain <footer> elements (without role) inside their owning article/section.
4. Verify other page-level landmarks (recommendation)
   • Ensure only one banner (site header) and one main region are exposed as landmarks.
5. Guard against regressions
   • Lint templates for role="contentinfo".
   • Add an automated check (e.g., axe) to fail builds when more than one contentinfo appears.

How to Test

Keyboard/visual

• Open DevTools Accessibility tree or aXe/WAVE and list landmarks.
• Confirm there is exactly one contentinfo landmark.

Screen reader

• Open the Landmarks list (NVDA, JAWS, VoiceOver) on the page.
• Verify only one entry for Content Info (or Footer) is present.
• Navigate by landmark to confirm you land on the global footer.

Mobile/touch

• iOS VoiceOver: Use the Rotor > Landmarks; ensure a single Content Info item.
• Android TalkBack: Use the local context menu > Landmarks; confirm one Content Info.

Checklist

• Exactly one contentinfo in the accessibility tree
• Assigned to the site-level footer only
• No role="contentinfo" on article/section-level footers
• Component libraries do not inject extra contentinfo roles
• Automated tests flag multiple contentinfo landmarks

Good Example

A single page-level footer is exposed as contentinfo. Local article footers are not mapped as landmarks.

<header role="banner">
  <h1>Example News</h1>
</header>
<main id="main-content">
  <article>
    <h2>City Council Approves New Park</h2>
    <p>Details about the new park...</p>
    <footer class="article-meta">
      <p>By A. Rivera • Filed under City</p>
    </footer>
  </article>
</main>
<footer role="contentinfo">
  <p>© 2026 Example News • Privacy • Accessibility</p>
</footer>

Bad Example

Two regions are incorrectly exposed as contentinfo, creating duplicate landmarks.

<div role="banner">
  <h1>ShopNow</h1>
</div>
<main>
  <section>
    <h2>Featured Product</h2>
    <p>Product details...</p>
    <footer role="contentinfo">
      <p>Seller info and tags</p>
    </footer>
  </section>
</main>
<footer role="contentinfo">
  <p>© 2026 ShopNow • Terms • Contact</p>
</footer>

Quick Checklist

• One contentinfo per page; no duplicates
• Use it for the global, site-level footer only
• Leave article/section footers without role="contentinfo"
• Avoid assigning contentinfo inside widgets, modals, or components
• Confirm via Accessibility tree or automated tools
• Validate with a screen reader Landmarks list
• Add linting/tests to prevent regressions