O que verificamos
Lemos as tags <img> no HTML. Separamos imagens com texto, com alt="" e sem atributo alt. A ausência do atributo gera aviso.
Não baixamos as imagens nem criamos descrições a partir do nome do arquivo.
Como escrever o alt
Descreva a informação que a imagem transmite. Em uma imagem que funciona como link, explique o destino ou a ação. Para decoração sem informação, use alt="".
Imagens de fundo em CSS não entram na contagem. Mantenha a informação necessária também no documento.
Para que serve o texto alternativo
O texto pode ser apresentado quando a imagem não carrega e usado por tecnologias assistivas. Ele deve transmitir a função ou a informação da imagem.
O alt vazio informa que a imagem pode ser ignorada nessa leitura. A ferramenta distingue essa decisão da ausência do atributo.
Erros comuns
Omitir o atributo, usar um nome de arquivo como descrição, repetir uma descrição longa de produto ou tratar um gráfico informativo como decoração.
Exemplo de imagem informativa e imagem decorativa
Antes
<img src="/img/report-q3.png">
<!-- sem alt: img_alt_missing (aviso) -->Depois
<img src="/img/report-q3.png" alt="Receita do terceiro trimestre cresceu 12% sobre o anterior">
<img src="/img/divider.svg" alt="">O gráfico fornece sua informação principal. O separador é declarado decorativo. Os dados do gráfico são apenas ilustrativos.
Perguntas
A ferramenta certifica acessibilidade?
Não. Ela conta atributos no HTML. A qualidade do texto e o uso completo da página exigem revisão própria.
Quando alt vazio está correto?
Quando a imagem é decorativa ou não acrescenta informação necessária. O atributo deve estar presente e vazio.
A ferramenta analisa os arquivos de imagem?
Não. Ela lê as tags <img>. Não verifica pixels, formato ou adequação visual da descrição.