# Contentinfo landmark should not be nested within another landmark.

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

The `contentinfo` landmark identifies a region of the page that contains information about the site as a whole, such as copyright notices, privacy policies, and contact links. Screen reader users rely on landmark navigation to jump directly to these regions. When a `contentinfo` landmark is nested inside another landmark like `main`, `navigation`, `complementary`, `region`, or another `contentinfo`, assistive technologies may not expose it at the top level of the landmark tree. This makes it harder or impossible for users to locate site-wide footer content through landmark shortcuts.

A `<footer>` element automatically receives the `contentinfo` role only when it is a direct child of the `<body>` element (or not nested inside `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>`). When a `<footer>` appears inside one of these sectioning elements, the browser scopes it to that section and does not assign the `contentinfo` role. If you then force `role="contentinfo"` on a nested footer, you create a landmark that contradicts the expected document structure. Screen reader users who press a shortcut to list landmarks will see a `contentinfo` landmark buried inside another region, which is confusing and inconsistent with how the page is actually organized.

This rule relates to WCAG 1.3.1 Info and Relationships (Level A), which requires that the structural relationships conveyed visually are also represented in the underlying markup. A `contentinfo` landmark nested within another landmark misrepresents the structural hierarchy of the page to assistive technology users.

## How to fix it

The fix depends on why the `contentinfo` landmark ended up nested.

If the `<footer>` with `role="contentinfo"` is inside a `<main>`, `<section>`, `<article>`, `<aside>`, or `<nav>` element, there are two options:

1. Move the `<footer>` outside the sectioning element so it becomes a direct child of `<body>`. The browser will then assign the `contentinfo` role automatically, and no explicit `role` attribute is needed.
2. If the footer is intentionally scoped to a section (for example, metadata at the bottom of an `<article>`), remove the `role="contentinfo"` attribute. The footer will remain a scoped footer without creating an incorrect landmark.

Only one `contentinfo` landmark should exist per page. If you have a site-wide footer plus section-level footers, keep the site-wide footer at the top level and leave the section-level footers without an explicit landmark role.

## Examples

### Incorrect: `contentinfo` nested inside `main`

```html
<body>
  <main>
    <h1>Welcome</h1>
    <p>Page content here.</p>
    <footer role="contentinfo">
      <p>© 2024 Example Corp.</p>
    </footer>
  </main>
</body>
```

The `footer` is inside `<main>`, which is itself a landmark. Adding `role="contentinfo"` creates a nested landmark that screen readers will not treat as a top level `contentinfo`.

### Correct: footer moved outside `main`

```html
<body>
  <main>
    <h1>Welcome</h1>
    <p>Page content here.</p>
  </main>
  <footer>
    <p>© 2024 Example Corp.</p>
  </footer>
</body>
```

The `<footer>` is a direct child of `<body>`, so the browser automatically assigns the `contentinfo` role. No explicit `role` attribute is needed.

### Correct: scoped footer without `contentinfo` role

```html
<body>
  <main>
    <article>
      <h2>Blog post title</h2>
      <p>Article content here.</p>
      <footer>
        <p>Published on June 1, 2024</p>
      </footer>
    </article>
  </main>
  <footer>
    <p>© 2024 Example Corp.</p>
  </footer>
</body>
```

The footer inside `<article>` is scoped to that article and does not carry the `contentinfo` role. The site-wide footer sits outside `<main>` at the top level, where it correctly becomes the page's `contentinfo` landmark.
