# Page should not have more than one contentinfo landmark.

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

The `contentinfo` landmark identifies a region that contains information about the page or site, such as copyright notices, privacy policies, and contact details. In HTML, the `<footer>` element automatically receives the `contentinfo` role when it is a direct child of the `<body>` element (or not nested inside a sectioning element like `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>`). A page must have no more than one top-level `contentinfo` landmark.

When a page contains multiple `contentinfo` landmarks at the top level, screen reader users lose the ability to quickly and reliably navigate to the site's footer information. Screen readers provide shortcut keys to jump between landmark regions, and landmarks work best when each type appears only once at the top level, giving users a predictable page structure. Duplicate `contentinfo` landmarks create ambiguity: a user jumping to "the footer" has no way to know which one contains the information they need.

This rule relates to WCAG 2.0 Success Criterion 1.3.1 (Info and Relationships), Level A, which requires that the structure and relationships conveyed visually are also available programmatically. Duplicate top-level landmarks break the expected structural contract of a well-formed page.

## How to fix it

The fix depends on why multiple `contentinfo` landmarks exist.

If the page has more than one `<footer>` element as a direct child of `<body>`, determine which one is the true site-wide footer and keep it. Move or nest the others inside sectioning elements. A `<footer>` inside an `<article>`, `<section>`, or `<aside>` does not receive the `contentinfo` role, so it won't conflict.

If the page uses `role="contentinfo"` on multiple elements, remove the role from all but one. Any remaining footer-like regions should either be nested inside sectioning elements or given a different, more appropriate role.

## Examples

### Incorrect: two top-level footers

```html
<body>
  <header>
    <h1>My site</h1>
  </header>
  <main>
    <p>Page content goes here.</p>
  </main>
  <footer>
    <p>Contact: info@example.com</p>
  </footer>
  <footer>
    <p>&copy; 2024 Example Inc.</p>
  </footer>
</body>
```

Both `<footer>` elements are direct children of `<body>`, so each one maps to the `contentinfo` role. The page now has two `contentinfo` landmarks.

### Correct: single top-level footer

```html
<body>
  <header>
    <h1>My site</h1>
  </header>
  <main>
    <p>Page content goes here.</p>
  </main>
  <footer>
    <p>Contact: info@example.com</p>
    <p>&copy; 2024 Example Inc.</p>
  </footer>
</body>
```

Combining the content into one `<footer>` gives the page a single `contentinfo` landmark.

### Correct: footer nested inside a sectioning element

```html
<body>
  <header>
    <h1>My site</h1>
  </header>
  <main>
    <article>
      <h2>Blog post title</h2>
      <p>Article content.</p>
      <footer>
        <p>Written by Jane Doe on March 5, 2024</p>
      </footer>
    </article>
  </main>
  <footer>
    <p>&copy; 2024 Example Inc.</p>
  </footer>
</body>
```

The `<footer>` inside the `<article>` does not become a `contentinfo` landmark because it is scoped to its parent sectioning element. Only the bottom `<footer>` (a direct child of `<body>`) maps to `contentinfo`, so the page has exactly one.

### Incorrect: duplicate role="contentinfo"

```html
<body>
  <div role="contentinfo">
    <p>Contact: info@example.com</p>
  </div>
  <div role="contentinfo">
    <p>&copy; 2024 Example Inc.</p>
  </div>
</body>
```

### Correct: single explicit contentinfo role

```html
<body>
  <footer>
    <p>Contact: info@example.com</p>
    <p>&copy; 2024 Example Inc.</p>
  </footer>
</body>
```

Using a single `<footer>` element is preferable to applying `role="contentinfo"` manually, since the browser handles the role mapping automatically.
