# Document should not have more than one contentinfo landmark

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/landmark-no-duplicate-contentinfo
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Landmarks are one of the primary ways screen reader users orient themselves on a page. Tools like JAWS, NVDA, and VoiceOver allow users to pull up a list of landmarks and jump directly to any one of them. The `contentinfo` landmark typically contains information like copyright notices, privacy policies, and contact links that apply to the entire page. When multiple `contentinfo` landmarks exist, screen reader users encounter duplicate entries in their landmarks list and cannot tell which one is the actual page footer. This creates confusion and slows down navigation.

The `contentinfo` landmark is generated in two ways: by adding `role="contentinfo"` to an element, or by using a `<footer>` element that is a direct child of `<body>` (or not nested inside `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>`). A `<footer>` nested inside one of those sectioning elements does **not** map to the `contentinfo` role, so it won't trigger this issue. However, `role="contentinfo"` explicitly applied to any element will always create a `contentinfo` landmark regardless of nesting.

## Who is affected

- **Screen reader users** (blind and deafblind users) rely on landmark navigation to move efficiently through a page. Duplicate `contentinfo` landmarks clutter the landmarks list and make it harder to find the real page footer.
- **Sighted keyboard users** who use browser extensions or assistive tools for landmark-based navigation are also affected.

## Related standards

This rule is a Deque best practice. While not mapped to a specific WCAG success criterion, it supports the principles behind [WCAG 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) and [WCAG 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks), which emphasize correct semantic structure and efficient navigation. The ARIA specification itself states that `role="banner"`, `role="main"`, and `role="contentinfo"` should each be used only once per page.

## How to fix it

1. **Audit your page** for all elements that create a `contentinfo` landmark. Search for `role="contentinfo"` and for top-level `<footer>` elements.
2. **Keep only one** `contentinfo` landmark that represents the site-wide footer.
3. If you need footer-like content inside articles or sections, use `<footer>` nested within `<article>`, `<section>`, or `<main>` — these do **not** create a `contentinfo` landmark.
4. Remove any extra `role="contentinfo"` attributes from elements that are not the page-level footer.

## Examples

### Bad example: multiple `contentinfo` landmarks

In this example, `role="contentinfo"` is used on two separate elements, creating duplicate `contentinfo` landmarks. The `<footer>` at the bottom also creates a third one since it is a direct child of `<body>`.

```html
<header>Visit Your Local Zoo!</header>

<main>
  <h1>The Nature of the Zoo</h1>
  <article>
    <h2>In the Zoo: From Wild to Tamed</h2>
    <p>What you see in the zoo are examples of inborn traits left undeveloped.</p>
    <div role="contentinfo">
      <p>Article metadata here</p>
    </div>
  </article>
  <article>
    <h2>Feeding Frenzy: The Impact of Cohabitation</h2>
    <p>Some animals naturally group together with their own kind.</p>
    <div role="contentinfo">
      <p>Article metadata here</p>
    </div>
  </article>
</main>

<footer>
  <p>Brought to you by North American Zoo Partnership</p>
</footer>
```

### Good example: single `contentinfo` landmark

Here, `role="contentinfo"` is used exactly once for the page footer. Article-level footers use `<footer>` nested inside `<article>`, which does not create a `contentinfo` landmark.

```html
<div role="banner">
  <p>Visit Your Local Zoo!</p>
</div>

<div role="main">
  <h1>The Nature of the Zoo</h1>
  <article>
    <h2>In the Zoo: From Wild to Tamed</h2>
    <p>What you see in the zoo are examples of inborn traits left undeveloped.</p>
    <footer>
      <p>Article metadata here</p>
    </footer>
  </article>
  <article>
    <h2>Feeding Frenzy: The Impact of Cohabitation</h2>
    <p>Some animals naturally group together with their own kind.</p>
    <footer>
      <p>Article metadata here</p>
    </footer>
  </article>
</div>

<div role="contentinfo">
  <p>Brought to you by North American Zoo Partnership</p>
</div>
```

### Good example: using semantic HTML5 elements

This version uses HTML5 semantic elements. The single top-level `<footer>` maps to the `contentinfo` role. The `<footer>` elements inside each `<article>` do not.

```html
<header>
  <p>Visit Your Local Zoo!</p>
</header>

<main>
  <h1>The Nature of the Zoo</h1>
  <article>
    <h2>In the Zoo: From Wild to Tamed</h2>
    <p>What you see in the zoo are examples of inborn traits left undeveloped.</p>
    <footer>
      <p>Article metadata here</p>
    </footer>
  </article>
  <article>
    <h2>Feeding Frenzy: The Impact of Cohabitation</h2>
    <p>Some animals naturally group together with their own kind.</p>
    <footer>
      <p>Article metadata here</p>
    </footer>
  </article>
</main>

<footer>
  <p>Brought to you by North American Zoo Partnership</p>
</footer>
```

## What this rule checks

The axe-core rule `landmark-no-duplicate-contentinfo` finds all elements that map to the `contentinfo` landmark role, filters out any that don't actually resolve to that role (such as `<footer>` elements nested inside sectioning elements), and verifies that only one `contentinfo` landmark remains on the page. If more than one is found, the rule reports a violation.
