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

Sobre este problema HTML

Cada elemento semântico HTML carrega um papel ARIA implícito que as tecnologias assistivas já reconhecem. O elemento <article> tem um papel integrado de article, que sinaliza que o conteúdo representa uma composição independente — como uma publicação de blog, notícia, comentário de fórum, ou qualquer secção que possa ser distribuída ou reutilizada independentemente. Quando você adiciona explicitamente role="article" a um elemento <article>, está a dizer ao navegador e aos leitores de ecrã algo que eles já sabem.

Embora esta redundância não quebre nada funcionalmente, cria ruído desnecessário na sua marcação e vai contra as orientações do W3C sobre o uso de ARIA. A primeira regra do uso de ARIA estabelece: “Se você pode usar um elemento HTML nativo ou atributo com a semântica e comportamento que você precisa já integrados, em vez de reaproveitar um elemento e adicionar um papel, estado ou propriedade ARIA para torná-lo acessível, então faça-o.” Papéis redundantes tornam o código mais difícil de manter e podem sinalizar a outros programadores que algo não-padrão está a acontecer quando não está.

O atributo role="article" é útil quando aplicado a elementos não-semânticos como <div> ou <span> que precisam de transmitir semântica de artigo — por exemplo, em bases de código legadas onde alterar o elemento não é viável. Mas no próprio elemento <article>, deve simplesmente ser removido.

Exemplos

❌ Papel redundante no `<article>`

Isto desencadeia o aviso do validador porque role="article" duplica o papel implícito do elemento:

<article role="article">
  <h2>Breaking News</h2>
  <p>A rare bird was spotted in the city park this morning.</p>
</article>

✅ Corrigido: não é necessário papel explícito

Simplesmente remova o atributo role. O elemento <article> já comunica o papel article às tecnologias assistivas:

<article>
  <h2>Breaking News</h2>
  <p>A rare bird was spotted in the city park this morning.</p>
</article>

✅ Uso apropriado de `role="article"` num elemento não-semântico

Se você não pode usar o elemento <article> por alguma razão, aplicar o papel a um elemento genérico como <div> é válido e útil:

<div role="article">
  <h2>Breaking News</h2>
  <p>A rare bird was spotted in the city park this morning.</p>
</div>

✅ Múltiplos artigos dentro de um feed

Um padrão comum é aninhar vários elementos <article> dentro de um feed. Não são necessários papéis explícitos nos próprios artigos:

<section role="feed" aria-label="Latest posts">
  <article>
    <h2>First Post</h2>
    <p>Content of the first post.</p>
  </article>
  <article>
    <h2>Second Post</h2>
    <p>Content of the second post.</p>
  </article>
</section>

Este mesmo princípio aplica-se a outros elementos semânticos com papéis implícitos — por exemplo, <nav> já tem role="navigation", <main> tem role="main", e <header> tem role="banner". Evite adicionar papéis redundantes a qualquer um destes elementos para manter o seu HTML limpo e em conformidade com as normas.