# The “contentinfo” role is unnecessary for element “footer”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-contentinfo-role-is-unnecessary-for-element-footer
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification maps certain elements to implicit ARIA roles. The `<footer>` element, when used as a direct child of `<body>` (i.e., not nested inside an `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>` element), automatically carries the `contentinfo` landmark role. This means screen readers and other assistive technologies already announce it as a content information landmark without any extra markup.

Adding `role="contentinfo"` to a `<footer>` element is redundant because:

- **It duplicates built-in semantics.** Browsers already expose the correct role to the accessibility tree. Repeating it adds no benefit and clutters your markup.
- **It can cause confusion for developers.** Seeing an explicit role might suggest the element doesn't have one by default, leading to misunderstandings about how HTML semantics work.
- **It violates the first rule of ARIA use.** The W3C's "Using ARIA" guide states: "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."

It's worth noting that when a `<footer>` is nested inside a sectioning element like `<article>` or `<section>`, it does **not** carry the `contentinfo` role — it maps to a generic role instead. In that context, adding `role="contentinfo"` would actually change the element's semantics rather than being redundant, though doing so is generally not appropriate since each page should have only one `contentinfo` landmark.

If you are working with a `<div>` that serves as a footer (perhaps in legacy code), the best approach is to replace it with a semantic `<footer>` element rather than applying `role="contentinfo"` to the `<div>`.

## Examples

### ❌ Redundant role on `<footer>`

This triggers the validator warning because the role is already implicit:

```html
<footer role="contentinfo">
  <p>&copy; 2024 Example Corp. All rights reserved.</p>
</footer>
```

### ✅ Fixed: `<footer>` without redundant role

Simply remove the `role="contentinfo"` attribute:

```html
<footer>
  <p>&copy; 2024 Example Corp. All rights reserved.</p>
</footer>
```

### ✅ Using a `<div>` as a footer (legacy pattern)

If you cannot use a `<footer>` element for some reason, applying `role="contentinfo"` to a `<div>` is valid and meaningful since the `<div>` has no implicit role:

```html
<div role="contentinfo">
  <p>&copy; 2024 Example Corp. All rights reserved.</p>
</div>
```

However, replacing the `<div>` with a `<footer>` is always the preferred approach.

### ✅ Nested footer inside a section

When `<footer>` appears inside a sectioning element, it does not carry the `contentinfo` role. No explicit role is needed here either — it simply represents footer content for that section:

```html
<article>
  <h2>Blog Post Title</h2>
  <p>Article content here.</p>
  <footer>
    <p>Published on January 1, 2024</p>
  </footer>
</article>
```
