"Clique aqui" não diz nada: como escrever texto de link que leva a algum lugar

Um artigo com três "clique aqui". Para quem lê o parágrafo, cada um faz sentido. Para quem usa leitor de tela e pede a lista de links da página, aparecem três linhas iguais: "clique aqui", "clique aqui", "clique aqui". Nenhuma diz para onde vai. A resposta curta: o texto do link deve dizer o destino. "Como gravar o horário em UTC", não "aqui". Isso serve para pessoas, para leitores de tela e para a busca.

Este guia mostra por que o texto do link importa tanto, como reescrever os casos mais comuns (corpo de artigo, cards, botões de download) e como achar os links genéricos que já estão publicados no seu site.

Por que o texto do link precisa fazer sentido sozinho

Pessoas não leem a web linha por linha. Elas escaneiam, e o link se destaca do texto por cor e sublinhado. Quem bate o olho na página vê "clique aqui" e não sabe se vale clicar. Quem vê "tabela de códigos de status HTTP" sabe.

Para quem usa leitor de tela, o efeito é mais forte. NVDA, JAWS e VoiceOver oferecem uma lista com todos os links da página, e muita gente navega por ela para ir direto ao ponto. Nessa lista, o link aparece sem o parágrafo em volta. As diretrizes de acessibilidade do W3C tratam disso no critério 2.4.4 (Finalidade do Link em Contexto), de nível A: a finalidade do link precisa ser compreensível pelo texto do link, ou pelo texto e seu contexto. Existe ainda o 2.4.9, de nível AAA, que pede que o texto sozinho baste.

Para a busca, o texto do link é uma pista sobre a página de destino. A documentação do Google sobre boas práticas de links pede texto descritivo e conciso, relevante para a página de destino. Um link interno "veja o guia de backup de MySQL" diz ao robô do que a outra página trata. Um "aqui" não diz nada.

Como reescrever os links do jeito certo

Pegue um parágrafo real de um post sobre deploy, como exemplo trabalhado:

<p>Antes de subir, faça backup do banco. Já explicamos como
<a href="/blog/backup-de-mysql-que-restaura">aqui</a>. Se der problema,
<a href="/blog/rollback-ensaiado">clique aqui</a> para ver como voltar.
Para mais detalhes, <a href="/docs/deploy.pdf">saiba mais</a>.</p>

Agora reescrito:

<p>Antes de subir, faça um
<a href="/blog/backup-de-mysql-que-restaura">backup de MySQL que você consegue restaurar</a>.
Se der problema, siga o
<a href="/blog/rollback-ensaiado">roteiro de rollback ensaiado</a>.
O passo a passo completo está no
<a href="/docs/deploy.pdf">manual de deploy (PDF, 2 MB)</a>.</p>

O texto ficou mais curto e mais claro. As regras aplicadas:

1. Coloque o link nas palavras que nomeiam o destino. Em geral, o próprio título da página de destino ou uma versão curta dele.
2. Elimine o verbo de comando. "Clique", "acesse", "veja" sobram. Quem usa teclado ou toque não clica, e o link já é, por natureza, um convite.
3. Avise o que não é página. Arquivo para baixar leva formato e tamanho no texto. A pessoa no 4G agradece.
4. Mesmo texto, mesmo destino. Se dois links dizem "documentação da API", os dois vão para o mesmo lugar. Destinos diferentes pedem textos diferentes.
5. Não enfileire links. Três links na mesma frase viram uma sopa de sublinhado. Distribua pelo texto, onde cada assunto aparece.

Cards e listas de artigos

O lugar onde o "leia mais" mais se esconde é a lista de posts. Cada card tem título, resumo e um "leia mais" no fim. Na lista de links do leitor de tela, isso vira vinte "leia mais" seguidos.

A correção mais simples é fazer do título do card o link e tirar o "leia mais". Se o design exige o botão, ele pode existir visualmente, mas o título continua sendo o link principal. O guia um link por card na lista de artigos mostra como fazer o card inteiro clicável sem duplicar links.

Ícones e imagens que são links

Quando o link é só uma imagem, o texto do link é o alt da imagem. Um ícone de lixeira com alt="icone" é anunciado como "icone, link". Escreva o destino ou a ação: alt="Página de exclusão da conta". Se o ícone é um SVG sem texto, use aria-label no próprio link. E lembre: se o elemento executa uma ação em vez de levar a uma página, ele deveria ser um botão, como explica a diferença entre botão e link.

Como encontrar os links genéricos que já estão publicados

No navegador, abra um artigo, abra o console das ferramentas de desenvolvedor e rode:

console.table(
  [...document.querySelectorAll('main a[href]')].map((a) => ({
    texto: a.innerText.trim() || a.getAttribute('aria-label') || '(vazio)',
    destino: a.getAttribute('href'),
  }))
);

A tabela mostra exatamente o que um leitor de tela listaria. Se você não consegue dizer para onde cada linha vai só pela coluna "texto", achou o problema.

Para o site inteiro, vale uma verificação no CMS ou no build, rodando sobre o HTML de cada post antes de publicar:

const GENERICOS = new Set([
  'clique aqui', 'aqui', 'saiba mais', 'leia mais', 'veja mais', 'este link', 'link',
]);

function linksGenericos(html) {
  const achados = [];
  for (const m of html.matchAll(new RegExp('<a [^>]*>([^<]*)</a>', 'gi'))) {
    const texto = m[1].trim().toLowerCase().replace(/[.:!]+$/, '');
    if (GENERICOS.has(texto)) achados.push(m[0]);
  }
  return achados;
}

A expressão cobre links simples, sem tags internas, que são a maioria no corpo de um post. Rode a função em todos os posts, liste os que têm achados e comece pelos mais acessados. No blog do exemplo, foram 73 links genéricos em 40 posts, resolvidos em uma tarde.

Erros comuns

• "Clique aqui" no corpo do texto. Fora do parágrafo, o link não diz nada, e a busca perde a pista sobre o destino.
• "Leia mais" repetido nos cards. A lista de links do leitor de tela vira uma fila de itens idênticos, e a pessoa desiste de navegar por ela.
• URL crua como texto. O leitor de tela soletra "h t t p s dois pontos barra barra". Só use a URL como texto quando ela própria é a informação, como num endereço que a pessoa vai digitar.
• Mesmo texto para destinos diferentes. Dois "documentação" que levam a lugares distintos confundem quem navega pela lista e quem volta pelo histórico.
• Texto de link enorme. Uma frase inteira sublinhada perde o foco. O link fica nas palavras que nomeiam o destino.
• Arquivo sem aviso. PDF de 20 MB disfarçado de link comum consome o plano de dados de quem só queria ler.

Checklist

• A tabela do console mostra textos que dizem o destino, sem "aqui" nem "saiba mais".
• Os cards da lista de artigos usam o título como link.
• Links de imagem e ícone têm alt ou aria-label com o destino.
• Links para arquivos informam formato e tamanho.
• Textos de link iguais levam ao mesmo destino.
• O build ou o CMS avisa quando um post novo tem link genérico.

Para fechar: abra o seu post mais lido, rode a tabela no console e leia só a coluna de texto. Dá para saber aonde cada link vai?