Texto alternativo: quando o alt fica vazio e quando ele precisa contar o fato

Ligue o leitor de tela num post qualquer do blog e escute: "Backup de MySQL que restaura, cabeçalho nível 1. Imagem, Backup de MySQL que restaura." O título, e logo depois o mesmo título como descrição da capa. Mais abaixo, o gráfico que mostra o tempo de restauração caindo de 40 para 6 minutos é anunciado como "Imagem, gráfico". A pessoa ouviu tudo dobrado e não ficou sabendo o único número que a imagem trazia. A resposta curta: o alt descreve o que a imagem acrescenta ao texto, não o que ela é. Capa que só ilustra o título recebe alt="". Gráfico com número recebe o número. Imagem dentro de link recebe o destino do link.

A pergunta para cada imagem é uma só: se ela sumisse, o que a pessoa perderia? Se nada, o alt é vazio. Se alguma coisa, o alt é essa coisa, em poucas palavras.

Por que repetir o título atrapalha

Quem enxerga passa o olho pela capa em meio segundo e segue. Quem ouve recebe tudo em sequência, na velocidade da fala. Um alt que repete o texto ao lado custa alguns segundos por imagem e não entrega nada. Numa lista de vinte artigos, são vinte títulos dobrados, e o efeito se soma ao problema dos links repetidos descrito em um link por card.

O leitor de tela já anuncia que se trata de uma imagem, então "imagem de" ou "foto de" no começo do alt é redundância. E alt cheio de palavras-chave para busca é pior: a pessoa ouve uma lista de termos, e o próprio Google orienta escrever texto descritivo em vez de encher o atributo.

Há uma diferença importante entre alt="" e não ter alt. Com o atributo vazio, a imagem é tratada como decorativa e pulada. Sem o atributo, muitos leitores de tela tentam ajudar e leem o nome do arquivo: "IMG underline 20261015 underline final ponto webp".

Como decidir o alt de cada imagem

1. A imagem é só decoração ou repete o texto vizinho? alt="". Vale para capa de artigo ao lado do título, ícone ao lado de um rótulo escrito, ornamentos.
2. A imagem é o único conteúdo de um link ou botão? O alt diz o destino ou a ação, não a aparência. O logo no topo vira "DevBras, página inicial".
3. A imagem traz informação que o texto não traz? O alt conta essa informação: o número do gráfico, o que aparece na tela capturada, o detalhe do produto.
4. A informação é longa demais para uma frase? Alt curto identificando a imagem e o conteúdo completo no texto ao lado ou numa legenda.
5. A imagem contém texto? O alt repete o texto da imagem, a menos que ele já esteja escrito na página.
6. Escreva como você contaria por telefone: direto, sem "imagem de", em uma ou duas frases.

O post do backup, imagem por imagem

<!-- Capa: ilustra o título, não acrescenta nada -->
<img src="/capas/backup-mysql.webp" alt="" width="1200" height="630">

<!-- Logo linkado: o alt é o destino -->
<a href="/"><img src="/logo.svg" alt="DevBras, página inicial" width="140" height="32"></a>

<!-- Gráfico: o alt conta o resultado -->
<figure>
  <img src="/posts/restauracao.webp"
       alt="Gráfico de barras: a restauração caiu de 40 minutos para 6 depois de trocar o dump por backup físico."
       width="800" height="450">
  <figcaption>Tempo de restauração do banco de 30 GB, média de cinco testes.</figcaption>
</figure>

<!-- Captura de tela com o comando: o texto importante vai no alt -->
<img src="/posts/erro-restore.webp"
     alt="Terminal mostrando o erro: Unknown collation utf8mb4_0900_ai_ci, na linha 34 do dump."
     width="800" height="220">

Na capa, o título acima já diz tudo. No logo, a pessoa precisa saber para onde o link leva, não que o logo é azul. No gráfico, o alt entrega a conclusão e a legenda dá o contexto da medição, visível para todos. Na captura de tela, a mensagem de erro é o que alguém procuraria; melhor ainda seria colocar o erro como texto na página, onde também pode ser copiado.

Gráfico com muitos dados

Se o gráfico tem doze meses de dados e cada um importa, não tente colocar tudo no alt. Escreva um alt curto ("Gráfico de linha da latência mensal de 2026; os valores estão na lista abaixo") e coloque os números numa lista ou tabela logo depois. Assim quem enxerga também ganha os números exatos, e ninguém depende de ler barra por barra.

O mesmo contexto muda o alt

A mesma foto pode pedir alts diferentes conforme onde aparece. A foto de uma placa Arduino com um relé na capa de um post cujo título é "Relé no Arduino" é decoração. A mesma foto no meio do passo a passo, mostrando em qual borne o fio vermelho entra, é informação: "O fio vermelho entra no borne marcado NO, à direita do relé". Por isso o alt não deve ser um campo fixo da imagem na biblioteca de mídia; ele depende do uso.

No CMS, ofereça o campo de alt na hora de inserir a imagem no texto, com uma opção explícita de "imagem decorativa" que grava alt="". Sem essa opção, as pessoas repetem o título só para o campo não ficar vazio. Imagens de fundo via CSS não são anunciadas por leitores de tela, então nunca coloque nelas algo que a pessoa precise saber. Para evitar que a página pule enquanto as imagens carregam, veja largura e altura na imagem.

Como testar ouvindo

No Windows, o NVDA é gratuito; no macOS, o VoiceOver já vem instalado e liga com Command + F5. Abra a página, feche os olhos e deixe o leitor percorrer o conteúdo. Repare em três coisas: alguma imagem repetiu o texto que você acabou de ouvir? Alguma leu um nome de arquivo? Alguma imagem com informação foi pulada? Sem leitor de tela, o painel de acessibilidade das ferramentas do desenvolvedor do navegador mostra o nome calculado de cada elemento.

Erros comuns

• Alt igual ao título ao lado. A pessoa ouve o mesmo texto duas vezes e não aprende nada sobre a imagem.
• Imagem sem o atributo alt. O leitor de tela pode anunciar o nome do arquivo.
• Começar com "imagem de". O leitor já disse que é imagem; a pessoa ouve isso duas vezes.
• Alt descrevendo a aparência de um ícone linkado. "Lupa" no lugar de "Buscar" deixa a pessoa adivinhando o que o link faz.
• Gráfico com alt genérico. "Gráfico de vendas" esconde justamente o número que motivou o gráfico.
• Encher o alt de palavras-chave. Atrapalha quem ouve e não é o que os buscadores pedem.

Checklist

• Toda imagem tem o atributo alt, mesmo que vazio.
• Capas e ilustrações que repetem o texto têm alt="".
• Imagens que são o único conteúdo de um link dizem o destino.
• Gráficos dizem a conclusão no alt e os dados no texto.
• Capturas de tela com texto importante trazem esse texto no alt ou na página.
• Nenhum alt começa com "imagem de" ou "foto de".
• O CMS tem opção explícita para marcar imagem como decorativa.

Abra o seu post mais recente com o leitor de tela ligado e conte: quantas imagens acrescentaram uma informação que o texto não tinha, e quantas só ecoaram o que você acabou de ouvir?