Verificação HTML: O role "heading" é desnecessário para os elementos "h1" a "h6".

Sobre este problema HTML

Os elementos de cabeçalho HTML (<h1> até <h6>) têm um significado semântico integrado que os navegadores e tecnologias assistivas já compreendem. De acordo com a especificação WAI-ARIA, cada um destes elementos carrega um role heading implícito com um aria-level correspondente — <h1> tem aria-level="1", <h2> tem aria-level="2", e assim por diante. Quando você adiciona explicitamente role="heading" a um destes elementos, está a dizer ao navegador algo que ele já sabe, o que sobrecarrega o seu markup sem fornecer qualquer benefício.

Este padrão faz parte de um princípio mais amplo na criação de ARIA conhecido como a primeira regra de ARIA: não use ARIA quando um elemento HTML nativo já fornece a semântica que você precisa. Roles ARIA redundantes podem causar confusão para os programadores que mantêm o código, pois sugere que o role pode ser necessário ou que o elemento pode não ser reconhecido como um cabeçalho. Em alguns casos extremos, adicionar um aria-level explícito que não corresponde ao nível do cabeçalho (por exemplo, aria-level="3" num <h1>) pode criar informação conflituante para leitores de ecrã, levando a uma experiência inconsistente para utilizadores de tecnologias assistivas.

O atributo role="heading" foi concebido para situações onde você precisa dar semântica de cabeçalho a um elemento que não é um cabeçalho, como um <div> ou <span>. Nesses casos, deve também incluir o atributo aria-level para especificar o nível do cabeçalho. No entanto, sempre que possível, usar elementos de cabeçalho nativos é sempre preferível a esta abordagem baseada em ARIA.

Como corrigir

Remover role="heading" de qualquer elemento <h1> até <h6>.
Remover aria-level se foi adicionado juntamente com o role redundante e corresponde ao nível nativo do cabeçalho.
Se você realmente precisar que um elemento não-padrão atue como um cabeçalho, use role="heading" com aria-level nesse elemento — mas prefira elementos de cabeçalho nativos sempre que possível.

Exemplos

❌ Role redundante num cabeçalho nativo

<h1 role="heading" aria-level="1">Bem-vindo ao Meu Site</h1>
<h2 role="heading">Sobre Nós</h2>
<h3 role="heading" aria-level="3">A Nossa Missão</h3>

Os três cabeçalhos irão desencadear o aviso do validador. Os atributos role="heading" e aria-level são completamente desnecessários aqui porque os elementos já transmitem esta informação nativamente.

✅ Cabeçalhos nativos sem roles redundantes

<h1>Bem-vindo ao Meu Site</h1>
<h2>Sobre Nós</h2>
<h3>A Nossa Missão</h3>

Simplesmente remover os atributos redundantes resolve o problema preservando total acessibilidade.

✅ Uso correto do role heading num elemento que não é cabeçalho

Em casos raros onde não pode usar um elemento de cabeçalho nativo, o role heading é apropriado num elemento genérico:

<div role="heading" aria-level="2">Título da Secção</div>

Isto diz às tecnologias assistivas para tratar o <div> como um cabeçalho de nível 2. Note que aria-level é obrigatório aqui uma vez que um <div> não tem nível de cabeçalho implícito. Dito isto, usar um <h2> nativo é sempre a melhor escolha:

<h2>Título da Secção</h2>

❌ aria-level conflituante num cabeçalho nativo

Tenha especial cuidado com este anti-padrão, onde o nível explícito contradiz o elemento:

<h1 role="heading" aria-level="3">Título da Página</h1>

Isto envia sinais contraditórios — o elemento é um <h1> mas afirma ser de nível 3. Os leitores de ecrã podem comportar-se de forma imprevisível. Se você precisa de um cabeçalho de nível 3, use <h3>: