# The “listitem” role is unnecessary for element “li”.

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

Many HTML elements have built-in (implicit) ARIA roles defined by the WAI-ARIA specification. The `<li>` element natively carries the `listitem` role when it is a child of a `<ul>`, `<ol>`, or `<menu>` element. Adding `role="listitem"` explicitly doesn't change behavior, but it clutters your markup and signals a misunderstanding of how semantic HTML and ARIA interact. This falls under the first rule of ARIA use: **"If you can use a native HTML element with the semantics and behavior you require already built in, do so, instead of re-purposing an element and adding an ARIA role."**

Redundant ARIA roles create several problems:

- **Maintenance burden** — Extra attributes add noise to your code, making it harder to read and maintain.
- **Potential confusion** — Other developers may wonder if the explicit role was added intentionally to override something, leading to uncertainty during code reviews.
- **Validator warnings** — Tools like the W3C HTML Validator flag these redundancies, and accumulating unnecessary warnings can obscure real issues that need attention.

The ARIA `listitem` role is designed for situations where you cannot use semantic HTML — for instance, when you need to create a list-like structure from generic elements like `<div>` or `<span>`. In those cases, you would pair `role="list"` on the container with `role="listitem"` on each child. But when you're already using `<ul>`, `<ol>`, or `<menu>` with `<li>` children, the ARIA roles are built in and should not be repeated.

To fix this, simply remove the `role="listitem"` attribute from your `<li>` elements. If you also have `role="list"` on a `<ul>` or `<ol>`, remove that too — it's equally redundant.

## Examples

### ❌ Redundant role on `<li>` elements

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

Both `role="list"` on the `<ul>` and `role="listitem"` on each `<li>` are unnecessary because these elements already carry those roles implicitly.

### ✅ Clean semantic HTML without redundant roles

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

The `<ul>` and `<li>` elements provide all the accessibility semantics needed without any explicit ARIA attributes.

### ✅ Using ARIA roles on non-semantic elements (when necessary)

If for some reason you cannot use native list elements, ARIA roles are appropriate on generic elements:

```html
<div role="list">
  <div role="listitem">Apples</div>
  <div role="listitem">Bananas</div>
  <div role="listitem">Cherries</div>
</div>
```

This is the intended use case for `role="listitem"` — adding list semantics to elements that don't have them natively. However, using semantic `<ul>`/`<ol>` with `<li>` is always preferred when possible.