# The “list” role is unnecessary for element “ul”.

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

The HTML specification assigns implicit ARIA roles to many elements, meaning browsers and assistive technologies already understand their purpose without any extra attributes. The `ul` element has a built-in role of `list`, the `nav` element has a role of `navigation`, the `button` element has a role of `button`, and so on. When you explicitly add a role that matches the element's implicit role, it creates redundancy that the validator warns about.

This principle is formalized as the first rule of ARIA use: **do not use ARIA if a native HTML element already provides the semantics you need.** Adding redundant ARIA roles clutters your markup, can confuse developers maintaining the code, and in rare edge cases may cause assistive technologies to announce information twice or behave unexpectedly.

This same warning applies to other elements with implicit roles, such as adding `role="navigation"` to a `nav` element, `role="banner"` to a `header` element, or `role="contentinfo"` to a `footer` element.

### A note about Safari and `list-style: none`

There is one well-known exception worth mentioning. Safari intentionally removes list semantics from `ul` and `ol` elements when `list-style: none` is applied via CSS. This means VoiceOver on macOS and iOS will not announce the element as a list. In this specific case, some developers deliberately add `role="list"` to restore the list semantics. While the W3C validator will still flag it as redundant (since it evaluates HTML in isolation, without considering CSS), this is a legitimate accessibility pattern where the redundant role serves a real purpose. If you're in this situation, you may choose to keep `role="list"` and accept the validator warning.

## Examples

### Incorrect: redundant `role="list"` on `ul`

```html
<ul role="list">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
```

### Correct: relying on implicit semantics

```html
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
```

### Incorrect: other common redundant roles

```html
<nav role="navigation">
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<main role="main">
  <h1>Welcome</h1>
</main>

<footer role="contentinfo">
  <p>© 2024 Example Inc.</p>
</footer>
```

### Correct: native elements without redundant roles

```html
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<main>
  <h1>Welcome</h1>
</main>

<footer>
  <p>© 2024 Example Inc.</p>
</footer>
```

### Acceptable exception: restoring semantics removed by CSS

If your stylesheet strips list markers and you need to preserve list semantics for screen readers, the redundant role is a pragmatic choice:

```html
<!-- list-style: none is applied via CSS, which removes semantics in Safari -->
<ul role="list" class="unstyled-list">
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ul>
```

In this case, you can suppress or ignore the validator warning, understanding that it serves an accessibility need that the validator cannot detect from the HTML alone.