Verificador de alt em imagens

Cole uma URL e veja quantas imagens têm alt e quantas ficaram sem.

URL para analisar

A página é buscada pelo servidor do DevTools. Só funciona com URLs públicas.

O que é

O atributo alt é o texto que substitui a imagem quando ela não pode ser vista — por quem usa leitor de tela, por quem está com as imagens desativadas, ou quando o arquivo simplesmente falha ao carregar. Não é legenda nem título: é a descrição que ocupa o lugar da imagem e precisa cumprir a mesma função que ela cumpriria.

Por que importa

Para quem depende de leitor de tela, uma imagem sem alt é anunciada como 'imagem' ou pelo nome do arquivo — e um botão de compra que é imagem sem alt vira um link para 'IMG_4471.jpg'. É acessibilidade antes de tudo, e no Brasil também é conformidade com a LBI. Do lado da busca, o alt é o principal sinal que o Google tem sobre o conteúdo de uma imagem, e é o que decide se ela aparece na busca por imagens — canal relevante para receita, produto e portfólio.

Como corrigir

Descreva a função da imagem naquele contexto, não o arquivo. Em um botão, o alt é a ação: 'Adicionar ao carrinho', não 'ícone de carrinho azul'.
Use alt="" (vazio, mas presente) em imagem puramente decorativa. Assim o leitor de tela a ignora, em vez de anunciar o nome do arquivo. Omitir o atributo não tem o mesmo efeito.
Não comece com 'imagem de' ou 'foto de'. O leitor de tela já anuncia que é uma imagem, e a repetição só atrasa a leitura.
Seja específico e breve: em torno de 125 caracteres. Se a imagem exige um parágrafo, o texto pertence à página, com a imagem apenas ilustrando.
Não empilhe palavras-chave no alt. Além de não funcionar há anos, produz uma leitura sofrível para quem realmente depende do atributo.
Em gráficos e infográficos, coloque o dado no texto da página. Nenhum alt de uma linha substitui uma tabela que qualquer pessoa consegue ler.

Alt por função, não por aparência

<!-- Decorativa: alt vazio, mas presente -->
<img src="/ornamento.svg" alt="">

<!-- Informativa: descreve o conteúdo -->
<img src="/grafico.png" alt="Vendas cresceram de 120 para 340 unidades entre janeiro e junho">

<!-- Funcional: descreve a ação, não o desenho -->
<a href="/carrinho"><img src="/icone-carrinho.svg" alt="Ver carrinho"></a>

Perguntas frequentes

Toda imagem precisa de alt?: Todo elemento <img> precisa do atributo, mas nem todo alt precisa de texto. Imagem que carrega informação recebe descrição; imagem decorativa recebe alt="" para ser ignorada pelo leitor de tela. O que não pode é o atributo estar ausente.
Qual a diferença entre alt e title na imagem?: O alt substitui a imagem para quem não a vê e é lido por leitores de tela. O title mostra um balão ao passar o mouse, não aparece em dispositivo de toque e não é anunciado de forma confiável. Para acessibilidade, o que conta é o alt.
Colocar palavras-chave no alt ajuda no ranqueamento?: Não. O Google trata acúmulo de palavras-chave no alt como spam desde muito antes das atualizações recentes. O que ajuda é a descrição honesta do que a imagem mostra — que por consequência natural contém os termos certos.
Imagem inserida por CSS precisa de alt?: Não tem como ter: background-image não aceita alt. Justamente por isso, imagem que carrega informação deve ir no HTML como <img>. Reserve o CSS para o que é de fato decoração.

Outras checagens

Ferramentas relacionadas

Verificador de contraste — outro item de acessibilidade que costuma passar batido
Validador de SEO completo — alt junto com dimensões e lazy loading
Todas as checagens de SEO

O que é

Por que importa

Como corrigir

Descreva a função da imagem naquele contexto, não o arquivo. Em um botão, o alt é a ação: 'Adicionar ao carrinho', não 'ícone de carrinho azul'.

Use alt="" (vazio, mas presente) em imagem puramente decorativa. Assim o leitor de tela a ignora, em vez de anunciar o nome do arquivo. Omitir o atributo não tem o mesmo efeito.

Não comece com 'imagem de' ou 'foto de'. O leitor de tela já anuncia que é uma imagem, e a repetição só atrasa a leitura.

Seja específico e breve: em torno de 125 caracteres. Se a imagem exige um parágrafo, o texto pertence à página, com a imagem apenas ilustrando.

Não empilhe palavras-chave no alt. Além de não funcionar há anos, produz uma leitura sofrível para quem realmente depende do atributo.

Em gráficos e infográficos, coloque o dado no texto da página. Nenhum alt de uma linha substitui uma tabela que qualquer pessoa consegue ler.

Alt por função, não por aparência

 <img src="/ornamento.svg" alt="">  <img src="/grafico.png" alt="Vendas cresceram de 120 para 340 unidades entre janeiro e junho">  <a href="/carrinho"><img src="/icone-carrinho.svg" alt="Ver carrinho"></a>

Perguntas frequentes

Toda imagem precisa de alt?

Todo elemento <img> precisa do atributo, mas nem todo alt precisa de texto. Imagem que carrega informação recebe descrição; imagem decorativa recebe alt="" para ser ignorada pelo leitor de tela. O que não pode é o atributo estar ausente.

Qual a diferença entre alt e title na imagem?

O alt substitui a imagem para quem não a vê e é lido por leitores de tela. O title mostra um balão ao passar o mouse, não aparece em dispositivo de toque e não é anunciado de forma confiável. Para acessibilidade, o que conta é o alt.

Colocar palavras-chave no alt ajuda no ranqueamento?

Não. O Google trata acúmulo de palavras-chave no alt como spam desde muito antes das atualizações recentes. O que ajuda é a descrição honesta do que a imagem mostra — que por consequência natural contém os termos certos.

Imagem inserida por CSS precisa de alt?

Não tem como ter: background-image não aceita alt. Justamente por isso, imagem que carrega informação deve ir no HTML como <img>. Reserve o CSS para o que é de fato decoração.