Validación HTML: Valor erróneo "group" para el atributo "role" en el elemento "li".

Acerca de este problema HTML

La especificación HTML del W3C restringe qué roles ARIA pueden usarse en elementos específicos. Un elemento li ya lleva el role implícito de listitem cuando es hijo de un ul o ol, por lo que añadir un role explícito a menudo es innecesario. El role group, tal como se define en la especificación WAI-ARIA, está destinado a elementos contenedores que forman una colección lógica de elementos relacionados — similar a como un fieldset agrupa controles de formulario. Aplicar group a un elemento li contradice el propósito del elemento como un elemento individual dentro de una lista.

Esto es importante por varias razones. Las tecnologías de asistencia como los lectores de pantalla dependen de los roles ARIA para comunicar la estructura y propósito del contenido a los usuarios. Cuando un elemento li está marcado con role="group", anula las semánticas nativas de listitem, potencialmente confundiendo a usuarios que dependen de estas herramientas. Un lector de pantalla podría anunciar el elemento como un contenedor de grupo en lugar de un elemento de lista, rompiendo el patrón de navegación esperado de la lista. Los navegadores y tecnologías de asistencia están optimizados para el uso correcto de roles, por lo que las combinaciones inválidas pueden llevar a comportamientos impredecibles.

Cuándo podrías necesitar realmente `group`

Si tu intención es agrupar un conjunto de elementos relacionados, el role group pertenece en un contenedor envolvente — no en los elementos individuales dentro de él. Por ejemplo, podrías usar role="group" en un div o un ul que contenga un subconjunto de controles relacionados dentro de una interfaz más grande. Si un li contiene contenido interactivo anidado que necesita ser agrupado, envuelve ese contenido en un contenedor interno con el role group en su lugar.

Cómo solucionarlo

Elimina el role completamente si el li es un elemento de lista estándar dentro de un ul o ol. El navegador ya proporciona las semánticas correctas de listitem.
Mueve el role group a un elemento contenedor si genuinamente necesitas crear un grupo etiquetado de elementos relacionados.
Usa un role válido diferente si el li sirve un propósito no estándar, como menuitem, option, tab, treeitem, o presentation, dependiendo del patrón de widget que estés construyendo.

Ejemplos

Incorrecto: role `group` en elementos `li`

<ul>
  <li role="group">Fruits</li>
  <li role="group">Vegetables</li>
  <li role="group">Grains</li>
</ul>

Esto desencadena el error de validación porque group no es un role permitido para li.

Correcto: no se necesita role explícito

<ul>
  <li>Fruits</li>
  <li>Vegetables</li>
  <li>Grains</li>
</ul>

Cada li dentro de un ul automáticamente tiene el role listitem. No se necesita marcado adicional.

Correcto: usando `group` en un elemento contenedor

Si necesitas agrupar elementos relacionados con una etiqueta, aplica el role group al contenedor:

<div role="group" aria-labelledby="food-heading">
  <h2 id="food-heading">Food Categories</h2>
  <ul>
    <li>Fruits</li>
    <li>Vegetables</li>
    <li>Grains</li>
  </ul>
</div>

Correcto: grupos anidados dentro de elementos de lista

Si cada elemento de lista contiene un grupo de controles relacionados, coloca el role group en un envolvente interno:

<ul>
  <li>
    <div role="group" aria-label="Text formatting">
      <button>Bold</button>
      <button>Italic</button>
      <button>Underline</button>
    </div>
  </li>
  <li>
    <div role="group" aria-label="Text alignment">
      <button>Left</button>
      <button>Center</button>
      <button>Right</button>
    </div>
  </li>
</ul>

Esto preserva la estructura de lista mientras aplica correctamente el role group a contenedores de widgets relacionados. El atributo aria-label da a cada grupo un nombre accesible, lo cual se recomienda cuando se usa role="group".