Regra de acessibilidade: Os links devem ter texto discernível

Sobre esta regra de acessibilidade

Os links são um dos elementos interativos mais fundamentais na web. Quando um link não tem um nome acessível, os utilizadores de leitores de ecrã ouvem algo como “link” sem mais contexto, 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 pelos 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 nele. 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 ter apenas texto, os links também devem ser programaticamente focáveis. Evite depender de eventos JavaScript específicos do dispositivo como onmouseover ou mouseout(), que são inacessíveis aos utilizadores de teclado. Use alternativas independentes do dispositivo como onfocus, onblur, focus(), e blur(). Adicionalmente, não oculte o texto do link das 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 semânticos <a> com um atributo href válido em vez de simular links com elementos <span> ou <div> e manipuladores de clique. Links reais são focá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 nas WCAG 2.0, 2.1, e 2.2:

WCAG 2.4.4 (Propósito do link em contexto): Os utilizadores devem conseguir determinar o propósito de cada link apenas através do texto do link, ou do texto do link combinado com o seu contexto determinado programaticamente.
WCAG 4.1.2 (Nome, papel, valor): Todos os componentes de interface do utilizador, incluindo links, devem ter um nome acessível e papel que possa ser determinado programaticamente.

Esta regra é também exigida sob a Secçã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 o texto do link dos leitores de ecrã com aria-hidden="true" ou CSS que remove elementos da árvore de acessibilidade.
Certifique-se de que os links são focá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 das tecnologias assistivas:

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

Link com texto visível (correto)

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

Link de imagem com texto alt descritivo (correto)

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

Link com `aria-label` (correto)

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

<h3>Accessibility Updates</h3>
<p>New WCAG 2.2 guidelines have been published.
  <a href="/wcag22" aria-label="Read more about WCAG 2.2 updates">Read more</a>
</p>

<h3>Screen Reader Tips</h3>
<p>Learn how to navigate tables with a screen reader.
  <a href="/sr-tips" aria-label="Read more about screen reader tips">Read more</a>
</p>

Link com `aria-labelledby` (correto)

<h3 id="report-title">Annual Report 2024</h3>
<a href="/report-2024.pdf" aria-labelledby="report-title">Download 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">Search</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: