Texto alternativo mal escrito é pior do que texto alternativo ausente. "Imagem 1" não ajuda ninguém. "foto_final_v3_USAR_ESSA.jpg" é perturbador. "Homem sorrindo" descreve o visual, não a informação.
Escrever alt correto é uma habilidade — e este guia cobre todos os casos que você vai encontrar.
O que é e por que importa
O atributo alt existe desde a especificação original do HTML. Quando uma imagem não carrega, o alt aparece no lugar. Quando um usuário de leitor de tela encontra uma imagem, o software lê o alt em voz alta. Quando um mecanismo de busca indexa sua página, usa o alt para entender o que a imagem representa.
Critério WCAG: 1.1.1 Conteúdo Não Textual — Nível A. É o segundo erro mais comum na web segundo o WebAIM Million 2024: presente em 55% de todas as páginas analisadas.
A regra geral é: descreva a informação que a imagem transmite, não o que você vê visualmente. Um gráfico não é "gráfico de barras azuis" — é "Vendas do primeiro trimestre cresceram 23% em relação ao ano anterior".
Os 5 tipos de imagem e como tratar cada um
1. Imagem informativa
Transmite informação que não está em outro lugar na página. Precisa de alt descritivo.
<!-- ❌ Descreve o visual, não a informação -->
<img src="equipe.jpg" alt="Foto da equipe">
<!-- ✅ Descreve quem são as pessoas e o contexto -->
<img src="equipe.jpg" alt="Equipe de desenvolvimento do Web para Todos: cinco pessoas em frente a um quadro branco com diagramas de fluxo">
<!-- ❌ Captura de tela genérica -->
<img src="resultado-auditoria.png" alt="Screenshot">
<!-- ✅ Descreve o resultado específico da imagem -->
<img src="resultado-auditoria.png" alt="Resultado da auditoria mostrando 12 erros críticos: 8 de contraste e 4 de imagens sem alt">
Dica de comprimento: não há limite oficial, mas 100–150 caracteres são suficientes para a maioria dos casos. Se precisar de mais, considere um longdesc ou descrição expandida no texto da página.
2. Imagem decorativa
Existe apenas por razões visuais — não adiciona informação ao conteúdo. Precisa de alt="" (vazio) e aria-hidden="true" para remover completamente da árvore de acessibilidade.
<!-- ❌ Alt com conteúdo em imagem decorativa — leitor vai ler desnecessariamente -->
<img src="divisor-ondas.svg" alt="Divisor decorativo">
<!-- ✅ Alt vazio + aria-hidden — invisível para tecnologias assistivas -->
<img src="divisor-ondas.svg" alt="" aria-hidden="true">
<!-- ✅ SVG decorativo inline -->
<svg aria-hidden="true" focusable="false">
<!-- paths do ícone decorativo -->
</svg>
Como decidir se é decorativa: remova a imagem mentalmente. O conteúdo da página ainda faz sentido completo? Se sim, é decorativa.
3. Imagem funcional
Uma imagem que é um link ou botão. O alt deve descrever a ação ou o destino, não o conteúdo visual da imagem.
<!-- ❌ Descreve o que é, não o que faz -->
<a href="/"><img src="logo.svg" alt="Logo do Web para Todos"></a>
<!-- ✅ Descreve o destino do link -->
<a href="/"><img src="logo.svg" alt="Web para Todos — Página inicial"></a>
<!-- ❌ Botão com ícone sem nome -->
<button>
<img src="icone-busca.svg" alt="Lupa">
</button>
<!-- ✅ Descreve a ação do botão -->
<button>
<img src="icone-busca.svg" alt="Buscar">
</button>
<!-- ✅ Alternativa: aria-label no botão, alt vazio na imagem -->
<button aria-label="Buscar">
<img src="icone-busca.svg" alt="" aria-hidden="true">
</button>
4. Imagem de texto
Imagem que contém texto (crachás, capturas de tela de texto, títulos como imagem). O alt deve ser o texto exato que aparece na imagem.
<!-- ❌ Alt vago para imagem com texto -->
<img src="badge-wcag-aa.png" alt="Badge de conformidade">
<!-- ✅ Transcreve o texto exato da imagem -->
<img src="badge-wcag-aa.png" alt="WCAG 2.1 AA Conforme">
<!-- ❌ Captura de tela de código sem alt -->
<img src="exemplo-codigo.png">
<!-- ✅ Transcreve o código (ou link para versão acessível) -->
<img
src="exemplo-codigo.png"
alt="button { background: #0048B6; color: white; padding: 12px 24px; border-radius: 8px; }"
>
Recomendação do W3C: sempre que possível, prefira HTML real ao invés de imagens de texto (critério WCAG 1.4.5).
5. Imagem complexa (gráficos e diagramas)
Gráficos, infográficos e diagramas precisam de dois níveis de descrição: um alt curto que identifica o tipo e o assunto, e uma descrição longa acessível no corpo da página ou em link separado.
<!-- ✅ Alt curto identifica o gráfico -->
<figure>
<img
src="grafico-taxa-conformidade.png"
alt="Gráfico de linha: evolução da taxa de conformidade WCAG AA em sites brasileiros entre 2020 e 2024"
aria-describedby="grafico-descricao"
>
<figcaption id="grafico-descricao">
A taxa de conformidade WCAG AA em sites brasileiros subiu de 2,1% em 2020
para 4,1% em 2024, segundo o WebAIM Million. O crescimento foi constante,
com aceleração notável após 2022, possivelmente relacionada a maior
fiscalização da Lei Brasileira de Inclusão.
</figcaption>
</figure>
Para gráficos muito complexos (com muitos dados), forneça a tabela de dados subjacente acessível logo abaixo da imagem.
Usando alt em React/JSX
Em JSX, alt funciona exatamente igual ao HTML. A diferença é que aria-hidden usa camelCase:
// ❌ Sem alt — TypeScript/ESLint vão reclamar
<img src={src} />
// ✅ Alt descritivo
<img src={src} alt="Resultado da análise mostrando 3 erros críticos" />
// ✅ Imagem decorativa em React
<img src={src} alt="" aria-hidden={true} />
// ✅ Alt dinâmico baseado em dados
<img
src={post.coverImage}
alt={post.coverImageAlt ?? `Imagem de capa do artigo: ${post.title}`}
/>
Atenção: nunca use alt={undefined} — isso remove o atributo completamente, fazendo leitores de tela anunciarem o nome do arquivo. Use alt="" para imagens decorativas.
Os erros mais comuns
Alt genérico:
<!-- ❌ Não diz nada -->
<img src="grafico.png" alt="Gráfico">
<img src="icone.svg" alt="Ícone">
<img src="foto.jpg" alt="Foto">
Redundância com o texto ao redor:
<!-- ❌ O texto do parágrafo já diz isso -->
<p>Nossa taxa de aprovação em 2024 foi de 98%.</p>
<img src="medalha.png" alt="Taxa de aprovação de 98% em 2024">
<!-- ✅ Neste caso, alt="" é mais correto -->
<img src="medalha.png" alt="" aria-hidden="true">
Prefixos desnecessários:
<!-- ❌ "imagem de" é redundante — leitor de tela já anuncia que é uma imagem -->
<img src="dog.jpg" alt="Imagem de um cachorro">
<!-- ✅ -->
<img src="dog.jpg" alt="Cachorro labrador dourado brincando no parque">
Nome do arquivo como alt:
<!-- ❌ Acontece quando alt é esquecido e o browser usa o src como fallback -->
<img src="produto_final_USE_ESSA_v2.jpg">
O teste rápido
Para verificar se seu alt está correto, faça este teste mental: substitua a imagem por um span com o texto do alt. A frase resultante faz sentido no contexto da página? A informação da imagem está preservada? Se sim, o alt está correto.
Também é útil ler o alt em voz alta. Se soar estranho ou redundante, reescreva.
Use o Analisador do Web para Todos para identificar imagens sem alt na sua página. Para os casos em que o alt existe mas está incorreto, a avaliação precisa ser manual — ferramentas automáticas não conseguem julgar qualidade semântica.
Critério de referência: WCAG 2.1 — 1.1.1 Conteúdo Não Textual (Nível A) Árvore de decisão do W3C: Alt Decision Tree