Verificação HTML: Elemento "a" está em falta de um ou mais dos seguintes atributos: "href", "role".

Sobre este problema HTML

De acordo com a especificação HTML, o elemento <a> pode existir sem um atributo href, mas nesse caso representa um marcador de posição onde uma ligação poderia ter sido colocada. No entanto, o validador sinaliza isto como um problema porque um elemento <a> sem href e sem role é ambíguo — os navegadores não o tratarão como uma ligação (não será focalizável nem acessível por teclado), e as tecnologias assistivas não saberão como apresentá-lo aos utilizadores.

Isto é importante por várias razões:

Acessibilidade: Sem href, o elemento <a> perde o seu role="link" implícito e já não é anunciado como uma ligação pelos leitores de ecrã. Também não aparecerá na ordem de tabulação, tornando-se invisível aos utilizadores de teclado.
Semântica: Se o elemento for estilizado e programado para se comportar como um botão ou ligação mas não tiver os atributos adequados, cria uma desconexão entre o que os utilizadores veem e o que o navegador compreende.
Conformidade com os padrões: A especificação espera que você seja explícito sobre o propósito do elemento quando href está ausente.

A causa mais comum deste problema é usar elementos <a> como alvos de clique exclusivos de JavaScript sem fornecer um href, ou usá-los como contentores estilizados sem qualquer propósito interativo.

Como corrigir

Existem várias abordagens dependendo da sua intenção:

Adicione um atributo href se o elemento deve ser uma ligação. Esta é a correção mais comum e recomendada.
Adicione um atributo role se estiver deliberadamente a usar <a> sem href para um propósito específico, como role="button".
Use um elemento diferente completamente. Se não for uma ligação, considere usar um <button>, <span>, ou outro elemento semanticamente apropriado.

Exemplos

❌ Em falta tanto `href` como `role`

<a>Clique aqui</a>

Isto desencadeia o erro do validador porque o <a> não tem nem href nem role.

❌ Manipulador exclusivo de JavaScript sem `href`

<a onclick="doSomething()">Submeter</a>

Mesmo com um manipulador de eventos, o elemento não tem href e role, pelo que falha a validação e é inacessível aos utilizadores de teclado.

✅ Corrigir adicionando um `href`

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

Adicionar href torna-o numa hiperligação adequada — focalizável, acessível por teclado e reconhecido pelos leitores de ecrã.

✅ Corrigir adicionando `role` para um propósito que não é ligação

<a role="button" tabindex="0" onclick="doSomething()">Submeter</a>

Se deve usar <a> sem href como um botão, adicione role="button" e tabindex="0" para garantir que é focalizável e adequadamente anunciado. No entanto, considere usar um verdadeiro <button> em vez disso.

✅ Melhor: use o elemento correto

<button type="button" onclick="doSomething()">Submeter</button>

Se o elemento desencadeia uma ação em vez de navegar para algum lugar, um <button> é a escolha semântica correta. É focalizável por padrão, responde a eventos de teclado e não precisa de atributos extra.

✅ Âncora de marcador de posição (não-ligação intencional)

<a role="link" aria-disabled="true">Em breve</a>

Se estiver intencionalmente a mostrar um marcador de posição onde uma ligação eventualmente aparecerá, pode adicionar um role e indicar o seu estado desabilitado para as tecnologias assistivas. Alternativamente, use um <span> com estilização apropriada para evitar o problema completamente.