Links para leitores de ecrã

A Silktide encontra elementos de ligação com uma estrutura incorreta, de formas que os tornam incompatíveis com tecnologia de apoio — links sem texto legível, links sem destino e etiquetas de link vazias e isoladas deixadas na página.

Para que um link funcione com tecnologia de apoio, precisa de um destino (um atributo href) e de algo legível no seu interior:

<!-- Funciona: destino e texto legível -->
<a href="\/about">Sobre nós</a>

<!-- Funciona: um link de imagem com texto alternativo -->
<a href="\/apple"><img src="apple.png" alt="Apple"></a>

Por que motivo isto é importante

Um leitor de ecrã anuncia cada link pelo seu texto. Um link com um destino, mas sem texto, é anunciado apenas como "link" — o utilizador pode ativá-lo, mas não faz ideia de para onde conduz. Um link com texto, mas sem destino, parece clicável, mas não conduz a lado nenhum. Ambos os padrões quebram o contrato básico que permite às pessoas que utilizam tecnologia de apoio navegar numa página através dos respetivos links.

Como corrigir

1. Para um link com um destino, mas sem texto legível: adicione texto dentro do link ou texto alternativo se este contiver apenas uma imagem.
2. Para um link com texto, mas sem destino: adicione o href em falta ou, se o elemento for realmente um destino para o qual outros links devem saltar, mova o respetivo id para um elemento que não seja um link:

<!-- Âncora de destino antiga, não recomendada em HTML5 -->
<a name="example"></a>

<!-- Preferível: um id num elemento normal -->
<div id="example">...</div>

3. Para etiquetas <a></a> vazias e sem atributos: remova-as, pois não têm qualquer utilidade. Muitas vezes são deixadas por editores ou scripts.
4. Se o elemento for realmente um botão — desencadeia uma ação em vez de navegar — utilize um elemento <button> ou adicione role="button" à etiqueta existente.

Como a Silktide testa isto

1. Encontra todos os elementos <a> na página e lê o respetivo texto (incluindo texto alternativo de imagens e texto adicionado por CSS), o respetivo href e quaisquer atributos id ou name.
2. Assinala três padrões problemáticos:
   • Um link com um href, mas sem texto legível.
   • Um elemento com texto e um id ou name, mas sem href — um destino que se apresenta como link ou um link sem o destino.
   • Uma âncora completamente vazia, sem texto, href, id ou name.
3. Dois padrões não são deliberadamente assinalados:
   • <a> com texto, mas sem href, id ou name — o HTML5 permite isto como um "link de marcador", normalmente preenchido posteriormente por JavaScript.
   • Âncoras vazias com um id ou name, mas sem href — são destinos de salto antigos, não links.

Saiba mais

• Compreender o Critério de Sucesso 4.1.2: Nome, Função, Valor (WCAG 2.2)
• H91: Utilizar controlos de formulário e links HTML (técnica WCAG)
• Objetivo do link
• Link vazio