Regra de acessibilidade: Links devem ter texto discernível

Sobre esta regra de acessibilidade

Links são um dos elementos interativos mais fundamentais na web. Quando um link carece de um nome acessível, os utilizadores de leitores de ecrã ouvem algo como “link” sem contexto adicional, tornando impossível compreender o propósito ou destino do link. Isto afeta pessoas cegas, surdocegas, ou com baixa visão que dependem de leitores de ecrã, bem como utilizadores que navegam apenas com teclado e navegam através de links sequencialmente.

O nome acessível de um link pode vir de várias fontes: o seu conteúdo de texto visível, um atributo aria-label, uma referência aria-labelledby, um atributo title, ou o texto alt de uma imagem contida dentro do mesmo. Se nenhuma destas fornecer uma string não vazia, o link não tem texto discernível, e esta regra irá sinalizá-lo.

Além de apenas ter texto, os links também devem ser focalizáveis programaticamente. Evite depender de eventos JavaScript específicos do dispositivo como onmouseover ou mouseout(), que são inacessíveis a utilizadores de teclado. Use alternativas independentes do dispositivo como onfocus, onblur, focus(), e blur(). Adicionalmente, não oculte texto de links de tecnologias assistivas usando display: none, visibility: hidden, ou aria-hidden="true" no link ou no seu conteúdo de texto.

É também importante usar elementos <a> semânticos com um atributo href válido em vez de simular links com elementos <span> ou <div> e manipuladores de clique. Links reais são focalizáveis por defeito e transmitem o papel correto às tecnologias assistivas.

Critérios de sucesso WCAG relacionados

Esta regra relaciona-se com dois critérios de sucesso de Nível A que se aplicam através do WCAG 2.0, 2.1, e 2.2:

WCAG 2.4.4 (Propósito do link em contexto): Os utilizadores devem ser capazes de determinar o propósito de cada link apenas a partir do texto do link, ou a partir do texto do link combinado com o seu contexto determinado programaticamente.
WCAG 4.1.2 (Nome, papel, valor): Todos os componentes da interface do utilizador, incluindo links, devem ter um nome e papel acessíveis que possam ser determinados programaticamente.

Esta regra é também necessária sob a Seção 508, EN 301 549, e diretrizes Trusted Tester.

Como corrigir

Adicione conteúdo de texto visível dentro do elemento <a>.
Para links de imagem, forneça texto alt significativo no elemento <img>.
Use aria-label quando precisar de fornecer um nome acessível que difere ou complementa o texto visível.
Use aria-labelledby para referenciar o texto de outro elemento como o nome acessível do link.
Não oculte texto de links de leitores de ecrã com aria-hidden="true" ou CSS que remove elementos da árvore de acessibilidade.
Certifique-se de que os links são focalizáveis usando elementos <a> adequados com atributos href e evitando manipuladores de eventos apenas para rato.

Exemplos

Link vazio (incorreto)

Um link sem texto ou nome acessível:

<a href="/settings"></a>

Um link que apenas contém uma imagem sem texto alt:

<a href="/home">
  <img src="logo.png" alt="">
</a>

Um link com o seu texto oculto de tecnologias assistivas:

<a href="/profile">
  <span aria-hidden="true">Perfil</span>
</a>

Link com texto visível (correto)

<a href="/settings">Definições</a>

Link de imagem com texto alt descritivo (correto)

<a href="/home">
  <img src="logo.png" alt="Página inicial">
</a>

Link com `aria-label` (correto)

Isto é útil quando múltiplos links partilham o mesmo texto visível, como links repetidos “Ler mais”:

<h3>Atualizações de acessibilidade</h3>
<p>Novas diretrizes WCAG 2.2 foram publicadas.
  <a href="/wcag22" aria-label="Ler mais sobre atualizações WCAG 2.2">Ler mais</a>
</p>

<h3>Dicas de leitor de ecrã</h3>
<p>Aprenda como navegar em tabelas com um leitor de ecrã.
  <a href="/sr-tips" aria-label="Ler mais sobre dicas de leitor de ecrã">Ler mais</a>
</p>

Link com `aria-labelledby` (correto)

<h3 id="report-title">Relatório anual 2024</h3>
<a href="/report-2024.pdf" aria-labelledby="report-title">Descarregar PDF</a>

Link de ícone com texto visualmente oculto (correto)

Para links que usam ícones sem texto visível, use um <span> visualmente oculto para fornecer um nome acessível:

<a href="/search">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-search"></use>
  </svg>
  <span class="visually-hidden">Pesquisar</span>
</a>

A classe visually-hidden oculta o texto visualmente mas mantém-no disponível aos leitores de ecrã:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Learn more: