Verificação HTML: Valor inválido "group" para o atributo "role" no elemento "li".

Sobre este problema HTML

A especificação HTML do W3C restringe quais roles ARIA podem ser utilizados em elementos específicos. Um elemento li já carrega o role implícito de listitem quando é filho de um ul ou ol, pelo que adicionar um role explícito é frequentemente desnecessário. O role group, conforme definido na especificação WAI-ARIA, destina-se a elementos contentor que formam uma coleção lógica de itens relacionados — semelhante a como um fieldset agrupa controlos de formulário. Aplicar group a um elemento li contradiz o propósito do elemento como item individual dentro de uma lista.

Isto importa por várias razões. Tecnologias assistivas como leitores de ecrã dependem dos roles ARIA para comunicar a estrutura e propósito do conteúdo aos utilizadores. Quando um elemento li é marcado com role="group", substitui a semântica nativa de listitem, potencialmente confundindo utilizadores que dependem destas ferramentas. Um leitor de ecrã pode anunciar o elemento como contentor de grupo em vez de item de lista, quebrando o padrão de navegação esperado da lista. Navegadores e tecnologias assistivas são otimizados em torno do uso correto de roles, pelo que combinações inválidas podem levar a comportamentos imprevisíveis.

Quando pode realmente precisar de `group`

Se a sua intenção é agrupar um conjunto de elementos relacionados, o role group pertence a um contentor envolvente — não aos itens individuais dentro dele. Por exemplo, pode usar role="group" numa div ou ul que contenha um subconjunto de controlos relacionados dentro de uma interface maior. Se um li contém conteúdo interativo aninhado que precisa de ser agrupado, envolva esse conteúdo num contentor interno com o role group.

Como corrigir

Remova completamente o role se o li é um item de lista padrão dentro de um ul ou ol. O navegador já fornece a semântica correta de listitem.
Mova o role group para um elemento contentor se realmente precisa de criar um grupo rotulado de itens relacionados.
Use um role válido diferente se o li serve um propósito não-padrão, como menuitem, option, tab, treeitem, ou presentation, dependendo do padrão de widget que está a construir.

Exemplos

Incorreto: role `group` em elementos `li`

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

Isto desencadeia o erro de validação porque group não é um role permitido para li.

Correto: nenhum role explícito necessário

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

Cada li dentro de um ul tem automaticamente o role listitem. Não é necessária marcação adicional.

Correto: usar `group` num elemento contentor

Se precisar de agrupar itens relacionados com um rótulo, aplique o role group ao contentor:

<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>

Correto: grupos aninhados dentro de itens de lista

Se cada item de lista contém um grupo de controlos relacionados, coloque o role group num wrapper 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>

Isto preserva a estrutura da lista enquanto aplica corretamente o role group a contentores de widgets relacionados. O atributo aria-label dá a cada grupo um nome acessível, o que é recomendado quando se usa role="group".