O atributo “aria-label” não deve ser especificado em nenhum elemento “a” a menos que o elemento tenha um valor de “role” diferente de “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript” ou “superscript”.

Um atributo aria-label num elemento <a> só é válido quando o link tem um role acessível que suporta nomenclatura — o que significa que o <a> deve ter um atributo href ou um role explícito que aceita um rótulo.

Quando um elemento <a> não tem um atributo href, tem o role implícito de generic. O role generic está na lista de roles que não suportam nomenclatura, por isso aplicar aria-label a ele é inválido. Isto acontece porque um elemento genérico não tem significado semântico, e os leitores de ecrã não saberiam como anunciar o rótulo de forma significativa.

A causa mais comum deste erro é usar <a> como um marcador de posição ou um acionador apenas de JavaScript sem um href. Um <a> com um href tem o role implícito de link, que suporta aria-label, por isso o erro não aparece.

Tem algumas maneiras de corrigir isto:

• Adicionar um href para torná-lo um link apropriado (correção mais comum).
• Adicionar um role explícito que suporte nomenclatura, como role="button", se o elemento atua como um botão.
• Usar um <button> em vez disso se o elemento aciona uma ação em vez de navegação.
• Remover aria-label se não for necessário, e usar conteúdo de texto visível em vez disso.

Exemplos HTML

❌ Inválido: aria-label num <a> sem href

<a aria-label="Close menu" onclick="closeMenu()">✕</a>

O <a> não tem href, por isso o seu role implícito é generic, que não suporta nomenclatura.

✅ Opção de correção 1: Adicionar um href

<a href="/close" aria-label="Close menu">✕</a>

✅ Opção de correção 2: Usar um <button> em vez disso

<button aria-label="Close menu" onclick="closeMenu()">✕</button>

✅ Opção de correção 3: Adicionar um role explícito que suporte nomenclatura

<a role="button" tabindex="0" aria-label="Close menu" onclick="closeMenu()">✕</a>

Usar um <button> (opção 2) é geralmente a melhor escolha para elementos interativos que executam ações em vez de navegar para um URL.

Saiba mais:

MDN Reference

MDN Web Docs: ARIA - aria-label

→

MDN Reference

MDN Web Docs: HTML anchor element

→

MDN Reference

MDN Web Docs: ARIA roles

→