Texto alternativo das imagens

O que esta verificação faz

Conta os elementos <img> e quantos têm um atributo alt não vazio. Reporta o rácio.

Porque é importante

O texto alternativo serve três públicos:

• Leitores de ecrã leem o alt em voz alta a utilizadores cegos e com baixa visão. Sem ele, o utilizador ouve “imagem” ou o nome do ficheiro — inútil. Isto também é exigido por lei na UE pela Lei da Acessibilidade (junho 2025).
• Google Images ordena imagens em parte com base no texto alternativo. Um alt bem escrito é um dos sinais mais fortes para visibilidade na pesquisa de imagens.
• Crawlers de IA não conseguem (ainda) compreender com fiabilidade o conteúdo das imagens. Dependem do alt para saberem o que a imagem mostra.

Há ainda um quarto público: quando uma imagem não consegue carregar, o alt é o que o utilizador vê em vez de um ícone de imagem partida.

Como corrigir

Adiciona um alt descritivo a cada imagem significativa:

<img src="/hero.webp" alt="Relatório de auditoria MetricSpot a mostrar 87/100 com detalhe por módulo" />

Regras:

• Descreve o que está na imagem, não “imagem de”. Os leitores de ecrã já anunciam “imagem”.
• Sê específico. alt="relatorio" não serve. alt="Relatório PDF do MetricSpot com pontuação 87" é útil.
• Salta o keyword stuffing. Não escrevas alt="auditoria SEO ferramenta SEO relatório SEO". O Google penaliza isto e os leitores de ecrã detestam.
• Para imagens decorativas, usa alt="" (vazio, não ausente). Os leitores de ecrã saltam alts vazios. Aplica-se a padrões de fundo, ícones de separadores, etc.

Ajudas das frameworks:

• <Image> do Next.js: o alt é uma prop obrigatória.
• MDX/Markdown: o alt está entre os parênteses retos — ![este é o alt](imagem.jpg).

Perguntas frequentes

E os logótipos?

Logótipos que também são links (ex. logótipo no cabeçalho que liga à home) devem descrever o destino: alt="Início do MetricSpot" ou alt="MetricSpot". Logótipos isolados num rodapé podem usar alt="Logótipo do MetricSpot".

Devo adicionar alt a imagens de fundo em CSS?

As imagens de fundo CSS não são acessíveis aos leitores de ecrã. Se a imagem transmite informação, usa um <img> com alt. Se for puramente decorativa, fundo CSS está bem.

O atributo title é substituto?

Não. O title aparece como tooltip ao passar com o rato, mas é ignorado pela maior parte dos leitores de ecrã e por muitos dispositivos táteis. Usa sempre alt.