# The “navigation” role is unnecessary for element “nav”.

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

The HTML specification defines certain elements as having **implicit ARIA roles** — roles that are automatically communicated to assistive technologies without any additional attributes. The `nav` element is one of these: its implicit role is `navigation`. When you explicitly add `role="navigation"` to a `nav` element, you're telling the browser something it already knows, which clutters your markup without adding any value.

This redundancy matters for several reasons:

- **Code maintainability**: Unnecessary attributes make your HTML harder to read and maintain. Future developers may wonder if the explicit role is there for a specific reason, creating confusion.
- **Standards compliance**: The W3C validator warns about this because the ARIA specification follows a principle often summarized as the **first rule of ARIA**: don't use ARIA if a native HTML element already provides the semantics you need. Extending this principle, don't re-declare semantics that are already present.
- **No accessibility benefit**: Assistive technologies like screen readers already recognize `nav` as a navigation landmark. Adding the explicit role doesn't improve the experience for users of these technologies — it's simply noise.

The `role="navigation"` attribute is useful when applied to a non-semantic element like a `div` or `span` that functions as navigation but can't be changed to a `nav` element (for example, due to legacy constraints). But when you're already using `nav`, the attribute is unnecessary.

To fix this, remove the `role="navigation"` attribute from your `nav` element. The semantic meaning is fully preserved.

## Examples

### Incorrect: redundant role on `nav`

This triggers the W3C validator warning because the `navigation` role is already implicit:

```html
<nav role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
```

### Correct: `nav` without the explicit role

Simply remove the redundant `role` attribute:

```html
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
```

### Correct: using `role="navigation"` on a non-semantic element

If you cannot use a `nav` element, applying the role to a `div` is a valid approach. This does **not** trigger the warning:

```html
<div role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>
```

### Correct: labeling multiple `nav` elements

When a page has more than one `nav`, use `aria-label` or `aria-labelledby` to differentiate them for assistive technology users — but still don't add the redundant `role`:

```html
<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<nav aria-label="Footer">
  <ul>
    <li><a href="/privacy">Privacy Policy</a></li>
    <li><a href="/terms">Terms of Service</a></li>
  </ul>
</nav>
```