Nomes e papéis

Links precisam de nome

Regra: link-name
Gravidade: Grave
Nível WCAG A

Por que isso importa

Quem usa leitor de tela navega abrindo a lista de links. Um link sem nome aparece ali como a própria URL, e uma lista de “Saiba mais” não é muito melhor.

Como corrigir

Faça o texto do link descrever o destino sozinho.
Em links só de ícone, acrescente aria-label (“Carrinho, 3 itens”).
Se “Saiba mais” precisa continuar visível, estenda o nome com um aria-label que o contenha.

Na marcação

Falha

<a href="/cart"><svg aria-hidden="true">...</svg></a>

Passa

<a href="/cart" aria-label="Basket, 3 items">
  <svg aria-hidden="true">...</svg>
</a>

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

2.4.4 Finalidade do link (no contexto) (abre em nova aba) — Nível WCAG A
4.1.2 Nome, função e valor (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre link-name (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.