Quando escrevemos links em uma página web, raramente pensamos em como uma pessoa com deficiência visual que navega com um leitor de tela os interpreta. Frases como “clique aqui” ou “mais informações” podem parecer inofensivas, mas para muitas pessoas representam uma barreira.
Neste artigo você aprenderá como escrever links acessíveis, descritivos e compreensíveis, alinhados com as diretrizes de acessibilidade web (WCAG) e com as boas práticas de UX Writing.
Como um leitor de tela navega pelos links?
Os usuários de leitores de tela, como JAWS, NVDA ou VoiceOver, podem acessar uma lista de todos os links em uma página, sem contexto. Nessa lista, apenas o texto âncora de cada link é lido.
E se todos disserem “clique aqui”?
Exatamente: não há como saber aonde eles levam. Por exemplo:
- “Clique aqui”
- “Mais informações”
- “Ver mais”
Assim é impossível compreender a finalidade dos links. Isto rompe com o critério 2.4.4 das WCAG, que afirma que a finalidade de cada link deve ser determinável a partir de seu texto, isoladamente ou em conjunto com seu contexto imediato.
Por que “clique aqui” é uma má prática?
- Não é descritivo: não indica aonde o link leva.
- Depende do contexto visual: Pessoas sem visão não conseguem “ver” o que cerca o link.
- Problema para navegação por teclado ou tela sensível ao toque: o termo “clique” é específico do mouse.
- Não ajuda no SEO ou na verificação rápida do conteúdo.
- Reduz a usabilidade e acessibilidade geral do site.
Resumindo: é uma prática obsoleta e inclusive exclusiva.
Então… Como escrever links acessíveis?
A regra geral é simples:
O texto do link deve descrever claramente o destino ou a ação esperada.
Algumas dicas importantes:
- Use verbos ativos e precisos.
- Não repita o URL como texto do link.
- Evite frases genéricas como “aqui”, “isto”, “leia mais”.
- Se o link estiver dentro de uma imagem ou botão, adicione um atributo descritivo alt ou aria-label.
Antes e depois: exemplos de links acessíveis
Dica profissional: e se o link estiver em uma imagem ou botão?
- Ao usar uma imagem como link, você precisa ter certeza de que o atributo alt descreve a ação. Por exemplo:
- Se você estiver usando um botão (por exemplo, em React ou com JavaScript), você pode usar aria-label:
Assim, um leitor de tela lerá o que deveria, não simplesmente “imagem”, “botão”, ou pior ainda: nada.
Recursos recomendados
- Documentação WCAG 2.4.4 – Finalidade do link (no contexto)
- Extensão WAVE para auditar acessibilidade na web
- Guia de acessibilidade WebAIM
- Axe DevTools para Chrome e Firefox
Boas práticas finais para links da Web acessíveis
- Verifique seus links com leitores de tela ou ferramentas como WAVE.
- Certifique-se de que todos os links tenham um objetivo claro fora do contexto.
- Se você usar links seriais (por exemplo, em listas), varie o texto âncora.
- Integre os links naturalmente na escrita (não no final, como “leia mais”).
- Adicione links semânticos em HTML () e não com
ou simulados.
