Rol Estructura del documento

`listitem`

Marca un elemento como un ítem dentro de una lista. Se recomienda usar <li> dentro de <ul> o <ol> — el elemento nativo incluye el rol y la posición en el conjunto. Se debe recurrir a role="listitem" únicamente cuando se combine con un role="list" explícito en un elemento padre que no sea una lista.

Cuándo utilizarlo

Dentro de un <ul> o <ol>, basta con usar <li>. El navegador expone el rol, el recuento y la posición en el conjunto de forma automática.

El único caso práctico para role="listitem" es cuando se ha aplicado role="list" a un elemento que no es una lista (por ejemplo, para anular la heurística de list-style: none de Safari) y los ítems internos también son elementos no lista. En ese caso cada ítem necesita role="listitem" para ser contabilizado.

Un listitem DEBE estar dentro de un role="list". Un role="listitem" sin elemento lista padre es inválido y los lectores de pantalla lo ignoran.

Errores frecuentes

role="listitem" en un <div> cuyo padre no es un role="list". El listitem carece de contexto de grupo.
<li> fuera de <ul> / <ol>. HTML inválido.
Establecer aria-posinset y aria-setsize cuando la jerarquía del DOM ya refleja la posición. Es redundante.
Confundir role="listitem" con role="option" (utilizado dentro de role="listbox" para ítems seleccionables).
Añadir role="listitem" a elementos <li> que ya están dentro de un <ul> — rol duplicado, sin efecto.

Ejemplo

<!-- Forma preferida -->
<ul>
  <li>JAWS</li>
  <li>NVDA</li>
  <li>VoiceOver</li>
</ul>

<!-- Contenedor no lista con roles explícitos -->
<div role="list" aria-label="Actualizaciones recientes">
  <div role="listitem">Nueva página de destino /toolkit/standards/</div>
  <div role="listitem">Referencia WCAG 2.2 completa</div>
</div>