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

Sobre este problema HTML

Muitos elementos HTML têm papéis ARIA incorporados (implícitos) definidos pela especificação WAI-ARIA. O elemento <li> carrega nativamente o papel listitem quando é filho de um elemento <ul>, <ol> ou <menu>. Adicionar role="listitem" explicitamente não altera o comportamento, mas desorganiza a sua marcação e indica um mal-entendido sobre como o HTML semântico e ARIA interagem. Isto enquadra-se na primeira regra do uso de ARIA: “Se pode usar um elemento HTML nativo com a semântica e comportamento que já precisa incorporados, faça-o, em vez de reaproveitando um elemento e adicionando um papel ARIA.”

Papéis ARIA redundantes criam vários problemas:

Fardo de manutenção — Atributos extra adicionam ruído ao seu código, tornando-o mais difícil de ler e manter.
Confusão potencial — Outros programadores podem questionar-se se o papel explícito foi adicionado intencionalmente para sobrepor alguma coisa, levando à 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 precisam de atenção.

O papel ARIA listitem é desenhado para situações onde não pode usar HTML semântico — por exemplo, quando precisa de criar uma estrutura semelhante a lista a partir de elementos genéricos como <div> ou <span>. Nesses casos, combinaria role="list" no contentor com role="listitem" em cada filho. Mas quando já está a usar <ul>, <ol> ou <menu> com filhos <li>, os papéis 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

❌ Papel 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> como role="listitem" em cada <li> são desnecessários porque estes elementos já carregam esses papéis implicitamente.

✅ HTML semântico limpo sem papéis 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 papéis ARIA em elementos não semânticos (quando necessário)

Se por algum motivo não pode usar elementos de lista nativos, os papéis 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ântico com <li> é sempre preferível quando possível.