Dicas e exemplos práticos para fazer links acessíveis
Published: 2023-03-04 14:35:35

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.

Esse tipo de navegação evita a utilização do mouse. No caso, quando o usuário chega no link desejado, ele o acessa utilizando a tecla “Enter” do teclado. Entretanto vale destacar que o usuário irá receber a informação do texto do link, ou seja, se o link estiver no texto “Leia mais”, somente essas palavras serão transmitidas.

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

## 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.

## Links acessíveis
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. importante que mesmo fora de contexto o link seja compreendido;

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.

## Links acessíveis na prática
Vamos usar este trecho de um artigo como exemplo. Nele os textos em azul e sublinhados são os links.

> [Saiba mais](url) sobre a história do diretor de cinema Alfred Hitchcock e [clique aqui](url) para conhecer suas obras mais conhecidas.

Os links do tipo SAIBA MAIS e CLIQUE AQUI 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 “Saiba Mais Link”, “Clique Aqui Link”, mas não saberia que assunto está sendo abordado e poderia se perguntar “Leia mais sobre o quê?”. 

### Vamos deixar os links deste trecho mais acessíveis:

> Saiba mais sobre a [história do diretor de cinema Alfred Hitchcock](url) e clique aqui para conhecer [suas obras mais conhecidas](url).

Agora o leitor de tela irá narrar os links assim: **história do diretor de cinema Alfred Hitchcock link** e na sequência, **obras mais conhecidas link**.

Desse modo, mesmo só tendo ouvido o texto dos links e não de todo o parágrafo, o usuário é capaz de saber para qual conteúdo cada um dos links irá levar após o clique.

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 Fórmula 1**

Exemplo de link com informações desnecessárias: **Clique aqui para acessar o organograma da Fórmula 1**

Exemplo de link com texto pouco descritivo: **Leia Mais**

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.

Uma simples mudança no seu site pode fazer muita diferença para outras pessoas.

Então lembre-se: os links devem descrever exatamente para onde o usuário será levado após o clique.

## Conclusão!
Bom pessoal, esse já é meu terceiro post sobre um assunto que particulamente eu amo, que é acessibilidade na web. Um dos grandes problemas para o contínuo problema da inacessibilidade na web é a falta de conhecimento dos desenvolvedores sobre as técnicas de implementação de acessibilidade. Por isso é extremamente importante a gente falar sobre esse assunto. Espero que esse post ajude você, e qualquer coisa estou a disposição para ajudar também.

## Referências

- [WCAG](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html)

- [Webaim](https://webaim.org/techniques/hypertext/link_text)

- [Criando hyperlinks - MDN](https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)

- [Boas práticas para descrição de links - IFRS](https://cta.ifrs.edu.br/boas-praticas-para-a-descricao-de-links/)