WCAG 2.4.9: Finalidade do link (apenas link)

O que Esta Regra Significa

\n

WCAG 2.4.9 — Finalidade do Link (Somente Link) é um critério de sucesso de Nível AAA nas WCAG 2.1 e 2.2. Ele exige que a finalidade de cada link possa ser determinada apenas a partir do texto do link. Diferentemente do seu equivalente de Nível AA, WCAG 2.4.4 (Finalidade do Link — No Contexto), que permite que a finalidade do link seja inferida a partir do contexto ao redor, como um título, parágrafo ou célula de tabela, 2.4.9 é significativamente mais rígido: o próprio texto do link deve ser totalmente autoexplicativo, sem qualquer dependência do conteúdo ao redor.

\n

O critério se aplica a todos os hiperlinks criados com o elemento <a>, bem como a qualquer elemento interativo que tenha um nome acessível e se comporte como um link. Isso inclui links de imagem (em que o atributo alt da imagem ou um aria-label fornece o nome acessível), links com estilo de botão e links baseados em SVG. O nome acessível do link — calculado a partir do seu texto visível, aria-label, aria-labelledby ou texto alternativo da imagem — deve, por si só, comunicar para onde o link leva ou o que ele faz.

\n

O que conta como aprovação: Um link atende ao 2.4.9 quando uma pessoa que lê apenas o texto do link — e nada mais na página — consegue entender com segurança o destino ou a função do link. Por exemplo, um link com o texto "Download the 2024 Annual Accessibility Report (PDF, 2.4 MB)" é aprovado porque todas as informações relevantes estão contidas no próprio texto do link. Um link com o texto "Read the full article: How to Write Accessible Link Text" também é aprovado. Um link de imagem com alt='View pricing plans' é aprovado porque o texto alternativo é totalmente descritivo.

\n

O que conta como reprovação: Links cujo texto é "click here", "read more", "learn more", "this", "here" ou qualquer outra expressão que só seja significativa em contexto reprovam neste critério. Da mesma forma, um link envolvendo uma imagem cujo atributo alt está vazio ou ausente, deixando o link sem nome acessível, reprova. Links que usam aria-label ou aria-labelledby mas cujo nome acessível calculado ainda é vago também reprovam.

\n

Exceções oficiais: As WCAG observam explicitamente uma exceção — quando a finalidade do link é intencionalmente ambígua para todas as pessoas, não apenas para pessoas com deficiência. Por exemplo, um link de teaser em um jogo de mistério com o texto "Proceed" (em que a ambiguidade é parte intencional do design) não seria considerado uma falha, desde que a ambiguidade se aplique de forma universal. Essa exceção é estreita e não deve ser usada como brecha para práticas ruins de texto de link.

\n\n

Por Que Isso Importa

\n

Texto de link significativo é uma das melhorias de acessibilidade mais impactantes que um site pode fazer. As populações mais diretamente afetadas por texto de link vago são pessoas que usam leitores de tela, pessoas que navegam por teclado, pessoas com deficiências cognitivas e pessoas que usam softwares de controle por voz.

\n

Pessoas que usam leitores de tela — geralmente pessoas cegas ou com baixa visão severa — frequentemente navegam em uma página abrindo uma lista de todos os links. Leitores de tela populares como NVDA, JAWS e VoiceOver oferecem esse recurso, que extrai o nome acessível de cada link e os apresenta como uma lista independente. Quando os links dizem "click here", "read more" ou "details", essa lista se torna uma série de entradas idênticas e sem significado. A pessoa não tem como determinar qual link ativar sem ler o conteúdo ao redor de cada um — uma tarefa lenta, frustrante e muitas vezes impossível, especialmente em páginas com dezenas de links.

\n

De acordo com a Organização Mundial da Saúde, aproximadamente 2,2 bilhões de pessoas no mundo têm algum tipo de deficiência visual, das quais pelo menos 1 bilhão têm uma condição que poderia ter sido prevenida ou ainda não foi tratada. Mesmo entre pessoas sem deficiência visual, pessoas com deficiência motora que dependem de acesso por varredura (switch) ou navegação por voz (usando ferramentas como Dragon NaturallySpeaking) se beneficiam enormemente de texto de link descritivo, porque podem ativar um link diretamente falando ou selecionando seu nome. Grupos com deficiências cognitivas — incluindo pessoas com déficit de atenção, dificuldades de memória ou de leitura — também se beneficiam porque rótulos de link claros reduzem a carga cognitiva e a necessidade de reler o contexto.

\n

Considere um cenário do mundo real: uma cidadã ou um cidadão turco visitando o site de um hospital público para marcar uma consulta. A página tem três botões de serviço, cada um contendo a frase "Randevu Al" (Agendar Consulta) sem mais contexto no texto do link. Uma pessoa cega que abre a lista de links do leitor de tela vê "Randevu Al", "Randevu Al" e "Randevu Al" — três opções indistinguíveis. Ela não consegue determinar qual link é para cardiologia, qual é para clínica geral e qual é para radiologia sem voltar ao contexto. Atender ao WCAG 2.4.9 exigiria que cada link dissesse "Randevu Al — Kardiyoloji", "Randevu Al — Genel Pratisyen" e "Randevu Al — Radyoloji", tornando a finalidade inequívoca apenas pelo texto do link.

\n

Além da acessibilidade, texto de link descritivo traz valor significativo de SEO. Rastreadores de mecanismos de busca atribuem peso ao texto âncora ao indexar páginas, e links descritivos melhoram os sinais de relevância tanto para a página de origem quanto para a página de destino. Substituir texto âncora genérico por expressões significativas melhora a capacidade de descoberta e reduz taxas de rejeição, beneficiando todas as pessoas usuárias.

\n\n

Regras Relacionadas do Axe-core

\n

WCAG 2.4.9 exige testes manuais porque ferramentas automatizadas não conseguem determinar significado ou intenção — elas podem sinalizar a ausência de um nome acessível, mas não podem julgar se um determinado nome acessível é suficientemente descritivo.

\n

\n
• Teste manual obrigatório — link-name (regra do axe): A regra link-name do axe-core detecta links que não têm nome acessível algum (por exemplo, um elemento <a> sem conteúdo de texto, sem aria-label, sem aria-labelledby e sem imagem com atributo alt não vazio). Embora essa regra identifique links completamente vazios, ela não consegue avaliar se o nome acessível existente é significativo. Um link com o texto "here" será aprovado pela regra automatizada link-name porque tecnicamente tem um nome acessível — mas reprova no WCAG 2.4.9 porque esse nome não é autoexplicativo. É exatamente por isso que 2.4.9 é marcado como exigindo revisão manual: uma pessoa precisa ler cada rótulo de link e julgar se ele comunica a finalidade de forma isolada.
\n
• Teste manual obrigatório — identical-links-same-purpose: O axe-core inclui uma regra que sinaliza conjuntos de links com nomes acessíveis idênticos, mas destinos diferentes. Este é um heurístico que revela possíveis violações do 2.4.9 — por exemplo, vários links "Read More" apontando para artigos diferentes. No entanto, mesmo essa regra exige confirmação humana, porque nomes idênticos apontando para o mesmo destino não são uma violação. A regra levanta candidatos para revisão, não falhas definitivas.
\n
• Por que a automação é insuficiente: É necessário entendimento de linguagem natural para avaliar a finalidade de um link. Uma ferramenta automatizada pode calcular que o nome acessível de um link é a string "details", mas não consegue saber que essa string não descreve o destino. Da mesma forma, uma ferramenta não consegue avaliar se "View" é adequado (talvez seja, em uma interface muito específica e de escopo estreito) ou se "View the Q3 Financial Statement" é melhor. O julgamento humano, idealmente combinado com testes com leitor de tela, é o único método confiável.
\n

\n\n

Como Testar

\n

\n
1. Base de varredura automatizada: Execute o axe DevTools (extensão de navegador) ou o Lighthouse na página alvo. No axe DevTools, procure quaisquer violações da regra link-name — elas representam links sem nome acessível algum e são falhas garantidas de 2.4.9. Exporte os resultados e anote todos os links sinalizados. Esta etapa não completa sua auditoria de 2.4.9; ela apenas identifica as falhas mais óbvias.
\n
2. Gere uma lista de links com um leitor de tela: Abra a página no Firefox com o NVDA instalado. Pressione Insert + F7 (atalho da Lista de Elementos do NVDA) e selecione "Links" na caixa de diálogo. Revise a lista completa de rótulos de links. Pergunte a si mesmo: uma pessoa que lesse apenas essa lista conseguiria entender o destino ou a função de cada link? Repita esse teste no JAWS pressionando Insert + F7 para abrir a caixa de diálogo Links List, e no VoiceOver no Safari (macOS) pressionando VO + U para abrir o Rotor e navegando até Links. Sinalize qualquer link cujo rótulo seja ambíguo, duplicado com destino diferente ou composto inteiramente por uma string de URL.
\n
3. Auditoria de tabulação por teclado: Navegue pela página usando apenas a tecla Tab. Cada vez que o foco parar em um link, leia apenas o texto visível do elemento focado (ou ouça o anúncio do leitor de tela). Sem olhar para o conteúdo ao redor, decida se a finalidade do link está clara. Documente todos os links em que a finalidade não esteja clara apenas pelo texto do link.
\n
4. Verificação de links de imagem: Identifique todos os links que contêm apenas uma imagem (sem texto visível). Inspecione cada um com as ferramentas de desenvolvedor do navegador para verificar se a imagem tem um atributo alt descritivo e não vazio, ou se o link tem um aria-label descritivo. O cálculo do nome acessível deve resultar em uma expressão significativa.
\n
5. Verificação de texto de link duplicado: Pesquise no HTML da página por múltiplas ocorrências do mesmo texto de link (por exemplo, vários âncoras "Read More" ou "Buy Now"). Verifique se esses links apontam para o mesmo destino (aceitável) ou para destinos diferentes (uma falha de 2.4.9, a menos que sejam desambiguados via aria-label ou aria-labelledby).
\n
6. Teste de controle por voz: Usando Dragon NaturallySpeaking ou Windows Voice Access, tente ativar links falando seu rótulo visível. Se o rótulo falado for ambíguo e vários candidatos aparecerem (por exemplo, ao dizer "Click Read More" vários links forem destacados), isso confirma uma falha de usabilidade no mundo real alinhada com 2.4.9.
\n

\n\n

Como Corrigir

\n

Texto genérico de link "Read More" — Incorreto

\n

<!-- Fails 2.4.9: link purpose cannot be determined from link text alone -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>Read more</a>\n</article>

\n

Texto genérico de link "Read More" — Correto

\n

<!-- Passes 2.4.9: link purpose is fully clear from link text alone -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>\n    Read more about improving your website's accessibility score\n  </a>\n</article>\n\n<!-- Alternative: visually show short text but provide full accessible name -->\n<a href='/blog/improve-accessibility-score'\n   aria-label='Read more about improving your website's accessibility score'>\n  Read more\n</a>

\n\n

Link somente de imagem com texto alternativo ausente — Incorreto

\n

<!-- Fails 2.4.9: image link has no accessible name; screen readers announce URL or nothing -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt=''>\n</a>

\n

Link somente de imagem com texto alternativo ausente — Correto

\n

<!-- Passes 2.4.9: alt text gives the link a fully descriptive accessible name -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt='View Accsible pricing plans'>\n</a>\n\n<!-- Alternative using aria-label on the anchor -->\n<a href='https://accsible.com/pricing' aria-label='View Accsible pricing plans'>\n  <img src='/icons/pricing.svg' alt=''>\n  <!-- alt='' hides decorative image from AT; aria-label on <a> provides the name -->\n</a>

\n\n

Múltiplos links idênticos "Satın Al" (Buy Now) — Incorreto

\n

<!-- Fails 2.4.9: three identical link labels pointing to different products -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise'>Satın Al</a>\n</div>

\n

Múltiplos links idênticos "Satın Al" (Buy Now) — Correto

\n

<!-- Passes 2.4.9: each link has a unique, descriptive accessible name via aria-label -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic' aria-label='Temel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro' aria-label='Profesyonel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise' aria-label='Kurumsal Planı Satın Al'>Satın Al</a>\n</div>\n\n<!-- Alternative: use visually hidden text inside the anchor -->\n<a href='/plans/basic'>\n  Satın Al <span class='sr-only'>— Temel Plan</span>\n</a>

(Content truncated due to token limit — please retry this article.)