Regra de acessibilidade: Links com o mesmo nome devem ter um propósito semelhante

Sobre esta regra de acessibilidade

Quando utilizadores de leitores de ecrã navegam numa página, frequentemente abrem uma lista de todos os links para examinar rapidamente os destinos disponíveis. Se essa lista contém vários links todos rotulados como “Ler mais”, não há forma de os distinguir. Isto cria confusão e força os utilizadores a sair da lista de links, encontrar cada link no contexto, e ler o conteúdo envolvente para compreender o seu propósito. Os utilizadores que são cegos ou surdocegos são os mais afetados, mas esta questão também impacta qualquer pessoa que dependa do texto do link para compreender as opções de navegação.

Esta regra relaciona-se com o Critério de Sucesso WCAG 2.4.9: propósito do link (apenas link), um requisito de Nível AAA. Declara que o propósito de cada link deve ser determinável apenas a partir do texto do link. Enquanto o critério relacionado 2.4.4 (Nível A) permite que o propósito do link seja determinado a partir do contexto, o SC 2.4.9 estabelece um padrão mais elevado: o texto de cada link deve ser autoexplicativo por si só. Adicionalmente, o Critério de Sucesso 3.2.4: identificação consistente requer que componentes com a mesma funcionalidade sejam identificados consistentemente. Em conjunto, estes critérios significam que links com o mesmo nome devem ir para o mesmo lugar, e links que vão para lugares diferentes devem ter nomes diferentes.

Como corrigir o problema

O princípio fundamental é direto: se dois links têm o mesmo nome acessível, devem servir o mesmo propósito. Se servem propósitos diferentes, dê-lhes nomes acessíveis distintos.

Aqui estão formas práticas de corrigir isto:

Escreva texto de link descritivo. Em vez de frases genéricas como “Ler mais” ou “Clique aqui”, escreva texto de link que descreva o destino, como “Ler a política de acessibilidade” ou “Ver as atas da reunião de janeiro”.
Use aria-label para diferenciar links. Quando o texto visível deve ser genérico (ex.: por razões de design), use aria-label para fornecer um nome único e descritivo para cada link.
Use aria-labelledby para combinar títulos visíveis ou outro texto com o link para formar um nome acessível único.
Forneça texto alt significativo em links de imagem. Se um link contém apenas uma imagem, o atributo alt da imagem torna-se o nome acessível do link. Certifique-se de que descreve o destino do link.

Exemplos

Incorreto: múltiplos links com o mesmo nome indo para páginas diferentes

Neste exemplo, dois links “Ler mais” aparecem idênticos para tecnologia assistiva mas levam a artigos completamente diferentes:

<h3>Neighborhood News</h3>

<p>Seminole tax hike: City managers propose a 75% increase in property taxes.
  <a href="taxhike.html">Read more...</a>
</p>

<p>Baby Mayor: Voters elect the city's youngest mayor ever.
  <a href="babymayor.html">Read more...</a>
</p>

Um leitor de ecrã listando todos os links nesta página mostraria duas entradas idênticas — “Read more…” — sem forma de as distinguir.

Correto: usar `aria-label` para diferenciar links

Ao adicionar um aria-label, cada link obtém um nome acessível único mantendo o texto visível curto:

<h3>Neighborhood News</h3>

<p>Seminole tax hike: City managers propose a 75% increase in property taxes.
  <a href="taxhike.html" aria-label="Read more about Seminole tax hike">Read more...</a>
</p>

<p>Baby Mayor: Voters elect the city's youngest mayor ever.
  <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">Read more...</a>
</p>

Correto: escrever texto de link descritivo diretamente

A abordagem mais simples é tornar o próprio texto do link descritivo:

<a href="routes.html">Current routes at Boulders Climbing Gym</a>

Correto: texto `alt` descritivo num link de imagem

Quando um link envolve uma imagem, o atributo alt serve como o nome acessível do link:

<a href="routes.html">
  <img src="topo.gif" alt="Current routes at Boulders Climbing Gym">
</a>

Correto: imagem e texto juntos num link

Quando um link contém tanto uma imagem como texto, use um atributo alt vazio na imagem para evitar redundância. O texto visível torna-se o nome acessível:

<a href="routes.html">
  <img src="topo.gif" alt="">
  Current routes at Boulders Climbing Gym
</a>

Correto: links com o mesmo nome apontando para o mesmo destino

Se dois links genuinamente vão para o mesmo lugar, não há problema em partilharem o mesmo nome:

<nav>
  <a href="/contact">Contact us</a>
</nav>

<footer>
  <a href="/contact">Contact us</a>
</footer>

Ambos os links são rotulados como “Contact us” e ambos levam à mesma página de contacto, portanto não há ambiguidade.

Correto: usar `aria-labelledby` para construir um nome único a partir do conteúdo existente

Pode referenciar um título próximo para criar um nome acessível único sem adicionar texto visível extra:

<h3 id="tax-heading">Seminole Tax Hike</h3>
<p>City managers propose a 75% increase in property taxes.
  <a href="taxhike.html" aria-labelledby="tax-heading tax-link">
    <span id="tax-link">Read more</span>
  </a>
</p>

<h3 id="mayor-heading">Baby Mayor Elected</h3>
<p>Voters elect the city's youngest mayor ever.
  <a href="babymayor.html" aria-labelledby="mayor-heading mayor-link">
    <span id="mayor-link">Read more</span>
  </a>
</p>

O nome acessível do primeiro link resolve-se como “Seminole Tax Hike Read more” e o segundo como “Baby Mayor Elected Read more”, tornando-os distinguíveis numa lista de links.

Learn more: