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 sobre a história do diretor de cinema Alfred Hitchcock e clique aqui 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 e clique aqui para conhecer suas obras mais conhecidas.

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

• Webaim

• Criando hyperlinks - MDN

• Boas práticas para descrição de links - IFRS