O role “link” é desnecessário para o elemento “a” com atributo “href”.

O elemento <a> com um atributo href é um dos elementos interativos mais fundamentais do HTML. Os navegadores e tecnologias assistivas reconhecem-no inerentemente como um link — é focalizável através da tecla Tab, ativável com Enter, e anunciado como “link” pelos leitores de ecrã. Este comportamento integrado faz parte do role ARIA implícito do elemento, que é link.

Quando adiciona explicitamente role="link" a um elemento <a href="...">, está a dizer às tecnologias assistivas algo que elas já sabem. O validador W3C sinaliza isto como desnecessário porque viola o princípio de não definir redundantemente roles ARIA que correspondem à semântica nativa de um elemento. Este princípio está codificado na primeira regra do uso de ARIA: “Se você pode usar um elemento ou atributo HTML nativo com a semântica e comportamento que requer já integrados, em vez de reconfigurar um elemento e adicionar um role, estado ou propriedade ARIA para o tornar acessível, então faça-o.”

Embora um role="link" redundante normalmente não quebre nada, cria ruído na sua marcação. Também pode sinalizar a outros programadores que o role é necessário, levando a confusão ou padrões de cargo cult. HTML limpo e semântico que se baseia em roles nativos é mais fácil de manter e menos propenso a erros.

O atributo role="link" é legitimamente útil quando um elemento não interativo como um <span> ou <div> precisa de se comportar como um link. Nesse caso, deve também implementar manualmente a interação por teclado (foco através de tabindex, ativação através do manuseamento da tecla Enter) e fornecer um nome acessível. Mas quando já tem um elemento <a> adequado com href, tudo isso vem gratuitamente — sem necessidade de ARIA.

Exemplos

❌ Incorreto: role="link" redundante numa âncora

<a href="/about" role="link">Sobre Nós</a>

O role="link" é redundante aqui porque o elemento <a> com href já tem um role implícito de link.

✅ Correto: âncora sem role redundante

<a href="/about">Sobre Nós</a>

Simplesmente remova o atributo role="link". O navegador e as tecnologias assistivas já tratam isto como um link.

✅ Correto: usar role="link" num elemento não semântico (quando necessário)

<span role="link" tabindex="0" onclick="location.href='/about'" onkeydown="if(event.key==='Enter') location.href='/about'">
  Sobre Nós
</span>

Este é o caso de uso legítimo para role="link" — quando não pode usar um elemento <a> nativo e precisa de fazer um elemento não interativo comportar-se como um link. Note o trabalho adicional necessário: tabindex="0" para focalizabilidade por teclado, um manipulador de clique, e um manipulador de keydown para ativação da tecla Enter. Usar um elemento <a> adequado evita todo este esforço extra.

❌ Incorreto: múltiplas âncoras com roles redundantes

<nav>
  <a href="/" role="link">Início</a>
  <a href="/products" role="link">Produtos</a>
  <a href="/contact" role="link">Contacto</a>
</nav>

✅ Correto: navegação limpa sem roles redundantes

<nav>
  <a href="/">Início</a>
  <a href="/products">Produtos</a>
  <a href="/contact">Contacto</a>
</nav>

Saiba mais:

MDN Reference

MDN: ARIA link role

→