As páginas da web usam links para enviar conteúdo novo ou adicional aos visitantes. Os links podem ser texto e imagens. Os links são ferramentas poderosas de navegação e devem estar estruturados adequadamente para oferecer a melhor experiência.

As WCAG (Diretrizes de Acessibilidade para Conteúdo Web) são requisitos específicos definidos para garantir que o conteúdo seja acessível para todos. De acordo com as diretrizes WCAG 2.2 AA, os links devem declarar a própria finalidade para que os visitantes possam decidir se querem segui-los. Os links precisam ter um texto discernível que informe aos visitantes para onde estão sendo levados.

O que significa um texto discernível?

Os links geralmente têm duas informações:

  • URL: Endereço da web ao qual os visitantes são levados quando selecionam o link
  • Texto de exibição: Um texto visível que informa aos visitantes o que esperar caso selecionem o link

Considere este link para as práticas recomendadas: Práticas recomendadas para links. No código-fonte HTML, o link de práticas recomendadas é assim:<a href="#best-practices">Best practices for links</a>

Quando o texto de exibição ou o texto entre as tags <a> está ausente, o link não tem um texto discernível. Um texto discernível é aquele que mostra aos visitantes a finalidade do link.

É um problema secundário quando os links não têm um texto discernível. Resolva os problemas secundários para fornecer uma experiência melhor. Links ausentes ou com textos vagos podem tornar a navegação confusa e ser uma fonte de frustração para pessoas com deficiências.

Como as pessoas com deficiência usam links vinculado na parte inferior da página

O Ally ajuda a identificar quando há texto ausente nos links e explica como corrigi-los. O Ally faz estas verificações:

  • Há texto entre as tags <a> do hiperlink?
  • O texto entre as tags <a> está oculto?
  • As imagens usadas como links têm descrições alternativas?

Se o link não passar em nenhuma das verificações, o Ally o marcará como um problema.

Use o Ally para encontrar links com texto ausente

Use o Relatório de acessibilidade do Ally para descobrir e corrigir problemas de acessibilidade em seu site. Use o link fornecido para o relatório e faça login. Abra o relatório e veja a lista de problemas na tabela Problemas de acessibilidade.

A tabela Problemas de acessibilidade está nas guias Visão geral e Domínio. Comece na guia Domínio para ver os problemas específicos de um domínio.

Os links sem texto discernível são marcados como um problema secundário. Use a guia Secundário na tabela Problemas de acessibilidade para visualizar a lista de problemas secundários. Selecione os problemas de links sem texto discernível.

Se você começar pela guia Visão geral, selecione o problema e, em seguida, o domínio com o problema.

Na lista de problemas no domínio, selecione o indicador de pontuação ao lado de um item com o problema. O painel de comentários do editor de conteúdo é aberto.

Visualizar os links com texto ausente

O painel de comentários do Ally mostra uma visualização do conteúdo, bem como comentários detalhados e suporte para ajudar você a corrigir seus problemas de acessibilidade. Use a visualização para ver os links com texto ausente.

A visualização destaca em qual lugar do documento estão os problemas específicos de acessibilidade. Os destaques exibem todas as ocorrências de um tipo de problema por vez. Por exemplo, para o problema de links com texto ausente, a visualização destaca cada instância em que esse problema específico ocorre.

Ferramentas de visualização

Use as ferramentas acima da visualização para explorar os problemas de seu documento.

  • Navegue pela visualização do documento página por página.
  • Veja quantas vezes um problema específico aparece no documento.
  • Alterne entre os destaques do problema.
  • Oculte ou exiba os destaques.
  • Aumente ou diminua o zoom do conteúdo da visualização.
  • Se o problema estiver em um documento anexado, faça o download do arquivo original.

Siga as etapas guiadas do Ally para adicionar texto ao link

O Ally pressupõe que você tenha conhecimento básico de HTML e de como usar o sistema de gerenciamento de conteúdo (CMS). Para seguir as etapas guiadas, você precisa saber como editar uma página web em HTML ou código-fonte no seu CMS.

Junto com a visualização, o Ally oferece uma orientação passo a passo sobre como corrigir o problema. O Ally organiza esses comentários em uma árvore de decisão. Leia as orientações e responda às solicitações. Descubra o que é o problema, por que ele é importante e como corrigi-lo adequadamente.

Selecione Como corrigir o texto do link para seguir as etapas guiadas.

Maneiras de adicionar o texto aos links

Há mais de uma maneira de corrigir o texto do link nas páginas da web.

  • HTML: As etapas guiadas do Ally mostram como encontrar e editar o texto do link em HTML. Basicamente, encontre a página da web com o link. Edite a página. No código HTML, adicione o texto entre as tags <a>. Salve a página.
  • RTE: Alguns CMS têm um Editor de Rich Text (RTE) que pode facilitar a correção dos links. Encontre o link na página da web. Selecione o link e use as ferramentas de CMS para adicionar texto. Salve a página.

Visite w3schools para saber mais sobre HTML e CSS

Práticas recomendadas para links

  • O texto do link deve ser significativo. Diga aos visitantes para onde eles estão indo. Descreva o que o usuário pode esperar ver ao selecionar o link.
    • Evite textos como “clique aqui” e “veja mais”. Essas frases não informam aos visitantes o que esperar quando selecionarem o link. Algumas tecnologias assistivas têm uma ferramenta que lista apenas os links na página. Frases como essas perdem o significado quando retiradas do contexto da página e exibidas em uma lista.
    • Evite URLs como o texto do link visível. Uma URL pode não ser descritiva. Os leitores de tela também leem cada letra da URL individualmente, o que pode ser frustrante para esses visitantes.
  • O texto do link deve ser exclusivo. Cada link deve ser exclusivo em relação aos outros links na página. Repetir o texto do link pode ser confuso quando ele for retirado do contexto da página e exibido na ferramenta de lista de links.
  • Os links devem se destacar visualmente. Deve estar claro isso é um link. Se você não gostar do estilo do link, talvez queira atualizar o modelo.

    • Diferencie os links do texto ao redor de uma maneira que não dependa apenas da cor. WCAG 2.1 — 1.4.1

      Geralmente, a aparência do link é definida no guia de estilo de um site e pode refletir a configuração temática. Antes de fazer qualquer alteração, verifique o guia de estilo do site e consulte o administrador do site.

  • Diga aos usuários se o link abre em uma nova janela. Abrir links em uma nova janela pode causar desorientação. Diga aos usuários quando for enviá-los para uma nova janela ou aba.
  • Não use uma imagem para representar algo que você pode criar no HTML. Por exemplo: não use uma imagem de um botão em vez de um botão real. Não use uma imagem de tabela em vez de uma tabela criada no código-fonte HTML.

Como as pessoas com deficiência usam links

Os links adequados, que contêm um link e um texto de link significativo, permitem uma experiência muito melhor para todos. Links bem formados são ferramentas poderosas de navegação e deixam claro o que se deve esperar. No entanto, os links apropriados são essenciais para visitantes com deficiências visuais.

Links com texto exclusivo e significativo podem implicar em uma navegação rápida para muitos usuários.

  • Os usuários de leitores de tela não precisam ouvir a página inteira. Eles podem optar por ouvir e interagir com uma lista de links.
  • Os usuários de reconhecimento de fala interagem com os links dizendo o link que querem selecionar em voz alta.

Os links formados adequadamente podem facilitar a visualização e a interação para muitos usuários.

  • Os usuários que não podem usar o mouse usam apenas o teclado para navegar nos elementos da página como os links.
  • Usuários portadores de daltonismo podem não ver a variação das cores, mas identificam um link sublinhado.