- Ê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
1 comentários
Comentários do Hacker News
Do ponto de vista da acessibilidade, leitores de tela para pessoas com deficiência visual leem a página de forma linear
Para sair dessa leitura linear, muitas vezes eles também permitem navegar separadamente por listas de elementos, como títulos ou links, sem o contexto da posição original
Se todos os links forem “click here”, isso na prática tira desses usuários o acesso não linear
Por isso, algo como “get Amaya” ou “go to the Amaya website” parece aceitável
Além disso, não é uma boa prática um botão de download no github.io buscar um executável em um lugar tratado como site de malware, como o SourceForge. Isso me lembra o wxMaxima
Não quero dizer que devamos mudar as ferramentas, mas deveria haver alguma forma de visualizar como um leitor de tela funciona para pessoas que não vão investigar isso diretamente
Mas não sei o quão bem a primeira é suportada por leitores de tela
Edit: atualizei os links de WCAG 2.0 para 2.2
Ainda assim, em vez de deixar só “Amaya”, como no exemplo do texto, eu incluiria mais a ação, como “Get Amaya”
O usuário pode, por exemplo, navegar entre landmarks, entre títulos, ou pelos dois juntos em um modo de navegação por estrutura
O ponto central é que a navegação por leitor de tela não é igual à navegação por teclado
Discordo totalmente. O exemplo que eles dão como ruim, “To download W3C's editor/browser Amaya, click here.”, é muito claro
Ao clicar no link, o download vai começar imediatamente ou você irá para a página de download
Por outro lado, “Get Amaya!” parece um link para o site do Amaya, não para uma página de download, então não é eficaz para download
“Tell me more about Amaya: W3C's free editor/browser that lets you create HTML, SVG, and MathML documents.” também não é bom. Não é uma frase sobre download, e “tell me more” é um comando, mas não é o link
O uso convencional da web, isto é, “To download W3C's editor/browser Amaya, click here.” ou “Download Amaya, the W3C's editor/browser.”, é perfeitamente aceitável
A ideia de que um link não deve ser um verbo parece bastante estranha. Se incluir uma ação, como baixar ou saber mais, o link naturalmente pode ser um verbo
É diferente de casos como links de referência da Wikipedia, em que se quer saber mais sobre um assunto
“click here” deixa muito claro que o link não é uma simples referência, mas um link de ação. Ao ver “Get Amaya!”, eu sinto que ele está dizendo como obter o Amaya, e não que “Amaya” seja um link de referência em vez de um link de download
Mesmo se você estiver criando um mecanismo de busca, que informação “click here” daria ao índice?
Não discordo que o verbo em si seja um grande problema, mas é diferente quando o verbo é click e o objeto é here
Um texto de link como “Click Here to download Amaya” eu até tolero, mas se o link for literalmente só as duas palavras “click here”, ele não pode ser distinguido de outros links em vários contextos
“Download Amaya” pode ser um ótimo link. Apenas “Amaya” ou apenas “click here” não são bons, a menos que seja um link para uma página de informações sobre o Amaya
No fim, o problema do “click here” é uma questão de acessibilidade, como outros comentários disseram, mas a mensagem parece ter ficado bem confusa ao misturar isso com a questão de o texto do link refletir corretamente o destino
aria-describedbypode ajudar, mas melhorar o próprio texto dentro do link evita essa necessidadeConcordo quanto ao verbo
O Government Digital Service do Reino Unido também faz uma recomendação parecida em suas diretrizes de acessibilidade: https://design.homeoffice.gov.uk/accessibility/links
Talvez não sejam os mais bonitos, mas coisas como as bordas grossas em preto/amarelo dos componentes de formulário mostram que a acessibilidade vem antes do design
O W3C diz “Get Amaya”, “Read more about Amaya”, enquanto o Home Office diz “Get Amaya”, “Read more about Amaya”
A segunda opção parece muito mais razoável, mas, quando usada dentro de um contexto, cria outro problema
Pessoalmente, acho que ambos confundem dois casos de uso diferentes. Links são frequentemente usados inline dentro de frases, e os casos tratados pelo W3C e pelo Home Office seriam melhor tratados como botões fora da frase, por exemplo
[Download],[Documentation]Mas, no caso de uso de hiperlinks dentro de texto inline, ambos parecem estranhos
Por exemplo, como deveríamos corrigir “PiPedal is a guitar effects pedal that runs on Raspberry Pi. To download PiPedal, click here. To read the documentation, click here.”?
Entendo os motivos da oposição, mas uma correção como “PiPedal is a guitar effects pedal that runs on Raspberry Pi. Get Pipedal. Read the documentation.” é difícil de aceitar. Não soa idiomático em inglês
Na documentação real, escrevi algo como “To download PiPedal, visit the Download Page. To learn more about Pipedal, view the Documentation.”, mas, pela minha experiência, substantivar “click here” muitas vezes é muito difícil
Isso é ainda mais verdadeiro em frases como “Ubuntu Server installs don't suffer from this problem; but before choosing an Ubuntu Server install, you should read the Ubuntu Server section of the "Installing on Ubuntu" page.”
Então fico me perguntando qual é exatamente o problema em usar “here” como pronome do referente
Nesse caso de uso, o link está dentro de uma frase que fornece todo o contexto necessário, então talvez não haja um problema real de acessibilidade
O primeiro exemplo também é uma frase de abertura de uma página web em que a concisão é importante
“To download PiPedal, click here.” é realmente um problema de acessibilidade? Especialmente se logo acima houver botões
[ Download ] [ Documentation ]A métrica que realmente importa aqui é quantas pessoas visitam a página de download
Visto por esse ângulo, tenho bastante dúvida de que “To download PiPedal, visit the Download Page.” seja melhor
Pessoalmente, acho melhor o segundo exemplo que eles mandam evitar: “To download Amaya, go to the Amaya_Website and get the necessary software.”
Um link chamado apenas “Amaya” não deixa claro se é um link interno ou externo e, mesmo que o contexto deixe evidente que o objetivo é baixar o Amaya, fica difícil saber se ele leva diretamente a um arquivo ou a uma página de download
Talvez seja a idade, mas sempre pensei instintivamente que links apontam para substantivos
Um link aponta para algum lugar, e esse lugar tem um nome, não um verbo nem um adjetivo
Por isso, um link para “meu site” parece ok, mas um link como “ir para meu site” me parece inerentemente incorreto
Também detesto fortemente o tom imperativo, então nunca uso frases como “go to my website” ou “follow this link”
Mas, se um link inicia uma ação, como um download, a coisa fica ambígua. Ainda assim, se você enxergar isso como o substantivo “download” ou “downloader”, continua sendo um substantivo
Esta provavelmente é uma discussão de internet que vou defender até o fim
Chamadas para ação são uma questão à parte, mas páginas que colocam link apenas na palavra “here” são um fracasso claro de autores que não entendem o meio hipertexto
“click here” parece uma rubrica de palco deixada por engano
A maioria dos autores, ao escrever, não pensa em um contexto de hipertexto e toma rubricas de palco como padrão, em vez de uma notação de link como Markdown
Isso me lembrou de um texto sobre um link escrito “I forgot my password”
Pensei se ficaria melhor escrever “click here if...”, mas intuitivamente sabia que isso também não estava certo
Ignorar elementos inúteis de uma página web é uma habilidade que algumas pessoas simplesmente não têm, e não sei como ensiná-la
Isso me vem à mente toda vez que ajudo alguém sem conhecimento prévio a usar a web. Alguns usuários, mesmo que o primeiro item literal da página seja “Please enable notifications”, pensam cuidadosamente sobre ele antes mesmo de olhar o segundo item
Ainda mais agora que a busca do Google também mostra várias telas de lixo antes dos resultados de verdade
Um problema relacionado é que algumas pessoas não conseguem entender, por tipo, o status epistemológico do texto dentro de uma página
Por exemplo, há usuários que veem um link clicável “I forgot my password” e acreditam que não significa que aquele é o lugar a clicar quando esqueceram a senha, mas sim uma frase informando que eles esqueceram a senha
É claro que a morte da padronização de UI piora muito esse problema
https://mstdn.io/@mattskala/113188291223682980
Lembro de quando a Microsoft removeu muitos botões da UI e os substituiu por links de texto coloridos de forma ambígua. Depois disso ficou muito mais difícil descobrir onde clicar
Os usuários se adaptam intuitivamente às máquinas, e os desenvolvedores se adaptam aos usuários, criando um ciclo de feedback
Em outras palavras, é bem possível que o significado da linguagem também tenha mudado porque inúmeros sites e apps tinham um link “I forgot my password”
Ao menos nesse contexto, a maioria das pessoas vai se adaptar para entender a intenção
As gerações mais jovens, que não conhecem outro jeito, podem nem considerar isso algo digno de atenção
Por isso, mesmo que uma convenção não faça sentido quando vista isoladamente, também há valor em manter a convenção
Se todos os exemplos partem consistentemente do pressuposto de que de fato se faz o download do “Amaya”, então acho melhor simplesmente usar o hyperlink Download Amaya
Se possível, seria bom também ter um ícone de download indicando que ele leva ao arquivo de verdade
Porque isso permite saber que não é um link para outra página em que o botão real de download está escondido entre quatro anúncios
Dragan Espenschied(despens) escreveu em 2022 sobre como o texto dos links mudou ao longo do tempo: https://despens.systems/2022/06/button-pushes-you/
Ele aponta a transição de chamadas para ação para textos de botão que descrevem o usuário
Algo como: “Em vez disso, eles precisam reconfigurar o estado do usuário. O usuário precisa aceitar o feitiço escrito e mudar de atitude antes de acessar a próxima informação”
“Get Amaya.” e “Tell me more about Amaya.” não parecem elegantes