# An “li” element that is a descendant of a “ul”, “ol”, or “menu” element with no explicit “role” value, or a descendant of a “role=list” element, must not have any “role” value other than “listitem”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-li-element-that-is-a-descendant-of-a-ul-ol-or-menu-element-with-no-explicit-role-value-or-a-descendant-of-a-role-list-element-must-not-have-any-role-value-other-than-listitem
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An `<li>` element inside a `<ul>`, `<ol>`, or `<menu>` must not be assigned any ARIA `role` other than `listitem`.

When an `<li>` sits inside a standard list container (`<ul>`, `<ol>`, or `<menu>`) that has no explicit `role` attribute, the browser already treats the `<li>` as having an implicit role of `listitem`. Assigning a different role, such as `role="presentation"`, `role="option"`, or `role="tab"`, contradicts the semantics of the parent-child relationship between the list and its items. Screen readers and other assistive technologies rely on this relationship to convey list structure to users.

The same restriction applies when the parent element has `role="list"` set explicitly. In that context, child `<li>` elements are still expected to carry only the `listitem` role.

If you need a different role on the items, restructure the markup. For example, use `<div>` elements instead of `<ul>` and `<li>`, and apply the appropriate roles directly. Or, if the items genuinely are list items, remove the conflicting `role` attribute.

## Examples

### Invalid: `li` with a non-listitem role inside a `ul`

```html
<ul>
  <li role="tab">Dashboard</li>
  <li role="tab">Settings</li>
  <li role="tab">Profile</li>
</ul>
```

### Fixed: use appropriate elements when a different role is needed

If the items are tabs, drop the list markup and use elements that match the intended semantics:

```html
<div role="tablist">
  <button role="tab" aria-selected="true">Dashboard</button>
  <button role="tab" aria-selected="false">Settings</button>
  <button role="tab" aria-selected="false">Profile</button>
</div>
```

### Fixed: keep the list but remove the conflicting role

If the content really is a list, remove the extra `role`:

```html
<ul>
  <li>Dashboard</li>
  <li>Settings</li>
  <li>Profile</li>
</ul>
```