Texto alternativo de imagem em link

A Silktide encontra links que contêm uma imagem, mas nenhum texto legível de qualquer tipo. Esse link não tem um nome, por isso as pessoas que não conseguem ver a imagem não têm como saber para onde ele leva.

<!-- Problema: o link não tem um nome acessível -->
<a href="/apple">
    <img src="apple.png">
</a>

<!-- Corrigido: o texto alternativo identifica o link -->
<a href="/apple">
    <img src="apple.png" alt="Uma maçã vermelha">
</a>

Por que isso é importante

Quando o único conteúdo de um link é uma imagem, o da imagem torna-se o nome do link. Sem ele, um anuncia algo como "link" ou recorre à leitura do URL de destino ou do nome do ficheiro da imagem — nada disso informa o ouvinte para onde o link leva. A navegação construída com links de imagem, como logótipos e menus de ícones, torna-se uma questão de adivinhação.

Os utilizadores de teclado e de controlo por voz também são afetados: um link sem nome é difícil de selecionar com comandos de voz e não tem significado numa lista de links.

Como corrigir

Adicione texto alternativo à imagem que descreva a finalidade do link — para onde ele leva ou o que faz — em vez de descrever a aparência da imagem. Para um logótipo com link, "Início" ou o nome da sua organização é melhor do que "logótipo".
Em alternativa, adicione texto visível dentro do link, ao lado da imagem; nesse caso, a imagem pode ter um alt="" vazio.
Corrija os modelos no seu onde o mesmo link de ícone sem rótulo se repete em várias páginas.

Como a Silktide testa isto

Encontra todas as imagens que estão dentro de um link, ignorando os links ocultos para leitores de ecrã.
Lê todo o texto que o link expõe à , incluindo o texto alternativo de tudo o que está dentro dele.
Comunica a imagem quando esse texto combinado não contém letras nem números, deixando o link sem um nome utilizável.

Ao contrário de outras verificações de texto alternativo, um alt="" vazio não é aprovado aqui: se a imagem for o único conteúdo do link, marcá-la como decorativa deixa o link sem nome.

Resolução de problemas

A imagem é decorativa

Dentro de um link sem outro texto, uma imagem não pode ser tratada como puramente — algo tem de identificar o link. Dê à imagem um texto alternativo que descreva o destino ou adicione texto visível ao link.

O link tem um rótulo de outra forma

Esta verificação lê o texto e o texto alternativo dentro do link. Se o seu link tiver um nome atribuído por outros meios e tiver verificado que ele é anunciado corretamente por um leitor de ecrã, pode o resultado.