Escreve texto alternativo com significado

O que esta verificação faz

Percorre cada elemento <img> da página e inspeciona o atributo alt. A verificação falha quando o alt é um dos seguintes: um nome de ficheiro (IMG_2837.jpg, hero-final-v2.png), um marcador genérico (image, picture, photo, img), um único carácter (x, .) ou começa por “Image of” / “Picture of” — a tecnologia de assistência já anuncia o papel como “gráfico”, pelo que prefixar a descrição é apenas ruído redundante.

Esta é a verificação companheira de Texto alternativo das imagens, que apenas verifica a presença. Esta avalia a qualidade.

Porque é importante

Texto alternativo mau prejudica ativamente a experiência.

• Quem usa leitor de ecrã ouve-o em vez de ver a imagem. “IMG underscore dois oito três sete ponto jay-peg” é o pior resultado possível — a tecnologia de assistência lê o nome do ficheiro letra a letra.
• Os motores de busca usam o texto alternativo como sinal de ranking para a pesquisa de imagens. Nomes de ficheiro como alt desperdiçam esse espaço.
• Extratores de IA (LLMs multimodais que analisam uma página) citam o texto alternativo quando descrevem a página. Uma página em que o alt de cada imagem é hero.jpg lê-se como pouco cuidada, tanto para humanos como para IA.

A solução não é “acrescentar mais palavras”. É “descrever a imagem, no contexto, em linguagem simples”.

Como corrigir

Abre cada imagem sinalizada e reescreve o alt para descrever o que a imagem transmite no contexto em que aparece. Mesma imagem, página diferente, alt diferente — é normal.

Imagens decorativas (bordas de logótipo, separadores, padrões de hero) — alt vazio:

<img src="/divider.svg" alt="">

alt="" diz aos leitores de ecrã “salta isto; não transmite significado”. Não omitas o atributo por completo — a ausência de alt faz alguns leitores recorrerem ao anúncio do nome do ficheiro.

Imagens informativas — descreve a função ou o conteúdo:

<!-- Mau -->
<img src="/charts/q3.png" alt="chart">
<img src="/team/jane.jpg" alt="IMG_2837.jpg">
<img src="/screenshot.png" alt="Image of the dashboard">

<!-- Bom -->
<img src="/charts/q3.png" alt="Receita do Q3 sobe 38% face ao Q2, impulsionada pelo escalão enterprise">
<img src="/team/jane.jpg" alt="Jane Patel, CTO">
<img src="/screenshot.png" alt="Painel do MetricSpot a mostrar cinco verificações aprovadas">

Imagens ligadas — descreve o destino da ligação, não a imagem:

<a href="/docs/">
  <img src="/icons/book.svg" alt="Documentação">
</a>

Imagens complexas (gráficos, infografias) — descreve os dados e liga para fora:

<img src="/q3-funnel.png" alt="Funil de conversão: 1000 visitas → 230 registos → 28 pagantes (2,8%).">
<a href="/q3-funnel-full.txt">Tabela de dados completa</a>

Padrões em CMS / frameworks.

• WordPress — Biblioteca de Multimédia → clica em qualquer imagem → campo “Texto alternativo”. Audita posts existentes em Ferramentas → Saúde do Site → Imagens sem texto alternativo.
• Astro / Next.js Image — <Image alt={...} /> é obrigatório ao nível do tipo; o TypeScript recusa fazer build sem ele.
• React — escreve uma pequena regra de lint (jsx-a11y/alt-text de eslint-plugin-jsx-a11y) e falha o CI em alts em falta ou semelhantes a nomes de ficheiro.

Audita por ti. Abre a consola do DevTools e corre:

[...document.images]
  .filter(i => !i.alt || /^(image|img|picture|photo|\.|x)$/i.test(i.alt.trim()) || /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(i.alt))
  .map(i => i.src);

Tudo o que aparecer na lista resultante é um alt inútil.

Perguntas frequentes

Todas as imagens devem ter texto alternativo?

Sim, mas pode ser vazio (alt="") nas decorativas. O atributo em si tem de estar presente — a ausência é o que as ferramentas sinalizam como violação.

Que tamanho deve ter o texto alternativo?

Tão longo quanto precisa, tão curto quanto possível. Uma frase é o típico; um gráfico pode precisar de duas. Evita o “limite” de 125 caracteres que possas ver citado — é um rumor sobre buffer de leitor de ecrã, não uma restrição real.

Devo incluir a palavra “imagem”?

Não. Os leitores de ecrã já anunciam o papel (“gráfico”). Dizer “Imagem de um cão” faz o leitor dizer “gráfico, imagem de um cão”. Escreve apenas “Cachorro golden retriever a roer um sapato”.