Texto alternativo duplicado
O Silktide encontra imagens vinculadas cujo texto alternativo repete o texto logo ao lado delas. Quando uma imagem e o texto vizinho dizem a mesma coisa, as pessoas que usam um leitor de tela ouvem as mesmas palavras duas vezes.
<!-- Problema: anunciado como "Apple Apple" -->
<a href="/apple">
<img src="apple.png" alt="Apple">
Apple
</a>
<!-- Corrigido: alt vazio; apenas o texto nomeia o link -->
<a href="/apple">
<img src="apple.png" alt="">
Apple
</a>
Por que isso é importante
O existe para substituir uma imagem para as pessoas que não podem vê-la. Quando as mesmas palavras já aparecem ao lado da imagem, o texto alternativo não acrescenta nada — um anuncia "Apple Apple", o que soa errado e torna a audição mais lenta sem nenhum benefício. Em uma página com vários cards de produtos ou chamadas de notícias, a repetição se torna realmente cansativa.
Uma imagem cujo significado é totalmente transmitido pelo texto adjacente é, na prática, e deve ser marcada como tal.
Como corrigir
- Dê à imagem um
alt=""vazio para que a a ignore e leia apenas o texto adjacente, como no exemplo acima. - Como alternativa, oculte a imagem com
aria-hidden="true"— útil quando o seu insiste em preencher o atributoalt. - Se a imagem e o texto forem dois links separados para o mesmo destino, combine-os primeiro em um único link — consulte Links adjacentes.
Como o Silktide faz a verificação
- Encontra todas as imagens que estão dentro de um link.
- Lê o texto da imagem para tecnologias assistivas: seu atributo
altou umaria-label. - Compara-o com o texto visível dos elementos imediatamente anteriores e posteriores à imagem.
- Relata a imagem quando os dois textos correspondem exatamente, ignorando maiúsculas e minúsculas.
Solução de problemas
O texto correspondente não faz parte do link
A comparação considera os vizinhos imediatos da imagem, que podem incluir texto localizado logo fora do link. A duplicação ainda é real para uma pessoa que usa um leitor de tela e percorre a página, portanto as mesmas correções se aplicam.
Os textos diferem ligeiramente
Apenas correspondências exatas, ignorando maiúsculas e minúsculas, são relatadas. Quase duplicatas, como "Apple" ao lado de alt="Apple logo", passam nesta verificação, mas considere se o texto alternativo ainda acrescenta algo para quem ouve o conteúdo.