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

Sobre este problema HTML

O elemento article é um elemento de conteúdo seccional que representa uma composição autónoma — um post de blog, uma notícia, uma entrada de fórum, ou conteúdo independente similar. Porque carrega o papel ARIA implícito de article, funciona como uma referência que as tecnologias assistivas reconhecem e expõem aos utilizadores para navegação. Sobrescrever este papel de referência com listitem cria um conflito: o elemento perde a sua semântica article para utilizadores de tecnologia assistiva, e o próprio papel listitem torna-se inválido porque as regras de mapeamento de papéis ARIA não o permitem em article.

De acordo com a especificação ARIA em HTML, cada elemento HTML tem um conjunto de papéis ARIA permitidos. O elemento article apenas permite um conjunto restrito de papéis (tais como application, document, feed, main, none, presentation, e region). O papel listitem não está entre eles. Esta restrição existe para prevenir que os autores criem semânticas confusas ou contraditórias que degradariam a experiência de acessibilidade.

Além da validação, isto importa para utilizadores reais. Os leitores de ecrã dependem da informação de papel para transmitir estrutura. Um article anunciado como um listitem é enganador — o utilizador perde a capacidade de navegar por referencias de artigo, e o listitem pode não funcionar corretamente sem um contexto pai list adequado. Os navegadores e tecnologias assistivas esperam que os papéis listitem apareçam como filhos diretos de um elemento com role="list" (ou dentro de elementos nativos ul/ol).

Como corrigir

A solução depende da sua intenção:

Se você quer uma lista de artigos, use marcação de lista HTML nativa (ul ou ol com li) e coloque cada article dentro de um item de lista. Isto dá-lhe tanto semânticas de lista como referencias de artigo sem quaisquer sobrescritas ARIA.
Se não pode usar elementos de lista nativos, use elementos div neutros com role="list" e role="listitem", e aninhe o article dentro de cada contentor listitem.
Se o conteúdo não é verdadeiramente uma lista, simplesmente remova o atributo role="listitem" e deixe o elemento article usar as suas semânticas nativas.

Exemplos

Inválido: `role="listitem"` num elemento `article`

Isto despoleta o erro do validador porque listitem não é um papel permitido para article.

<article role="listitem">
  <h2>Item de notícias</h2>
  <p>Detalhes sobre esta história.</p>
</article>

Válido: lista nativa com elementos `article` dentro

Usar ul e li fornece semânticas de lista adequadas enquanto preserva o papel de referência article.

<ul>
  <li>
    <article>
      <h2>Item de notícias</h2>
      <p>Detalhes sobre esta história.</p>
    </article>
  </li>
  <li>
    <article>
      <h2>Outro item</h2>
      <p>Mais detalhes aqui.</p>
    </article>
  </li>
</ul>

Válido: papéis ARIA de lista em contentores neutros com elementos `article` aninhados

Quando elementos de lista nativos não são adequados para o seu layout, use elementos div para a estrutura de lista e aninhe cada article dentro.

<div role="list">
  <div role="listitem">
    <article>
      <h2>Item de notícias</h2>
      <p>Detalhes sobre esta história.</p>
    </article>
  </div>
  <div role="listitem">
    <article>
      <h2>Outro item</h2>
      <p>Mais detalhes aqui.</p>
    </article>
  </div>
</div>

Válido: `article` independente sem um papel de lista

Se o conteúdo não pertence a uma lista, simplesmente remova o papel inválido.

<article>
  <h2>Item de notícias</h2>
  <p>Detalhes sobre esta história.</p>
</article>

Em todos os casos, o princípio chave é o mesmo: deixe o elemento article manter as suas semânticas nativas, e use a estrutura de lista apropriada à sua volta em vez de forçar um papel conflituoso sobre ele.