Texto de Ligações Que Faz Sentido Fora de Contexto

Como os utilizadores de leitores de ecrã navegam na realidade

Antes de falarmos sobre como escrever texto de ligações, ajuda compreender como as pessoas realmente utilizam as ligações quando não conseguem ver a página.

Os leitores de ecrã oferecem um atalho que a maioria dos utilizadores com visão não sabe que existe: premir uma única tecla (normalmente a letra L na maioria dos leitores de ecrã) percorre todas as ligações da página, lendo-as uma a uma, fora de contexto. Os utilizadores utilizam isto para percorrer uma página rapidamente, da mesma forma que o olhar de um utilizador com visão pode passar pelos títulos e pelos botões de chamada à ação.

Se a sua página tiver doze ligações que dizem “Ler mais”, essa lista não tem significado. O utilizador ouve: “Ler mais. Ler mais. Ler mais. Ler mais…”. Não consegue saber para onde levam nenhuma delas.

Este é o problema fundamental que a acessibilidade do texto de ligações tenta resolver: cada ligação deve descrever-se a si própria, porque o contexto desaparece quando se navega por ligação.

O que a WCAG diz

2.4.4 Objetivo da Ligação (Em Contexto) ao Nível A exige que o objetivo de cada ligação possa ser determinado a partir do texto da ligação apenas, ou do texto da ligação em conjunto com o seu contexto circundante (o parágrafo, o item de lista, a célula de tabela ou o título em que se insere).

2.4.9 Objetivo da Ligação (Apenas Ligação) ao Nível AAA vai mais longe, exigindo que o objetivo da ligação seja determinado a partir do texto da ligação apenas, sem depender do contexto. Procurar atingir isto é uma boa ideia, mesmo que esteja apenas a visar a conformidade AA.

2.5.3 Etiqueta no Nome (Nível A) exige que, quando uma ligação ou botão tem uma etiqueta de texto visível, o nome acessível comece por esse texto. Um botão de ícone com a etiqueta “Saber mais sobre acessibilidade” e um aria-label de “Clique aqui” falha este critério.

Falhas comuns e o que fazer em vez disso

”Clique aqui” e “Ler mais”

Estas são as falhas de acessibilidade de ligações mais generalizadas na web.

<!-- Falha: sem significado fora de contexto -->
<a href="/blog/wcag-compliance">Ler mais</a>

<!-- Passa: descreve-se a si própria -->
<a href="/blog/wcag-compliance">Leia o nosso guia de conformidade WCAG 2.2</a>

A solução é quase sempre simples: substitua a frase vaga por texto que descreva o destino ou a ação.

Ligações genéricas com “aqui”

“Clique aqui para descarregar o relatório” falha pela mesma razão — a própria palavra da ligação é apenas “aqui”.

<!-- Falha -->
<p>Para as conclusões completas, clique <a href="/report.pdf">aqui</a>.</p>

<!-- Passa: o texto da ligação descreve o que está a ser ligado -->
<p>Descarregue o <a href="/report.pdf">relatório da auditoria de acessibilidade de 2025 (PDF)</a>.</p>

Repare no indicador PDF entre parênteses — esta é uma boa prática para informar os utilizadores de que seguir a ligação abrirá um PDF em vez de uma página web.

Ligações para o mesmo destino com texto diferente, ou destinos diferentes com o mesmo texto

Ambos criam confusão. Se cinco ligações de navegação disserem todas “Saber mais”, mas apontarem para páginas de serviços diferentes, os utilizadores não conseguem prever onde irão aterrar. Inversamente, duas ligações diferentes que dizem “guia de conformidade WCAG” mas vão para páginas diferentes são igualmente confusas.

Ligações e botões apenas com ícone

Uma ligação ou botão que contenha apenas um ícone — sem texto visível — deve ter um nome acessível fornecido através de aria-label ou aria-labelledby. Sem isso, os leitores de ecrã anunciam o nome do ficheiro da imagem do ícone ou nada de todo.

<!-- Falha: anunciado como "ligação, gráfico" ou o nome do ficheiro SVG -->
<a href="/social/twitter">
  <svg><!-- ícone do twitter --></svg>
</a>

<!-- Passa: aria-label fornece o nome acessível -->
<a href="/social/twitter" aria-label="QualiBooth no Twitter">
  <svg aria-hidden="true"><!-- ícone do twitter --></svg>
</a>

O aria-hidden="true" no SVG impede que os leitores de ecrã anunciem o título ou o conteúdo do SVG — uma vez que a própria ligação já tem uma etiqueta, o conteúdo do ícone é redundante.

Utilizar aria-label para complementar texto visível

Quando uma página tem várias ligações “Descarregar” e não pode alterar o texto visível (uma restrição de design), o aria-label pode alargar o nome acessível:

<!-- O texto visível é "Descarregar" mas o nome acessível é a cadeia completa -->
<a href="/report-2025.pdf" aria-label="Descarregar relatório de acessibilidade de 2025 PDF">
  Descarregar
</a>

Uma advertência aqui: a WCAG 2.5.3 exige que o nome acessível comece pelo texto visível. “Descarregar relatório de acessibilidade de 2025 PDF” começa por “Descarregar” — bom. “Relatório de acessibilidade de 2025 — Descarregar PDF” não — mau.

Ligações que abrem num separador novo

Abrir um separador novo sem aviso desorienta os utilizadores, particularmente os que têm deficiências cognitivas ou os utilizadores de leitores de ecrã que podem não perceber o que aconteceu. Indique o comportamento de abertura em separador novo no texto da ligação ou com uma nota visualmente oculta.

<!-- Sinaliza o comportamento de separador novo visualmente e à tecnologia de apoio -->
<a href="https://example.com" target="_blank">
  Ver relatório de exemplo
  <span class="sr-only">(abre num separador novo)</span>
</a>

Quando o texto da ligação funciona sem ser óbvio

O contexto pode legitimamente fornecer o significado em falta ao abrigo da WCAG 2.4.4. Uma ligação “Descarregar” é aceitável se estiver numa célula de tabela cujo cabeçalho de coluna diz “Relatório Anual” e cujo cabeçalho de linha diz “2025”. O contexto torna o objetivo claro.

Isto é diferente de uma ligação “Ler mais” no final de um parágrafo autónomo. O parágrafo fornece contexto, mas “Ler mais” continua a falhar porque o texto da ligação poderia aplicar-se a qualquer parágrafo — não identifica de forma única o destino.

Ligações em imagem

Quando o conteúdo da ligação é uma imagem em vez de texto, o atributo alt da imagem torna-se o nome acessível da ligação. O texto alternativo deve descrever o destino da ligação, não a própria imagem.

<!-- O alt descreve o destino da ligação, não a aparência da imagem -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Serviços de auditoria de acessibilidade">
</a>

Se a imagem for puramente decorativa e acompanhada de texto visível na mesma ligação, a imagem deve ter alt="" para evitar anunciar o mesmo texto duas vezes.

Uma auditoria rápida que pode fazer sozinho

Abra a sua página e apresente a lista de ligações utilizando o seu leitor de ecrã (ou instale a extensão de navegador gratuita HeadingsMap ou WAVE para ver as ligações extraídas do contexto). Percorra a lista. Se não conseguir saber para onde vai cada ligação apenas a partir do texto, precisa de trabalho.

A solução mais comum é adicionar um <span class="sr-only"> (visualmente oculto, acessível a leitores de ecrã) com contexto adicional, ou simplesmente reescrever completamente o texto da ligação. A reescrita é sempre preferível — melhora frequentemente a usabilidade para todos, não apenas para os utilizadores de leitores de ecrã.

Para uma revisão aprofundada das ligações do seu site e de outros critérios WCAG, as nossas auditorias manuais de acessibilidade cobrem o objetivo das ligações como parte de uma revisão mais ampla por testadores que utilizam tecnologia de apoio todos os dias.