Verificação HTML: Um elemento "img" deve ter um atributo "alt", exceto em certas condições. Para detalhes, consulte as orientações sobre como fornecer alternativas de texto para imagens.

Sobre este problema HTML

O atributo alt é uma das funcionalidades de acessibilidade mais importantes em HTML. Quando um leitor de ecrã encontra um elemento <img>, lê o texto alt em voz alta para que utilizadores com deficiência visual compreendam o conteúdo e propósito da imagem. Sem ele, os leitores de ecrã podem recorrer a ler o nome do ficheiro (por exemplo, “DSC underscore 0042 dot jpeg”), o que é sem sentido e confuso. Os motores de busca também usam texto alt para compreender e indexar conteúdo de imagens, pelo que incluí-lo também beneficia o SEO.

A especificação HTML requer o atributo alt em todos os elementos <img>, com apenas exceções restritas (como quando o papel da imagem é explicitamente sobreposto via certos atributos ARIA, ou quando a imagem está dentro de um <figure> com um <figcaption> que a descreve completamente—embora mesmo assim, incluir alt seja fortemente recomendado).

Como escolher o texto `alt` certo

O valor do atributo alt depende do propósito da imagem:

Imagens informativas — Descreva o conteúdo de forma concisa. Por exemplo, uma foto de um produto deve descrever o produto.
Imagens funcionais — Descreva a ação ou destino, não a imagem em si. Por exemplo, um ícone de pesquisa usado como botão deve ter alt="Pesquisar", não alt="Lupa".
Imagens decorativas — Use um atributo alt vazio (alt=""). Isto diz aos leitores de ecrã para ignorar completamente a imagem. Não omita o atributo—use uma string vazia.
Imagens complexas (gráficos, diagramas) — Forneça um resumo breve em alt e uma descrição mais longa noutro local da página ou através de um link.

Exemplos

❌ Atributo `alt` em falta

Isto despoleta o erro de validação W3C:

<img src="photo.jpg">

Um leitor de ecrã não tem informação útil para transmitir, e o validador sinaliza isto como um erro.

✅ Imagem informativa com `alt` descritivo

<img src="photo.jpg" alt="Pessoa a segurar um gato ruivo malhado num jardim ensolarado">

O texto alt descreve o que a imagem mostra, dando aos utilizadores de leitores de ecrã contexto significativo.

✅ Imagem decorativa com `alt` vazio

<img src="decorative-border.png" alt="">

Quando uma imagem é puramente decorativa e não adiciona informação, um atributo alt vazio diz à tecnologia assistiva para ignorá-la. Isto é válido e preferível a omitir o atributo.

✅ Imagem funcional dentro de um link

<a href="/home">
  <img src="logo.svg" alt="Acme Corp — Ir para página inicial">
</a>

Como a imagem é o único conteúdo dentro do link, o texto alt deve descrever o propósito do link.

✅ Imagem dentro de um `<figure>` com `<figcaption>`

<figure>
  <img src="chart.png" alt="Gráfico de barras mostrando crescimento de receita trimestral de Q1 a Q4 2024">
  <figcaption>Crescimento de receita trimestral para o ano fiscal 2024.</figcaption>
</figure>

Mesmo quando um <figcaption> está presente, incluir um atributo alt descritivo é uma boa prática. O alt deve descrever a imagem em si, enquanto o <figcaption> fornece contexto adicional visível a todos os utilizadores.

Erros comuns a evitar

Não comece com “Imagem de” ou “Foto de” — Os leitores de ecrã já anunciam o elemento como uma imagem. Escreva alt="Golden retriever a brincar às buscas", não alt="Imagem de um golden retriever a brincar às buscas".
Não use o nome do ficheiro — alt="IMG_4392.jpg" não é útil.
Não duplique texto circundante — Se o texto ao lado da imagem já a descreve, use alt="" para evitar redundância.
Não omita alt pensando que é opcional — Um atributo alt em falta e alt="" são fundamentalmente diferentes. Em falta significa que o leitor de ecrã pode anunciar o caminho do ficheiro; vazio significa que o leitor de ecrã intencionalmente ignora a imagem.