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

Sobre este problema HTML

A especificação ARIA define um conjunto de papéis que transmitem o propósito de um elemento às tecnologias assistivas como leitores de ecrã. Muitos elementos HTML têm papéis ARIA implícitos — semântica integrada que mapeia diretamente para papéis ARIA sem qualquer marcação extra. O elemento <main> é um destes: comunica automaticamente o papel de marco main às tecnologias assistivas.

Quando escreve <main role="main">, está a declarar explicitamente algo que o navegador e as tecnologias assistivas já sabem. O validador do W3C avisa sobre esta redundância porque pode sinalizar uma má compreensão de como funciona a semântica HTML nativa. Embora não vá quebrar nada, atributos desnecessários adicionam ruído à sua marcação e podem tornar o código mais difícil de manter.

Este princípio aplica-se amplamente no HTML. Por exemplo, <nav> implicitamente tem role="navigation", <header> implicitamente tem role="banner" (quando não está aninhado dentro de um elemento de seccionamento), e <button> implicitamente tem role="button". Reafirmar explicitamente estes papéis é desencorajado tanto pelo W3C como pela especificação ARIA in HTML, que declara: “Definir um papel ARIA e/ou atributo `aria-` que coincida com a semântica ARIA implícita é desnecessário e NÃO É RECOMENDADO.”*

Porque isto importa

Clareza do código: Atributos redundantes tornam o seu HTML mais difícil de ler e podem confundir outros programadores levando-os a pensar que o atributo é necessário.
Conformidade com standards: O validador do W3C levanta um aviso, que pode obscurecer questões mais importantes nos seus relatórios de validação.
Boas práticas: Seguir o princípio de usar semântica HTML nativa sem ARIA redundante mantém o seu código limpo e alinha-se com a primeira regra do ARIA: “Se você pode usar um elemento HTML nativo com a semântica e comportamento que precisa já integrados, faça-o, em vez de reorientar um elemento e adicionar um papel ARIA.”

Como corrigir

Remova o atributo role="main" de qualquer elemento <main>. O significado semântico já é fornecido pelo próprio elemento.

Se está a trabalhar com um <div> ou outro elemento genérico que precisa do papel de marco main (por exemplo, numa base de código legada que não pode usar <main>), então role="main" é apropriado e necessário nesse elemento.

Exemplos

❌ Papel redundante em `<main>`

<main role="main">
  <h1>Welcome to my site</h1>
  <p>This is the primary content of the page.</p>
</main>

O atributo role="main" é desnecessário aqui porque <main> já o implica.

✅ Usar `<main>` sem um papel redundante

<main>
  <h1>Welcome to my site</h1>
  <p>This is the primary content of the page.</p>
</main>

✅ Usar `role="main"` num elemento não-semântico (quando necessário)

<div role="main">
  <h1>Welcome to my site</h1>
  <p>This is the primary content of the page.</p>
</div>

Esta abordagem é válida quando não pode usar o elemento <main> — por exemplo, devido a restrições de framework ou requisitos de suporte para navegadores legados. Na maioria dos projetos modernos, prefira o elemento <main> em vez disso.