Links com destinos diferentes
A Silktide encontra links numa página que partilham o mesmo texto, mas apontam para destinos diferentes. Quando dois links visualmente idênticos conduzem a locais diferentes, as pessoas não conseguem distingui-los sem seguir cada um deles.
<!-- Dois links "Notícias" que conduzem a páginas diferentes -->
<p>Saiba as últimas novidades sobre os nossos produtos: <a href="/products/news">Notícias</a></p>
<p>Saiba as últimas novidades sobre os nossos serviços: <a href="/company/news">Notícias</a></p>
Porque isto é importante
As pessoas que utilizam um frequentemente abrem uma lista de todos os links da página, fora do contexto. Dois links que são ambos anunciados como "Notícias", mas que conduzem a páginas diferentes, são indistinguíveis nessa lista, pelo que o utilizador tem de abrir cada um para descobrir para onde conduz. A mesma ambiguidade afeta os utilizadores de reconhecimento de voz, que selecionam links dizendo o respetivo nome em voz alta.
Como corrigir
- Dê a cada link um texto visível distinto que descreva o seu destino, como "Notícias de produtos" e "Notícias da empresa".
- Se o design não puder ser alterado, adicione uma etiqueta para distinguir os links sem alterar o que os utilizadores que veem o ecrã visualizam:
<!-- O aria-label torna-se o nome anunciado pelos leitores de ecrã -->
<a href="/products/news" aria-label="Notícias de produtos">Notícias</a>
<a href="/company/news" aria-label="Notícias da empresa">Notícias</a>
- Em alternativa, inclua texto adicional dentro do link que fique visualmente oculto, mas seja lido pelos leitores de ecrã (por exemplo, um
<span>estilizado com uma classe CSS exclusiva para leitores de ecrã). - Se os links forem funcionalmente equivalentes para o utilizador — por exemplo, se redirecionarem para a mesma página — o resultado.
Como a Silktide testa isto
- Encontra todos os links na página, ignorando quaisquer elementos que tenha excluído da verificação.
- Determina o de cada link — o texto que a anuncia, incluindo etiquetas ARIA e de imagens, e não apenas o texto visível.
- Normaliza o destino de cada link para comparação: os fragmentos (a parte depois de
#), as cadeias de consulta (a parte depois de?), o esquema do URL e as barras finais são ignorados. - Quando links com o mesmo nome acessível apontam para mais do que um destino distinto, assinala todos eles.
Resolução de problemas
Links para diferentes secções da mesma página não são assinalados
Como os fragmentos são ignorados ao comparar destinos, links como /guide#intro e /guide#pricing são considerados o mesmo destino. Isto é intencional: ambos conduzem à mesma página.
Links que diferem apenas nos parâmetros de rastreamento não são assinalados
As cadeias de consulta são ignoradas ao comparar destinos, pelo que /offers?src=header e /offers?src=footer são considerados a mesma página, e não destinos diferentes.