Escreve texto de ligação descritivo

O que esta verificação faz

Inspeciona cada <a href> da página e calcula o nome acessível (texto visível, aria-label ou texto alternativo de um <img> filho). A verificação falha quando:

• O nome está vazio (um <a><svg/></a> sem texto nem etiqueta).
• O nome é uma frase genérica: “clica aqui”, “aqui”, “ler mais”, “saber mais”, “mais”, “isto”.
• O mesmo nome genérico aponta para URLs diferentes em sítios distintos da página — quem usa leitor de ecrã, ao listar todas as ligações, ouve “clica aqui, clica aqui, clica aqui” sem forma de distinguir.

Porque é importante

Quem usa leitor de ecrã navega listando ligações. No NVDA: Insert+F7. No VoiceOver: Ctrl+Option+U → Ligações. O utilizador vê o texto da ligação fora de contexto, por ordem alfabética, e escolhe uma. “Ler mais” não diz nada.

• Os utilizadores que veem também passam os olhos. Estudos de eye-tracking (Nielsen Norman, em todas as réplicas) mostram que os utilizadores leem primeiro o texto das ligações e saltam o texto à volta. Ligações descritivas funcionam como sinalética.
• Ranking de pesquisa. O texto âncora das ligações internas é um dos poucos sinais de texto em que o Google ainda confia. Uma ligação “Clica aqui” para a tua página de preços desperdiça o espaço; “Preços do MetricSpot” não.
• Citação por IA. O ChatGPT, o Perplexity e o Google AI Overviews citam o texto âncora ao apresentar uma ligação. “Clica aqui” produz uma citação sem qualquer prévia do conteúdo.

Como corrigir

Faz com que o texto de cada ligação descreva o destino, mesmo lido fora de contexto.

Não faças:

<p>Para saber mais sobre os nossos preços, <a href="/pricing/">clica aqui</a>.</p>

Faz:

<p>Vê os nossos <a href="/pricing/">escalões de preços e o teste grátis</a>.</p>

Ligações só com ícone — usa aria-label:

<a href="https://twitter.com/metricspot" aria-label="MetricSpot no X">
  <svg aria-hidden="true">…</svg>
</a>

O aria-hidden="true" no SVG impede que o conteúdo acessível do ícone vaze; o aria-label fornece o nome. Sem isto, os leitores de ecrã anunciam “ligação” com quaisquer dados de path que consigam extrair.

Cartões “Ler mais” (listagens de posts). A solução é estender a âncora a todo o cartão ou incluir o título do post:

<!-- Mau: cada "Ler mais" é idêntico -->
<article>
  <h3>Porque é que os teus CWV estão a afundar</h3>
  <p>Três padrões que vemos…</p>
  <a href="/blog/cwv/">Ler mais</a>
</article>

<!-- Melhor: o título torna-se a ligação -->
<article>
  <h3><a href="/blog/cwv/">Porque é que os teus CWV estão a afundar</a></h3>
  <p>Três padrões que vemos…</p>
</article>

<!-- Ou: contexto visualmente oculto acrescentado -->
<a href="/blog/cwv/">Ler mais<span class="sr-only"> sobre Core Web Vitals</span></a>

Várias ligações idênticas para destinos diferentes. Se tens vários botões “Editar” numa tabela, acrescenta o contexto da linha de forma invisível:

<a href="/users/42/edit">Editar<span class="sr-only"> Jane Patel</span></a>
<a href="/users/43/edit">Editar<span class="sr-only"> Alex Diaz</span></a>

Linters. O eslint-plugin-jsx-a11y inclui uma regra anchor-has-content. Acrescenta uma regra personalizada que proíba texto âncora literal “clica aqui” / “ler mais” — são sempre sinais de alarme.

Perguntas frequentes

”Ler mais →” é aceitável se estiver visualmente associado a um cabeçalho?

Quem vê associa-o ao título acima; quem usa leitor de ecrã ouve-o isolado. Ou tornas o título a ligação (melhor) ou acrescentas <span class="sr-only"> sobre [título do post]</span> para manter o design visual e adicionar o contexto.

E os ícones de ligação externa?

O ícone é decorativo; ou o ocultas com aria-hidden="true", ou incluis “(ligação externa)” em texto visualmente oculto. Não dependas só do ícone para quem usa leitor de ecrã.

Abrir uma ligação num novo separador conta como descritivo?

Não — target="_blank" é um comportamento, não um nome. Se queres que os leitores de ecrã o anunciem, inclui “(abre em novo separador)” como texto visível ou sr-only. Muitos utilizadores não gostam de comportamentos inesperados de novo separador; se tiveres mesmo de o usar, sinaliza-o.