# Contentinfo landmark should not be contained in another landmark

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/landmark-contentinfo-is-top-level
> 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 and navigate between major sections. The `contentinfo` landmark is specifically intended to hold site-wide footer information — copyright notices, privacy policies, contact links, and similar content. Screen readers like JAWS, NVDA, and VoiceOver provide shortcut keys that let users jump directly to landmarks by role.

When a `contentinfo` landmark is nested inside another landmark (such as `main` or `navigation`), it no longer appears as a top-level landmark in the screen reader's landmark list. This means blind and deafblind users may not be able to find the footer information efficiently, or they may encounter it unexpectedly while navigating a different section of the page. The organizational benefit of landmarks is undermined when they are improperly nested.

This rule is a Deque best practice aligned with the broader principles of proper landmark usage recommended by the W3C's ARIA Landmarks specification. While not mapped to a specific WCAG success criterion, correct landmark structure supports WCAG 1.3.1 (Info and Relationships), WCAG 2.4.1 (Bypass Blocks), and the overall goal of providing a clear, navigable document structure.

## How to Fix It

1. **Locate your `contentinfo` landmark.** This is either a `<footer>` element that is a direct child of `<body>` (which implicitly has `role="contentinfo"`) or any element with an explicit `role="contentinfo"`.
2. **Check its position in the DOM.** If the `contentinfo` landmark is nested inside a `<main>`, `<nav>`, `<aside>`, `<section>`, `<header>`, or any element with a landmark role, it needs to be moved.
3. **Move it to the top level.** Restructure your HTML so the `contentinfo` landmark is a direct child of `<body>`, outside all other landmark regions.

Note that a `<footer>` element only has the implicit `contentinfo` role when it is scoped to the `<body>`. A `<footer>` nested inside an `<article>`, `<section>`, `<aside>`, `<nav>`, or `<main>` does **not** have the `contentinfo` role — it becomes a generic element. This means the issue typically arises when you explicitly add `role="contentinfo"` to a nested element, or when your page structure accidentally places the site-wide `<footer>` inside another landmark.

## Examples

### Incorrect: `contentinfo` Landmark Nested Inside `main`

```html
<body>
  <main>
    <h1>Welcome</h1>
    <p>Page content goes here.</p>
    <footer>
      <p>&copy; 2024 Example Company</p>
    </footer>
  </main>
</body>
```

In this example, the `<footer>` is inside `<main>`, so it does **not** receive the implicit `contentinfo` role. If a developer tries to fix that by adding `role="contentinfo"` explicitly, the landmark becomes nested inside `main`, which triggers this rule:

```html
<body>
  <main>
    <h1>Welcome</h1>
    <p>Page content goes here.</p>
    <div role="contentinfo">
      <p>&copy; 2024 Example Company</p>
    </div>
  </main>
</body>
```

### Correct: `contentinfo` Landmark at the Top Level

```html
<body>
  <main>
    <h1>Welcome</h1>
    <p>Page content goes here.</p>
  </main>
  <footer>
    <p>&copy; 2024 Example Company</p>
  </footer>
</body>
```

Here, the `<footer>` is a direct child of `<body>` and sits outside the `<main>` landmark. It automatically receives the implicit `contentinfo` role, and screen reader users can jump directly to it using landmark navigation.

### Incorrect: Explicit `role="contentinfo"` Inside a `region`

```html
<body>
  <main>
    <h1>Dashboard</h1>
  </main>
  <section aria-label="Additional info">
    <footer role="contentinfo">
      <p>Privacy Policy | Terms of Service</p>
    </footer>
  </section>
</body>
```

### Correct: `contentinfo` Moved Outside the `region`

```html
<body>
  <main>
    <h1>Dashboard</h1>
  </main>
  <footer>
    <p>Privacy Policy | Terms of Service</p>
  </footer>
</body>
```

The `contentinfo` landmark is now at the top level of the document, making it immediately discoverable through screen reader landmark navigation.
