A role "heading" é desnecessária para elementos "h1" a "h6".

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

Este padrão faz parte de um princípio mais amplo na criação ARIA conhecido como a primeira regra do ARIA: não use ARIA quando um elemento HTML nativo já fornece a semântica de que necessita. Roles ARIA redundantes podem causar confusão para desenvolvedores que mantêm o código, pois sugere que a role pode ser necessária 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 coincida com o nível do cabeçalho (por exemplo, aria-level="3" num <h1>) pode criar informação conflituosa 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 precisa dar semântica de cabeçalho a um elemento não-cabeçalho, como um <div> ou <span>. Nesses casos, também deve 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

1. Remova role="heading" de qualquer elemento <h1> a <h6>.
2. Remova aria-level se foi adicionado juntamente com a role redundante e coincide com o nível nativo do cabeçalho.
3. Se 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>

Todos os três cabeçalhos vã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 mantendo a acessibilidade completa.

✅ Uso correto da role heading num elemento não-cabeçalho

Em casos raros onde não pode usar um elemento de cabeçalho nativo, a role heading é apropriada 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 conflituoso 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 nível 3. Os leitores de ecrã podem comportar-se de forma imprevisível. Se precisa de um cabeçalho de nível 3, use <h3>:

<h3>Título da Página</h3>

Saiba mais:

MDN Reference

MDN: ARIA heading role

→