Texto alternativo ausente

A Silktide encontra imagens nas suas páginas que não têm qualquer texto alternativo. O texto alternativo é a descrição escrita lida em voz alta em vez de uma imagem, por isso as imagens sem esse texto não têm significado para pessoas que não conseguem vê-las.

<!-- Problema: nenhum atributo alt -->
<img src="apple.png">

<!-- Corrigido: texto alternativo descritivo -->
<img src="apple.png" alt="Uma maçã vermelha">

<!-- Também válido: explicitamente decorativa -->
<img src="decorative-swirl.png" alt="">

Por que isso é importante

Um não tem nada para anunciar no caso de uma imagem sem — na melhor das hipóteses, lê o nome do arquivo, que raramente é útil e muitas vezes é confuso. Pessoas cegas ou com baixa visão perdem qualquer informação transmitida pela imagem e, se a imagem for um gráfico, um botão ou um link, talvez não consigam usar a página de forma alguma.

O texto alternativo também aparece quando as imagens não carregam e ajuda os mecanismos de pesquisa a entender as suas imagens, por isso corrigir esse problema beneficia todos os visitantes.

Como corrigir

Adicione texto alternativo a cada imagem no seu — a maioria tem um campo para isso sempre que você insere uma imagem. No código, use o atributo alt, como mostrado acima.
Descreva as informações ou a finalidade da imagem, não a sua aparência. Para uma imagem que funciona como um link ou botão, descreva para onde ela leva ou o que faz.
Se a imagem for puramente , use um alt="" vazio para que os leitores de tela a ignorem. Não invente texto de preenchimento — ouvir “elemento gráfico decorativo em espiral” é pior do que não ouvir nada.

A WebAIM publica um guia completo para escrever texto alternativo.

Como a Silktide faz esta verificação

Encontra todas as imagens em cada página.
Ignora imagens que não precisam de texto alternativo: imagens sem fonte, imagens com 1 pixel ou menos (geralmente pixels de rastreamento) e imagens ocultas dos leitores de tela.
Ignora imagens marcadas como decorativas com um atributo role="presentation", pois elas ficam deliberadamente ocultas da .
Indica cada imagem restante que não tem nenhum atributo alt.

Uma imagem com um alt="" vazio passa nesta verificação, mas é abrangida por Imagens decorativas, que pede para confirmar que ela é realmente decorativa. O texto alternativo existente, mas pouco útil, é abrangido por Texto alternativo fraco.

Solução de problemas

A imagem é decorativa, então por que ela foi sinalizada?

Uma imagem só é tratada como decorativa quando isso é indicado no código, por meio de um alt="" vazio ou de role="presentation". Uma imagem sem qualquer atributo alt é ambígua — a tecnologia assistiva não consegue distinguir entre “decorativa” e “esquecida” —, por isso ela não passa nesta verificação. Adicione o atributo vazio para deixar a intenção explícita.

A imagem vem de um serviço de terceiros

Imagens geradas por serviços incorporados, como mapas, podem não ser editáveis por você. As configurações do seu site podem excluir conteúdo de terceiros desta verificação, ou você pode descobertas individuais que não consegue alterar.