Texto alternativo de imagens: quando e como
Escreva textos alternativos que transmitam o significado de imagens não decorativas.
Texto alternativo de imagens: quando e como é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
O que é o texto alt?
O atributo alt fornece um texto alternativo para as imagens:
- Lido pelos leitores de tela em vez da imagem
- Exibido quando a imagem não é carregada
- Indexado pelos mecanismos de busca
- Obrigatório para a conformidade com a WCAG
A regra de ouro
O texto alt deve transmitir as mesmas informações ou a mesma função que a imagem transmitiria a um usuário vidente:
<!-- The test: if you removed this image,
would the alt text give you the same information? -->
<!-- BAD: not descriptive -->
<img src="chart.png" alt="Chart">
<!-- GOOD: conveys the information -->
<img src="chart.png" alt="Bar chart showing 48% revenue increase from Q1 to Q4 2024">Imagens informativas
Imagens que transmitem informações: descreva o conteúdo:
<img
src="signup-flow.png"
alt="Five-step signup flow: Email → Profile → Plan → Payment → Confirmation"
>
<!-- Describe what the image shows, not what it is -->
<!-- BAD: 'Image of a graph' -->
<!-- GOOD: 'Line graph showing download growth from 10k to 150k per month' -->Imagens decorativas: alt vazio
Imagens puramente decorativas devem ter um alt vazio para serem ignoradas:
<!-- Decorative separator -->
<img src="divider.png" alt="">
<!-- Icon beside text that already describes it -->
<img src="warning-icon.svg" alt=""> <span>Payment failed</span>
<!-- The icon duplicates the adjacent text — empty alt is correct -->
<!-- Never omit alt entirely — missing alt attribute is an error
Empty alt="" = intentionally decorative
Missing alt = unknown, screen readers may read the filename -->Imagens funcionais
Imagens que têm uma função — descreva a função, não a aparência:
<!-- Logo that links to home -->
<a href="/">
<img src="logo.svg" alt="CoddyKit — Go to homepage">
</a>
<!-- Describes the destination, not the logo's appearance -->
<!-- Submit button using an image -->
<input type="image" src="submit.png" alt="Submit registration form">
<!-- Describes what happens when activated -->Imagens complexas: figuras e descrições longas
Gráficos ou diagramas complexos podem precisar de mais do que um alt curto:
<figure>
<img
src="complex-diagram.png"
alt="Network architecture diagram — see the description below"
aria-describedby="diagram-desc"
>
<figcaption id="diagram-desc">
<p>The diagram shows three tiers: a client layer with browsers and mobile apps,
a middle tier with load balancers and app servers,
and a data tier with primary and replica databases.</p>
</figcaption>
</figure>Imagens de texto
Evite imagens de texto — se precisar usá-las, o alt deve corresponder exatamente ao texto:
<!-- Logo with text 'CoddyKit' -->
<img src="text-logo.png" alt="CoddyKit">
<!-- Promotional banner with text 'Save 50% this week only' -->
<img src="promo.jpg" alt="Save 50% this week only">
<!-- Better: use real HTML text styled with CSS
Images of text fail at zoom and high contrast modes -->O contexto altera o alt
A mesma imagem pode precisar de textos alt diferentes em contextos diferentes:
<!-- As part of an article about dogs: -->
<img src="golden.jpg" alt="Golden retriever fetching a yellow tennis ball">
<!-- As a product photo for 'Golden Retriever Dog Toy':
<img src="golden.jpg" alt="Golden retriever playing with our premium fetch toy">
<!-- As a decorative header image:
<img src="golden.jpg" alt=""> -->Tamanho do texto alt
Orientações para o tamanho do texto alt:
- Mantenha-o conciso — não é necessário começar com 'Imagem de' ou 'Foto de'
- Procure ficar abaixo de 125 caracteres (alguns leitores de tela truncam o texto em 125 caracteres)
- Para imagens complexas, use um alt breve + aria-describedby para uma descrição detalhada
- Não inclua palavras-chave em excesso — escreva para as pessoas
Testando o texto alt
Como testar seu texto alt:
- Desative as imagens no navegador (Firefox: Ferramentas → Estilo da página → Sem estilo)
- Use a ferramenta WAVE para ver todos os textos alt de uma só vez
- Ouça com VoiceOver/NVDA para saber o que é anunciado
- Execute o Lighthouse: Acessibilidade → Elementos de imagem têm atributos [alt]
SVG e nomes acessíveis
Para SVG embutido, forneça nomes acessíveis de outra forma:
<!-- Standalone SVG with title: -->
<svg role="img" aria-labelledby="icon-title">
<title id="icon-title">Settings</title>
<!-- SVG paths -->
</svg>
<!-- Decorative SVG: -->
<svg aria-hidden="true">
<!-- paths -->
</svg>Verificação rápida
Qual valor de alt uma imagem puramente decorativa deve ter?
Recapitulação: texto alt
Princípios essenciais do texto alt:
- Sempre inclua o atributo alt; use alt="" para imagens decorativas
- Descreva as informações, não a aparência
- Imagens funcionais: descreva a ação ou o destino
- Imagens complexas: alt curto + aria-describedby para a descrição completa
- Imagens de texto: o alt deve corresponder exatamente ao texto
Perguntas Frequentes
A aula “Texto alternativo de imagens: quando e como” é grátis?
Sim — o texto completo de “Texto alternativo de imagens: quando e como” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Texto alternativo de imagens: quando e como”?
Escreva textos alternativos que transmitam o significado de imagens não decorativas. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Texto alternativo de imagens: quando e como”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Por que a acessibilidade importa: níveis WCAG
- Hierarquia de títulos para leitores de tela
- Texto alternativo de imagens: quando e como
- Navegação pelo teclado e ordem do foco