Ensure the document has at most one contentinfo landmark

The landmark-no-duplicate-contentinfo rule ensures that each page contains no more than one role="contentinfo" landmark. While HTML5 allows multiple <footer> elements, ARIA contentinfo landmarks should only appear once per page.

What is being tested?

This rule verifies that:

• The page includes at most one element with role="contentinfo".
• Other section-specific footers or headers do not use the contentinfo role.

Good example

<div role="banner">Visit Your Local Zoo!</div>
<div role="main">
  <h1>The Nature of the Zoo</h1>
  <article>
    <h2>In the Zoo: From Wild to Tamed</h2>
    <p>[...]</p>
  </article>
  <article>
    <h2>Feeding Frenzy: The Impact of Cohabitation</h2>
    <p>[...]</p>
  </article>
</div>
<div role="contentinfo">
  <p>Brought to you by North American Zoo Partnership</p>
</div>

Bad example

<header>Visit Your Local Zoo!</header>
<h1>The Nature of the Zoo</h1>
<main class="article">
  <h2>In the Zoo: From Wild to Tamed</h2>
  <p>[...]</p>
  <div role="contentinfo">
    <p>[...information about this article...]</p>
  </div>
</main>
<main class="article">
  <h2>Feeding Frenzy: The Impact of Cohabitation</h2>
  <p>[...]</p>
  <div role="contentinfo">
    <p>[...information about this article...]</p>
  </div>
</main>
<footer>
  <p>Brought to you by North American Zoo Partnership</p>
</footer>

Why it matters

Landmarks help screen reader users navigate and understand page structure. Multiple contentinfo landmarks create clutter and make it harder for users to locate critical sitewide footer information.

JAWS, NVDA, and VoiceOver allow users to navigate by ARIA landmarks, improving the experience for blind users. However, these landmarks do not visually benefit sighted keyboard or low-vision users and cannot fully replace skip navigation links.

Best practices

• Use only one role="contentinfo" landmark per page.
• Reserve the contentinfo role for the global footer.
• For article- or section-specific footers, use <footer> without the role="contentinfo".
• Combine HTML5 regions and ARIA roles for robust cross-browser, cross-technology support.