Proibido usar textos de link como "clique aqui" (2001)

• Ênfase nos problemas de usar textos de link genéricos como "clique aqui"
• Em relação à acessibilidade, o texto do link deve transmitir com clareza o significado do conteúdo
• Há impacto negativo em mecanismos de busca e na experiência de usuários de leitores de tela
• Formulações de link claras e que reflitam o contexto trazem benefícios tanto para usuários quanto para a tecnologia
• Desde 2001, há um movimento de recomendação de textos de link adequados no âmbito dos padrões da web e dos princípios de UX

---

Introdução

• O uso de textos de link genéricos como "clique aqui" ou "click here" se consolidou há muito tempo como uma prática comum entre desenvolvedores web
• No entanto, essa abordagem traz desvantagens importantes em termos de acessibilidade, usabilidade e SEO

Significado do texto do link e seus problemas

• O texto do link deve cumprir o papel de fornecer informação para que o usuário possa prever para onde aquele link leva antes de clicar
• Quando se escreve apenas algo como "clique aqui", o link existe sem contexto, o que causa confusão para o usuário e redução da acessibilidade

Impacto na acessibilidade e na experiência do usuário

• Usuários de leitores de tela, ao percorrerem a lista de links da página, acabam ouvindo repetidamente o mesmo conteúdo, "clique aqui", o que dificulta obter informação
• Quando os links são escritos com expressões específicas que carregam significado, a eficiência da experiência aumenta tanto para pessoas com deficiência visual quanto para usuários em diferentes contextos

Considerações sobre otimização para mecanismos de busca (SEO)

• Os mecanismos de busca também analisam o texto do link para avaliar a relevância e a qualidade do conteúdo
• Textos de link que incluem palavras-chave importantes e contexto têm impacto positivo no aumento do ranking de busca e da visibilidade

Recomendação de boas práticas para escrever textos de link

• Recomenda-se usar textos de link que reflitam claramente o contexto
  • Exemplo: "Ver as diretrizes mais recentes de acessibilidade"
• Esse princípio vem sendo enfatizado continuamente desde 2001, no processo de surgimento dos padrões da web e de fortalecimento da UX

Conclusão

• Em vez de usar "clique aqui", utilizar texto significativo como link é um critério essencial tanto para a web atual quanto para a web do futuro

[GN⁺]

Opinião do Hacker News

• Do ponto de vista de acessibilidade, vale enfatizar que leitores de tela para usuários com deficiência visual leem a página de forma linear. O usuário pode explorar separadamente cabeçalhos ou a lista de links para sair dessa estrutura linear, mas se todos os links aparecem como "clique aqui", o acesso não linear fica na prática bloqueado

  • Foi apontado que, se todos os links forem mostrados apenas como substantivos, como "Amaya", sem verbo, fica difícil entender o significado de cada um. Por isso, expressões como "obter Amaya" ou "ir para o site do Amaya" também parecem perfeitamente adequadas. Também foi citado o wxMaxima como exemplo de algo ruim: o botão de download está em github.io, mas na prática faz você baixar o executável de um site com risco de malware, como o SourceForge
  • Ironicamente, foi sugerido que falta algo que permita a pessoas que não precisam de ferramentas de acessibilidade visualizar e entender facilmente como elas funcionam na prática. Não se trata de mudar a ferramenta em si, mas de pensar em formas para que mais pessoas possam experimentar diretamente o ambiente de um leitor de tela
  • Já existem várias soluções para esse problema. Como referência, foram indicados os links do guia WCAG 2.2 HTML H33 e do guia WCAG 2.2 CSS C7. Ainda assim, não está claro o quanto o primeiro método é bem suportado por leitores de tela reais
  • Parece um bom argumento. Mesmo assim, a posição é que o texto do link deve incluir uma ação mais clara, como "Get Amaya", em vez de apenas "Amaya"
  • Leitores de tela oferecem várias formas de navegação na página. O deslocamento linear é apenas a forma mais ineficiente. O usuário pode pular rapidamente para o ponto desejado por meio de marcos, cabeçalhos ou modo de navegação por estrutura. O importante é que a navegação por leitor de tela e a navegação por teclado são coisas diferentes

• Para mim, o exemplo "problemático" apresentado no texto,

  Para baixar o editor/navegador Amaya do W3C, clique aqui.
  é realmente intuitivo. Dá para prever que clicar no link vai iniciar o download imediatamente ou levar à página de download.
  Em contraste,
  Baixe o Amaya!
  dá mais a impressão de que levaria à página principal do site, então perde eficácia se for usado como link de download.
  E
  Saiba mais sobre Amaya
  não tem relação alguma com download, e como o verbo "saiba mais" não está no link, fica ambíguo se o link em "Amaya" levaria à landing page ou a uma página informativa.
  A convenção na web costuma ser mais próxima dos exemplos antigos, como
  Para baixar o editor/navegador Amaya do W3C, clique aqui
  Download do Amaya, editor/navegador do W3C
  Não concordo com a ideia de que não se deve usar verbos no texto do link. Pelo contrário, se o link exige uma ação, como baixar ou consultar informações, ele deve trazer o verbo de forma clara.
  Em especial, "clique aqui" é muito intuitivo porque sinaliza que não é um link de simples referência, mas um link de ação.
  Baixe o Amaya!
  reforça essa sensação de que o texto parece mais um link de referência do que algo que realmente mostre como obter o Amaya

  • Se você usar um leitor de tela de verdade, vai perceber que todos os links viram apenas uma repetição de "clique aqui". Isso não ajuda em nada. Até do ponto de vista de mecanismos de busca, "clique aqui" não transmite informação nenhuma. O verbo em si não é o problema, mas sim o fato de vários links soarem iguais, como "clique aqui". Algo como "Click Here to download Amaya" é aceitável porque deixa claro também o objeto, mas simplesmente "clique aqui" não pode ser distinguido em muitos contextos
  • Eu realmente odeio links com "clique aqui". Para encontrar o link que quero, costumo passar os olhos apenas pelos textos dos links na página, e "Download do Amaya" ou "Amaya" podem até funcionar em uma página de referência, mas "clique aqui" não ajuda em absolutamente nada
  • No exemplo real, todos os links levam para a homepage do Amaya. Não é uma página de download, e a mensagem acaba ficando ainda mais fraca. A crítica é que a discussão está misturando o problema de acessibilidade de "clique aqui" com a questão de até que ponto o texto do link representa corretamente o destino
  • Além da questão de leitores de tela, definir o texto do link com substantivos claros pode trazer vantagens de manutenção. Por exemplo, se um link foi copiado e colado por engano ou ficou quebrado, o próprio texto serve de pista, o que facilita rastrear e corrigir. Pode parecer um detalhe pequeno
  • Na web antiga havia muitos links desse tipo, com "clique aqui". Aos poucos eles foram substituídos por botões com ação explícita, então padrões como "para cancelar esta compra, [clique aqui]" ou "para concluir esta compra, [clique aqui]" foram desaparecendo

• Foi mencionado que o Government Digital Services do Reino Unido também recomenda diretrizes semelhantes de acessibilidade; o material oficial pode ser visto aqui

  • Costumo usar essas diretrizes como referência para implementar componentes e designs web com o mais alto nível de acessibilidade. Pode parecer meio bruto visualmente, com bordas grossas em preto e amarelo, por exemplo, mas considero importante priorizar acessibilidade acima do design
  • A abordagem recomendada pelo Home Office é um pouco diferente da do W3C. Por exemplo
    W3C:
    Get Amaya
    Read more about Amaya
    Home Office:
    Get Amaya
    Read more about Amaya
    A forma do Home Office parece mais razoável, mas dependendo do contexto também pode gerar outros problemas. Nos dois casos, na prática, muitas vezes é mais natural resolver com botões fora do fluxo do texto, em vez de hiperlinks narrativos inline (por exemplo: [Download], [Documentation]). Na minha experiência, um texto reformulado de forma natural, como
    "PiPedal é um efeito de guitarra que roda no Raspberry Pi. Para baixar o PiPedal, use a [página de download]; para ler a documentação, use [Documentation]."
    funciona melhor, então escrevi assim na documentação real
    Percebi que transformar "clique aqui" em um substantivo é mais difícil do que parece. Às vezes o contexto na frase inline já fornece informação suficiente, então há casos em que usar "clique aqui" não causa, na prática, um problema de acessibilidade
    Especialmente quando os botões estão logo acima ("Download", "Documentation"), não tenho certeza se realmente é necessário alterar isso No fim, a métrica de desempenho é quanto as pessoas realmente visitam a página de download

• Pessoalmente, achei melhor o segundo exemplo que o texto dizia para evitar ("Para baixar o Amaya, vá ao site do Amaya e obtenha o software necessário").
  Se apenas "Amaya" estiver no link, não fica claro se é um link interno ou externo, nem se leva direto ao arquivo ou à página de download

  • Prefiro a ideia de adicionar ícones para indicar se o destino é externo ou se é um arquivo. No caso de arquivo, também foi sugerido mostrar a extensão do arquivo
  • A distinção entre links internos e externos já é bem resolvida em lugares como a Wikipedia com pequenos ícones

• Talvez por eu ser mais velho, intuitivamente penso em links como algo que aponta para substantivos, lugares ou objetos.
  Então links para coisas como "meu site" me parecem normais, mas expressões com verbo, como "ir para meu site", me causam rejeição
  Em especial, não gosto de forma imperativa, então não uso construções como "go to my website" ou "follow this link"

  • Concordo com isso. Em casos com ação, como download, pode haver ambiguidade, mas "download" em si também é um substantivo, então parece aceitável
  • Páginas de tutorial ou How-to podem ser um caso apropriado para linguagem no imperativo

• Há quem veja o uso de apenas "aqui" como link na web como uma falha fundamental em compreender o que é escrever documentos em hipertexto. "Clique aqui" parece quase uma rubrica de palco. Isso seria um problema que surge porque muitos autores não escrevem pensando de fato no contexto do hipertexto

• Ao usar uma frase como "I forgot my password" como link, chegou-se a considerar trocá-la por algo como "clique aqui", mas isso intuitivamente parece errado.
  Com a quebra de padrões de UI, ficou mais comum os usuários se confundirem sobre em que da página devem clicar e qual texto representa sua intenção
  Há concordância de que "I forgot my password" funciona muito melhor como botão do que como link
  Também houve muitos casos em que ficou difícil saber onde clicar quando a Microsoft removeu a maior parte dos botões e os substituiu por links de cor ambígua
  (post de referência: post relacionado no Mastodon)

• Foi apresentado o ensaio de 2022 de Dragan Espenschied, história da transformação do texto de links.
  O texto comenta a tendência recente de o texto de links deixar de ser call-to-action para virar texto de botão que descreve o estado do usuário, ou seja, define que tipo de pessoa ele é, por exemplo: "faça login"

• Concordo com a maior parte dos princípios explicados no texto, mas acho que há exceções adequadas quando verbos ou locuções verbais como "download" precisam aparecer de forma explícita. Nesse caso, isso só deve ser usado quando o link realmente levar ao download direto, e sempre verificando se faz sentido no contexto

• Se, como no exemplo, todos os links realmente iniciassem o download do Amaya, o formato de hiperlink preferido seria Download Amaya.
  Se possível, seria bom incluir junto um ícone que sugira que se trata de um download. O ideal é evitar levar o usuário para uma página de download cheia de botões de anúncio misturados, em vez de um link direto para o arquivo