Validación HTML: Un elemento con "role=listitem" debe estar contenido en, o ser propiedad de, un elemento con "role=list" o "role=group".

Acerca de este problema HTML

La especificación WAI-ARIA define requisitos estrictos de propiedad para ciertos roles. El rol listitem es uno de esos roles — debe “ser propiedad de” un elemento con role="list" o role="group". “Ser propiedad de” significa que el listitem debe ser un hijo DOM directo del elemento propietario, o estar explícitamente asociado con él a través del atributo aria-owns.

Esto es importante porque los lectores de pantalla y otras tecnologías asistivas dependen del árbol de accesibilidad para transmitir estructura a los usuarios. Cuando un lector de pantalla encuentra una lista estructurada correctamente, anuncia algo como “lista, 3 elementos” y permite al usuario navegar entre elementos. Sin el role="list" padre, los elementos individuales pierden su contexto de lista — los usuarios no sabrán cuántos elementos existen, dónde comienza y termina la lista, o que los elementos están relacionados en absoluto.

En la mayoría de casos, la solución más simple y robusta es usar elementos HTML nativos de lista (<ul> o <ol> con hijos <li>) en lugar de roles ARIA. Los elementos nativos tienen semántica incorporada que no requiere atributos adicionales. Solo usa roles ARIA cuando los elementos nativos no sean factibles — por ejemplo, cuando construyas un componente personalizado donde el diseño visual impida usar marcado de lista estándar.

Ejemplos

Incorrecto: `listitem` sin una lista padre

Estos elementos listitem no están contenidos dentro de un padre role="list" o role="group", por lo que el validador reporta un error.

<div role="listitem">Apples</div>
<div role="listitem">Bananas</div>
<div role="listitem">Cherries</div>

Correcto: envolviendo elementos en `role="list"`

Agregar un contenedor padre con role="list" establece la relación de propiedad requerida.

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

Correcto: usando elementos HTML nativos de lista

Los elementos nativos <ul> y <li> llevan implícitamente los roles list y listitem sin ningún atributo ARIA. Este es el enfoque preferido.

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

Correcto: usando `role="group"` para sublistas anidadas

El contenedor role="group" es apropiado para agrupar un subconjunto de elementos de lista dentro de una lista más grande, como una sublista anidada.

<div role="list">
  <div role="listitem">Fruits
    <div role="group">
      <div role="listitem">Apples</div>
      <div role="listitem">Bananas</div>
    </div>
  </div>
  <div role="listitem">Vegetables
    <div role="group">
      <div role="listitem">Carrots</div>
      <div role="listitem">Peas</div>
    </div>
  </div>
</div>

Ten en cuenta que role="group" debe estar anidado dentro de un role="list" — no reemplaza el contenedor de lista de nivel superior, sino que sirve como un mecanismo de agrupación intermedio dentro de una.

Correcto: usando `aria-owns` para propiedad no descendente

Si la estructura DOM te impide anidar los elementos directamente dentro del contenedor de lista, puedes usar aria-owns para establecer la relación programáticamente.

<div role="list" aria-owns="item-1 item-2 item-3"></div>

<!-- Estos elementos viven en otro lugar del DOM -->

<div role="listitem" id="item-1">Apples</div>
<div role="listitem" id="item-2">Bananas</div>
<div role="listitem" id="item-3">Cherries</div>

Este enfoque debe usarse con moderación, ya que puede crear confusión si el orden visual no coincide con el orden del árbol de accesibilidad. Siempre que sea posible, reestructura tu HTML para que los elementos sean descendientes reales del contenedor de lista.