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

Sobre este problema HTML

Cada elemento HTML carrega um role ARIA implícito que comunica o seu propósito a tecnologias assistivas como leitores de ecrã. O elemento <button> nativamente tem o role button incorporado, pelo que adicionar explicitamente role="button" é redundante. O validador W3C assinala isto como desnecessário porque não adiciona informação — as tecnologias assistivas já compreendem que um <button> é um botão.

O atributo role existe principalmente para atribuir semânticas interativas a elementos que não as têm nativamente. Por exemplo, pode adicionar role="button" a um <div> ou <span> que foi estilizado e programado para se comportar como um botão (embora usar um <button> nativo seja sempre preferível). Quando o aplica a um elemento que já carrega esse role por defeito, cria ruído no seu código e pode sinalizar a outros programadores que algo incomum está a acontecer — quando na verdade não está.

Este princípio aplica-se amplamente ao HTML. Outros exemplos de roles redundantes incluem role="link" num elemento <a> com um href, role="navigation" num elemento <nav>, e role="heading" num elemento <h1> a <h6>. A especificação WAI-ARIA refere-se a estes como “semânticas ARIA implícitas por defeito”, e a regra geral é: não defina um role ARIA que corresponda às semânticas nativas do elemento.

Remover roles redundantes mantém o seu código limpo, mais fácil de manter, e evita confusão potencial durante revisões de código ou auditorias. Também se alinha com a primeira regra da ARIA: “Se pode usar um elemento HTML nativo com as semânticas e comportamento que precisa já incorporados, em vez de reaproveitar um elemento e adicionar um role, estado ou propriedade ARIA para o tornar acessível, então faça-o.”

Como corrigir

Remova o atributo role="button" de qualquer elemento <button>. Não é necessária substituição — as semânticas nativas já estão corretas.

Se tem um elemento que não é botão (como um <div>) que usa role="button", considere substituí-lo por um elemento <button> real. Isto dá-lhe suporte de teclado incorporado, gestão de foco e comportamento de submissão de formulário gratuitamente.

Exemplos

❌ Role redundante num botão

<button role="button">Comprar agora</button>

<button type="submit" role="button">Submeter</button>

Ambos estes exemplos desencadeiam o aviso do validador porque role="button" duplica o que o elemento <button> já comunica.

✅ Botão sem role redundante

<button>Comprar agora</button>

<button type="submit">Submeter</button>

Simplesmente remover o atributo role resolve o problema. As semânticas nativas do elemento tratam de tudo.

❌ Usar role=”button” num elemento não-semântico

<div role="button" tabindex="0" onclick="handleClick()">Comprar agora</div>

Embora isto seja tecnicamente válido e não desencadeie o mesmo aviso, requer gestão manual de eventos de teclado, estilos de foco e estados de acessibilidade.

✅ Usar um botão nativo

<button onclick="handleClick()">Comprar agora</button>

Um <button> nativo fornece interação por teclado (ativação com teclas Enter e Espaço), focabilidade e anúncio de role correto — tudo sem atributos extra ou JavaScript.

Outros roles redundantes comuns a evitar

<!-- ❌ Redundante -->

<a href="/about" role="link">Sobre</a>
<nav role="navigation">...</nav>
<h1 role="heading">Título</h1>
<input type="checkbox" role="checkbox">

<!-- ✅ Limpo -->

<a href="/about">Sobre</a>
<nav>...</nav>
<h1>Título</h1>
<input type="checkbox">