Valor incorrecto “button” para el atributo “role” en el elemento “li”.

El elemento <li> tiene un rol ARIA implícito de listitem, y la especificación HTML del WHATWG restringe qué roles se pueden aplicar a él. El rol button no está entre los roles permitidos en <li>. Cuando estableces role="button" en un <li>, estás diciéndole a las tecnologías de asistencia que el elemento es un botón, pero el navegador y la especificación aún lo reconocen como un elemento de lista. Esto crea un conflicto semántico que puede confundir a los lectores de pantalla y otras herramientas de asistencia, llevando a una experiencia degradada para los usuarios que dependen de ellas.

Más allá del error de validación, hay preocupaciones prácticas de accesibilidad. Un elemento <button> real viene con soporte de teclado incorporado (es enfocable y activable con Enter o Espacio), mientras que un <li> con role="button" carece de estos comportamientos por defecto. Necesitarías añadir manualmente tabindex, controladores de eventos de teclado y estilos de foco, recreando efectivamente lo que <button> te da gratis. Esto es propenso a errores y viola el principio ARIA de preferir elementos HTML nativos sobre anulaciones de rol ARIA.

Cómo solucionarlo

Hay varios enfoques dependiendo de tu caso de uso:

1. Coloca un <button> dentro de cada <li> — Este es el mejor enfoque cuando tienes una lista de acciones, ya que preserva la semántica de lista mientras proporciona la funcionalidad adecuada de botón.
2. Usa elementos <button> directamente — Si los elementos no son realmente una lista, elimina la estructura <ul>/<li> y usa elementos <button> en su lugar.
3. Usa un <div> o <span> con role="button" — Si no puedes usar un <button> nativo por alguna razón, estos elementos aceptan el rol button. También necesitarás añadir tabindex="0" y el manejo de eventos de teclado tú mismo.

Ejemplos

❌ Inválido: role="button" en elementos <li>

<ul>
  <li role="button">Copiar</li>
  <li role="button">Pegar</li>
  <li role="button">Eliminar</li>
</ul>

Esto desencadena el error de validación porque <li> no permite el rol button.

✅ Corregido: usando elementos <button> dentro de <li>

<ul>
  <li><button type="button">Copiar</button></li>
  <li><button type="button">Pegar</button></li>
  <li><button type="button">Eliminar</button></li>
</ul>

Esto preserva la estructura de lista mientras proporciona un comportamiento de botón adecuado y accesible sin trabajo extra.

✅ Corregido: usando elementos <button> independientes

Si la estructura de lista no es significativa, elimínala por completo:

<div>
  <button type="button">Copiar</button>
  <button type="button">Pegar</button>
  <button type="button">Eliminar</button>
</div>

✅ Corregido: usando un patrón de barra de herramientas

Para un grupo de acciones relacionadas, el patrón ARIA toolbar es una excelente opción:

<div role="toolbar" aria-label="Acciones de texto">
  <button type="button">Copiar</button>
  <button type="button">Pegar</button>
  <button type="button">Eliminar</button>
</div>

✅ Corregido: usando role="button" en un elemento permitido

Si realmente no puedes usar un <button> nativo, un <div> o <span> puede aceptar el rol button. Ten en cuenta que debes manejar manualmente el foco y la interacción del teclado:

<div role="button" tabindex="0">Copiar</div>

Sin embargo, este enfoque es casi siempre inferior a usar un <button> nativo y solo debe usarse como último recurso. Los elementos nativos proporcionan comportamiento de teclado, integración con formularios y ganchos de estilo consistentes que son difíciles de replicar de manera confiable.

Más información:

MDN Reference

MDN: ARIA button role

→