El rol “listitem” es innecesario para el elemento “li”.

Muchos elementos HTML tienen roles ARIA integrados (implícitos) definidos por la especificación WAI-ARIA. El elemento <li> conlleva nativamente el rol listitem cuando es hijo de un elemento <ul>, <ol> o <menu>. Añadir role="listitem" explícitamente no cambia el comportamiento, pero satura tu marcado y señala un malentendido sobre cómo interactúan el HTML semántico y ARIA. Esto cae bajo la primera regla del uso de ARIA: “Si puedes usar un elemento HTML nativo con la semántica y comportamiento que necesitas ya integrados, hazlo, en lugar de reutilizar un elemento y añadir un rol ARIA.”

Los roles ARIA redundantes crean varios problemas:

• Carga de mantenimiento — Los atributos extra añaden ruido a tu código, haciéndolo más difícil de leer y mantener.
• Confusión potencial — Otros desarrolladores pueden preguntarse si el rol explícito se añadió intencionalmente para anular algo, llevando a incertidumbre durante las revisiones de código.
• Advertencias del validador — Herramientas como el W3C HTML Validator marcan estas redundancias, y acumular advertencias innecesarias puede ocultar problemas reales que necesitan atención.

El rol ARIA listitem está diseñado para situaciones donde no puedes usar HTML semántico — por ejemplo, cuando necesitas crear una estructura similar a una lista a partir de elementos genéricos como <div> o <span>. En esos casos, combinarías role="list" en el contenedor con role="listitem" en cada hijo. Pero cuando ya estás usando <ul>, <ol> o <menu> con hijos <li>, los roles ARIA están integrados y no deben repetirse.

Para solucionarlo, simplemente elimina el atributo role="listitem" de tus elementos <li>. Si también tienes role="list" en un <ul> o <ol>, elimínalo también — es igualmente redundante.

Ejemplos

❌ Rol redundante en elementos <li>

<ul role="list">
  <li role="listitem">Manzanas</li>
  <li role="listitem">Plátanos</li>
  <li role="listitem">Cerezas</li>
</ul>

Tanto role="list" en el <ul> como role="listitem" en cada <li> son innecesarios porque estos elementos ya llevan esos roles implícitamente.

✅ HTML semántico limpio sin roles redundantes

<ul>
  <li>Manzanas</li>
  <li>Plátanos</li>
  <li>Cerezas</li>
</ul>

Los elementos <ul> y <li> proporcionan toda la semántica de accesibilidad necesaria sin ningún atributo ARIA explícito.

✅ Usar roles ARIA en elementos no semánticos (cuando sea necesario)

Si por alguna razón no puedes usar elementos de lista nativos, los roles ARIA son apropiados en elementos genéricos:

<div role="list">
  <div role="listitem">Manzanas</div>
  <div role="listitem">Plátanos</div>
  <div role="listitem">Cerezas</div>
</div>

Este es el caso de uso previsto para role="listitem" — añadir semántica de lista a elementos que no la tienen nativamente. Sin embargo, usar <ul>/<ol> semánticos con <li> es siempre preferible cuando sea posible.

Más información:

MDN Reference

MDN: Listitem role

→