Role Document structure

`listitem`

Marks an element as one item in a list. Use <li> inside <ul> or <ol> — the native element carries the role and the position-in-set. Reach for role="listitem" only when paired with an explicit role="list" on a non-list parent.

When to use

Inside a <ul> or <ol>, just use <li>. The browser exposes the role, the count, and the position-in-set automatically.

The only practical case for role="listitem" is when you have applied role="list" to a non-list element (for example, to override Safari’s list-style: none heuristic), and the items inside are also non-list elements. Then each item needs role="listitem" to be counted.

A listitem MUST be inside a role="list". A bare role="listitem" with no list parent is invalid and screen readers ignore it.

Common failures

role="listitem" on a <div> whose parent is not a role="list". The listitem has no group context.
<li> outside <ul> / <ol>. Invalid HTML.
Setting aria-posinset and aria-setsize when the DOM hierarchy already reflects position. Redundant.
Confusing role="listitem" with role="option" (used inside role="listbox" for selectable items).
Adding role="listitem" to <li> elements that are already inside a <ul> — duplicate role, no effect.

Example

<!-- Preferred -->
<ul>
  <li>JAWS</li>
  <li>NVDA</li>
  <li>VoiceOver</li>
</ul>

<!-- Non-list container with explicit roles -->
<div role="list" aria-label="Recent updates">
  <div role="listitem">New /toolkit/standards/ landing page</div>
  <div role="listitem">WCAG 2.2 reference complete</div>
</div>