Conheça dicas e exemplos práticos para
fazer links acessíveis

Neste texto, você vai aprender a eliminar as barreiras de acessibilidade que envolvem esse tema.


Foto de duas mãos em um teclado branco. Há um mouse branco e um relógio amarelo ao lado.

De que forma você costuma navegar na web? Muitos preferem usar o mouse e acabam esquecendo (algumas nem imaginam) que é possível fazer isso por meio da tecla TAB do teclado pelos elementos ativos de uma página. Essa opção inclui a navegação de link em link.

É bastante comum recebermos mensagens de pessoas que utilizam esse meio e que, simplesmente, não conseguem navegar em vários sites porque encontram barreiras de acessibilidade. Algumas delas envolvem essa questão dos links.

Quando o usuário chega ao link desejado, basta ativá-lo por meio da tecla ENTER. Esse tipo de navegação é especialmente importante para quem não consegue utilizar o mouse, como é o caso de pessoas com problemas motores e de usuários com deficiência visual, que navegam utilizando um leitor de tela. É preciso considerar que, quando um usuário de leitor de tela navega pelos links de uma página, ele recebe apenas a informação do texto do link e não de todo o seu contexto.

Por isso, vamos explicar os elementos que envolvem a acessibilidade dos conteúdos na web quando falamos dos links.

Mas o que é um link?

Um hiperlink – ou simplesmente um link – é uma referência aos dados que cada pessoa pode seguir diretamente clicando, tocando ou passando o mouse durante a navegação. Os hiperlinks criam ligações/vínculos entre endereços na web ou elos (pontes de ligação) entre documentos.

Há a possibilidade de vê-lo como um texto colorido e/ou sublinhado ou como um elemento gráfico em que o usuário clica para ir para uma página HTML na internet.

Acessibilidade dos links

É importante se atentar à acessibilidade dos links ou hiperlinks quando você tem um conteúdo para torná-lo acessível na web. Os hiperlinks nos textos devem indicar o destino do link. Evite expressões, como “Clique aqui”, “Saiba mais”. Prefira: “Acesse o site (nome do site)”, “Saiba mais no portal (nome do portal)”.

Confira, abaixo, algumas dicas para fazer um hiperlink acessível:

  1. apresentar bom contraste entre a cor do texto e o respectivo fundo;
  2. ter aparência clara de um hiperlink;
  3. destacar-se dos outros textos e hiperlinks;
  4. ter uma boa área para o clique/toque;
  5. fazer sentido quando lido fora de contexto;
  6. informar claramente seu destino.

Todas essas características são fundamentais para que todos, inclusive pessoas com baixa visão consigam utilizá-los. Isso acaba facilitando o acesso de todas as pessoas.

O segredo principal é testar com um leitor de tela. Se estiver fazendo sentido, vai funcionar. Teste é a melhor dica.

Sugerimos alguns leitores de tela para você baixar: NVDA, Voice Over, TalkBack e Orca.

Links acessíveis na prática

Um exemplo prático seria uma página contendo notícias como as da imagem abaixo, com o link somente no “Leia Mais”.

Arte com dois blocos de notícias embaçados, mostrando somente o texto “Leia Mais” no final de cada bloco.
Arte com duas colunas de notícias, uma ao lado da outra. Imagem: eMAG Conteudistas. Licença Creative Commons 3.0 atribuição-nc-sd.

Os links do tipo LEIA MAIS não são suficientemente descritivos fora do contexto. No exemplo acima, ao navegar em um site com o leitor de tela pela tecla TAB, o usuário receberia a informação “Leia Mais Link”, “Leia Mais Link”, mas não saberia que assunto está sendo abordado e poderia se perguntar “Leia mais sobre o quê?”. O ideal é que o próprio título da notícia seja o link, de modo que o usuário não precise navegar por todo o entorno para saber qual a finalidade do link.

  • Exemplo incorreto, com o link no “Leia mais”:

Notícias
– Projeto Arte na Escola: coordenadora recebe prêmio. Leia mais.
– Trabalho de acadêmica de Engenharia Química é premiado em concurso. Leia mais.
– Vestibular de Verão está com inscrições abertas. Leia mais.

  • Exemplo correto, com o link em toda a frase, sem o “Leia mais”:

Notícias
Projeto Arte na Escola: coordenadora recebe prêmio.
Trabalho de acadêmica de Engenharia Química é premiado em concurso.
Vestibular de Verão está com inscrições abertas.

Os leitores de tela têm uma tecla de atalho que permite ao usuário acessar a lista de todos os links da página. É uma maneira fácil e rápida de ter acesso aos links. No entanto, se o texto dos links não for suficientemente descritivo, essa funcionalidade terá pouco valor.

Lembre-se: quando o seu conteúdo tiver um link, é preciso que ele seja claro e descritivo o suficiente, mesmo quando lido fora do contexto.

Exemplo de link suficientemente descritivo: Organograma da empresa

Exemplo de link com informações desnecessárias: Clique aqui para acessar o organograma da empresa

Exemplo de link com texto pouco descritivo: Clique aqui para acessar o organograma da empresa

Não há necessidade de colocar frases como “clique aqui para…”, “link para…” no texto do link. Tanto visualmente quanto com o leitor de tela, já fica claro para o usuário que se trata de um link.

Com informações do Movimento Web para Todos, da Cartilha Acessibilidade na Web – Fascículo I – W3C Brasil; do Curso eMAG Conteudistas.

 

Outras novidades

Você quer uma web para todos?

Abrace essa causa com a gente e compartilhe com seus amigos!