Links com texto discernível ausente
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 assegurar 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 devem ter um texto discernível que informe aos visitantes para o qual estão sendo direcionados.
O que significa um texto discernível?
Os links geralmente têm duas informações:
URL: Endereço web para o qual o link envia os visitantes quando eles o selecionam.
Exibir texto: Texto visível que informa aos visitantes o que esperar encontrar ao clicarem no link
No código-fonte HTML, o link de práticas recomendadas é assim: <a href="#best-practices">Práticas recomendadas para links</a>
Quando o texto exibido ou o texto entre as tags <a>, está faltando o link de 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.
O Ally ajuda a identificar quando há texto ausente nos links e explica como corrigi-los. O Ally faz estas verificações:
Existe texto entre as tags do hiperlink
<a>?O texto entre as tags
<a>está escondido?As imagens utilizadas 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 no 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.
Dica
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. Clique nos problemas de links sem texto discernível.
Dica
Se você começar pela guia Visão geral, clique no problema e em seguida no domínio com o problema.
Na lista de problemas no domínio, clique no indicador de pontuação ao lado de um item com o problema. O painel de comentários do editor de conteúdo se abre.
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 que ponto 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 do seu documento.
Navegue pela visualização do documento página por página.
Veja quantas vezes um problema específico é exibido 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, baixe o arquivo original.
Siga as etapas orientadas do Ally para adicionar texto ao link
Importante
O Ally pressupõe que você tenha conhecimento básico de HTML e de como utilizar o sistema de gerenciamento de conteúdo (CMS). Para seguir as etapas orientadas, 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.
Clique em Como corrigir o texto do link para seguir as etapas orientadas.
Maneiras de adicionar o texto aos links
Há mais de uma maneira de corrigir o texto do link nas páginas da web.
HTML: Os passos orientados do Ally guiam o usuário sobre como encontrar e corrigir texto de link em HTML. Basicamente, encontre a página da web com o link. Edite a página. No código HTML, adicione texto entre as tags
<a>. Salve a página.RTE: Alguns CMS têm um Editor de Rich Text (RTE) que pode oferecer maneiras amigáveis para você corrigir links. Encontre o link na página da web. Clique no link e use as ferramentas de CMS para adicionar texto. Salve a página.
Dica
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 ver ao clicar no link.
Evite textos como “clique aqui” e “veja mais”. Essas frases não informam aos visitantes o que esperar quando clicarem no 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
Importante
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 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 utilizar 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.