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

Sobre este problema HTML

O validador HTML do W3C impõe regras sobre quais roles ARIA podem ser aplicados a elementos HTML específicos. O elemento <section> transporta semântica implícita — mapeia para o role ARIA region quando tem um nome acessível (por exemplo, através de aria-label ou aria-labelledby). Embora article seja de facto um role ARIA válido definido na especificação WAI-ARIA, a especificação HTML restringe quais roles podem sobrepor a semântica nativa de um elemento <section>. Os roles permitidos para <section> incluem alert, alertdialog, application, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel, e region — mas não article.

Esta restrição existe porque o HTML já fornece o elemento <article>, que transporta o role ARIA article implícito nativamente. Usar role="article" num <section> cria uma incompatibilidade confusa: o nome da tag do elemento sugere um significado semântico enquanto o atributo role declara outro. Isto pode confundir tecnologias assistivas como leitores de ecrã, que podem anunciar o elemento de forma inconsistente dependendo de priorizarem o nome da tag ou o role explícito.

A melhor correção depende da sua intenção:

Se o conteúdo é autossuficiente e independentemente significativo (como uma publicação de blog, comentário, ou notícia), substitua o <section> por um elemento <article>. O elemento <article> já tem o role article implícito, por isso não é necessário nenhum atributo role.
Se o conteúdo é um agrupamento temático dentro de uma página, mantenha o elemento <section> e remova o atributo role. Dê-lhe um cabeçalho ou um aria-label para que funcione como um ponto de referência significativo.
Se você precisa especificamente do role article num elemento não-semântico, use um <div> com role="article" em vez disso, uma vez que <div> não tem role implícito e permite que qualquer role ARIA seja aplicado.

Exemplos

Incorreto: `role="article"` num `<section>`

Isto desencadeia o erro de validação porque article não é um role permitido para <section>.

<section role="article">
  <h2>Notícias de última hora</h2>
  <p>Detalhes sobre o evento.</p>
</section>

Correto: use `<article>` para conteúdo autossuficiente

O elemento <article> tem o role article implícito, tornando o atributo role explícito desnecessário.

<article>
  <h2>Notícias de última hora</h2>
  <p>Detalhes sobre o evento.</p>
</article>

Correto: use `<section>` sem um role conflituoso

Se o conteúdo é um agrupamento temático em vez de uma peça independente, mantenha <section> e remova o atributo role. Adicionar um nome acessível através de aria-labelledby torna-o um ponto de referência region.

<section aria-labelledby="news-heading">
  <h2 id="news-heading">Últimas notícias</h2>
  <p>Detalhes sobre o evento.</p>
</section>

Correto: use um `<div>` quando precisa de um role `article` explícito

Em casos raros onde não pode usar o elemento <article> mas precisa do role article, um <div> aceita qualquer role ARIA válido.

<div role="article">
  <h2>Notícias de última hora</h2>
  <p>Detalhes sobre o evento.</p>
</div>

Correto: aninhe `<article>` dentro de `<section>` para artigos agrupados

Se você precisa tanto de um agrupamento temático quanto de itens autossuficientes individuais, aninhe elementos <article> dentro de um <section>.

<section aria-labelledby="stories-heading">
  <h2 id="stories-heading">Principais notícias</h2>
  <article>
    <h3>Primeira história</h3>
    <p>Conteúdo da história.</p>
  </article>
  <article>
    <h3>Segunda história</h3>
    <p>Conteúdo da história.</p>
  </article>
</section>

Como regra geral, prefira elementos HTML nativos em vez de roles ARIA sempre que possível. O elemento <article> comunica o role article de forma mais fiável do que qualquer sobreposição ARIA, e funciona consistentemente em todos os navegadores e tecnologias assistivas sem atributos adicionais.