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

Sobre este problema HTML

A especificação ARIA define um conjunto de roles que transmitem o propósito de um elemento às tecnologias assistivas como leitores de ecrã. Muitos elementos HTML possuem roles ARIA implícitos — semântica incorporada que mapeia diretamente para roles ARIA sem qualquer marcação extra. O elemento <main> é um destes: automaticamente comunica o role de landmark main às tecnologias assistivas.

Quando escreve <main role="main">, está a declarar explicitamente algo que o navegador e as tecnologias assistivas já conhecem. O validador W3C avisa sobre esta redundância porque pode sinalizar uma incompreensão de como funcionam as semânticas nativas do HTML. 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 ao HTML. Por exemplo, <nav> implicitamente possui role="navigation", <header> implicitamente possui role="banner" (quando não aninhado dentro de um elemento de seccionamento), e <button> implicitamente possui role="button". Reafirmar explicitamente estes roles é desencorajado tanto pelo W3C como pela especificação ARIA in HTML, que afirma: “Definir um role ARIA e/ou atributo `aria-` que coincida com a semântica ARIA implícita é desnecessário e NÃO É RECOMENDADO.”*

Porque é que 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 os padrões: O validador W3C levanta um aviso, que pode obscurecer questões mais importantes nos seus relatórios de validação.
Melhores práticas: Seguir o princípio de usar semânticas nativas do HTML sem ARIA redundante mantém o seu código limpo e alinha-se com a primeira regra do ARIA: “Se conseguir usar um elemento HTML nativo com a semântica e comportamento que já necessita incorporados, faça-o, em vez de reconfigurar um elemento e adicionar um role ARIA.”

Como corrigir

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

Se estiver a trabalhar com um <div> ou outro elemento genérico que necessite do role de landmark 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

❌ Role 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 role 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 conseguir 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>.