# Bad value “navigation” for attribute “role” on element “ul”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-navigation-for-attribute-role-on-element-ul
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

In HTML, every element has a set of ARIA roles it is allowed to carry. The `ul` element implicitly has the `list` role, and the ARIA specification only permits certain roles to override it — specifically `directory`, `group`, `listbox`, `menu`, `menubar`, `none`, `presentation`, `radiogroup`, `tablist`, `toolbar`, and `tree`. The `navigation` role is not among them.

The `navigation` role is a landmark role, meaning it identifies a major section of the page dedicated to navigational links. HTML5 introduced the `nav` element specifically for this purpose, and it carries the `navigation` role implicitly — no `role` attribute needed. When you place `role="navigation"` on a `ul`, you're conflicting with the element's semantics. A `ul` represents a list of items, not a navigational landmark. Assistive technologies like screen readers rely on correct role assignments to help users understand page structure and navigate efficiently. An incorrect role can confuse users by misrepresenting what the element actually is.

Beyond accessibility concerns, this is a standards compliance issue. The W3C validator enforces the rules defined in the ARIA in HTML specification, which maps each HTML element to its allowed roles. Violating these rules means your markup is invalid and may behave unpredictably across different browsers and assistive technologies.

The fix is straightforward: use a `nav` element as the wrapper for your navigation list. This gives you the `navigation` landmark semantics automatically, while the `ul` retains its proper `list` role. Both elements work together — the `nav` tells assistive technologies "this is a navigation section," and the `ul` tells them "here is a list of links."

## Examples

### ❌ Incorrect: `navigation` role on a `ul`

This triggers the validation error because `navigation` is not an allowed role for `ul`.

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

### ✅ Correct: wrapping the `ul` in a `nav` element

The `nav` element provides the `navigation` landmark implicitly. No `role` attribute is needed.

```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: labeling multiple navigation landmarks

When a page has more than one `nav` element, use `aria-label` to distinguish them for screen reader users.

```html
<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</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>
```

### ✅ Correct: using an allowed role on `ul`

If you need the `ul` to behave as something other than a plain list — for example, a menu in a web application — use one of its permitted roles.

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

Note that `menu` and `menubar` roles are meant for application-style menus with keyboard interaction, not for simple site navigation. For standard website navigation, the `nav` wrapper approach is almost always the right choice.