Verificação HTML: O role "listitem" é desnecessário para o elemento "li".

Sobre este problema HTML

Muitos elementos HTML têm roles ARIA incorporados (implícitos) definidos pela especificação WAI-ARIA. O elemento <li> nativamente possui o role listitem quando é filho de um elemento <ul>, <ol> ou <menu>. Adicionar role="listitem" explicitamente não altera o comportamento, mas sobrecarrega a sua marcação e sinaliza uma incompreensão de como o HTML semântico e ARIA interagem. Isto enquadra-se na primeira regra do uso de ARIA: “Se você pode usar um elemento HTML nativo com a semântica e comportamento que necessita já incorporados, faça-o, em vez de reutilizar um elemento e adicionar um role ARIA.”

Os roles ARIA redundantes criam vários problemas:

Carga de manutenção — Atributos extra adicionam ruído ao seu código, tornando-o mais difícil de ler e manter.
Potencial confusão — Outros programadores podem questionar-se se o role explícito foi adicionado intencionalmente para sobrepor algo, levando a incerteza durante revisões de código.
Avisos do validador — Ferramentas como o W3C HTML Validator sinalizam estas redundâncias, e acumular avisos desnecessários pode obscurecer problemas reais que necessitam de atenção.

O role ARIA listitem foi concebido para situações onde não é possível usar HTML semântico — por exemplo, quando precisa de criar uma estrutura semelhante a uma lista a partir de elementos genéricos como <div> ou <span>. Nesses casos, você emparelharia role="list" no contentor com role="listitem" em cada filho. Mas quando já está a usar <ul>, <ol> ou <menu> com filhos <li>, os roles ARIA estão incorporados e não devem ser repetidos.

Para corrigir isto, simplesmente remova o atributo role="listitem" dos seus elementos <li>. Se também tem role="list" num <ul> ou <ol>, remova isso também — é igualmente redundante.

Exemplos

❌ Role redundante em elementos `<li>`

<ul role="list">
  <li role="listitem">Maçãs</li>
  <li role="listitem">Bananas</li>
  <li role="listitem">Cerejas</li>
</ul>

Tanto role="list" no <ul> quanto role="listitem" em cada <li> são desnecessários porque estes elementos já possuem esses roles implicitamente.

✅ HTML semântico limpo sem roles redundantes

<ul>
  <li>Maçãs</li>
  <li>Bananas</li>
  <li>Cerejas</li>
</ul>

Os elementos <ul> e <li> fornecem toda a semântica de acessibilidade necessária sem quaisquer atributos ARIA explícitos.

✅ Usar roles ARIA em elementos não semânticos (quando necessário)

Se por alguma razão não consegue usar elementos de lista nativos, os roles ARIA são apropriados em elementos genéricos:

<div role="list">
  <div role="listitem">Maçãs</div>
  <div role="listitem">Bananas</div>
  <div role="listitem">Cerejas</div>
</div>

Este é o caso de uso pretendido para role="listitem" — adicionar semântica de lista a elementos que não a têm nativamente. No entanto, usar <ul>/<ol> semânticos com <li> é sempre preferível quando possível.