Se você está começando no mundo do desenvolvimento web, talvez já tenha visto o atributo alt dentro de uma imagem no HTML… e provavelmente ficou pensando:
“Para que isso serve?”
“Preciso mesmo usar?”
“Muda alguma coisa na prática?”
A resposta curta é: SIM!
E depois de aprender sobre o atributo alt, você nunca mais vai montar uma página sem ele.
Hoje você vai entender de forma simples, prática e sem termos técnicos porque o alt é tão importante — e como usá-lo corretamente.
O que é o atributo alt?
O alt vem da palavra alternative text (texto alternativo).
Ele é um texto que descreve a imagem, dizendo o que ela representa.
No HTML, fica assim:
Esse pequeno texto tem um papel enorme:
Ajuda pessoas com deficiência visual
Melhora o SEO da sua página
Explica a imagem caso ela não carregue
Ajuda navegadores e buscadores a entender o conteúdo
Ou seja… ele é simples, mas extremamente poderoso!
Por que o alt é tão importante?
1. Acessibilidade: todos merecem acessar seu conteúdo
Quando uma pessoa usa leitor de tela, o navegador lê o conteúdo do atributo alt para explicar o que a imagem mostra.
Se você coloca:
O leitor de tela não saberá explicar nada.
Agora, se você coloca:
A experiência da pessoa muda completamente.
E você cria um site mais inclusivo — algo essencial para qualquer desenvolvedor moderno.
✔️ 2. SEO: o Google não vê imagens, ele lê descrições
Motores de busca ainda não interpretam imagens como nós.
O alt é o que o Google usa para entender:
O que está na imagem
Quando exibi-la no Google Imagens
Como relacioná-la ao texto da página
Ou seja, usar alt corretamente ajuda seu site a aparecer mais.
✔️ 3. Imagens quebradas deixam sua página feia — o alt salva!
Se a imagem não carregar por algum motivo, o navegador mostra o texto alternativo no lugar.
Isso mantém a compreensão da página e evita aquele “X vermelho” horrível.
Como escrever um bom texto alt?
Aqui estão regras simples que funcionam SEMPRE:
1. Descreva o que realmente importa na imagem
Imagine que você está explicando para alguém que não está vendo.
Ruim:
alt="foto"
alt="imagem de pessoa"Bom:
alt="Mulher usando notebook enquanto estuda HTML"2. Seja direto e objetivo
Não precisa escrever um parágrafo inteiro.
✔️ Conciso
✔️ Claro
✔️ Útil
3. Não comece com “imagem de” ou “foto de”
Navegadores e leitores já sabem que é uma imagem.
❌ alt="Imagem de um carro vermelho"✔️ alt="Carro vermelho estacionado em uma rua"4. Quando a imagem é apenas decorativa…
… use alt="" (vazio).
Isso diz ao leitor de tela: "pode ignorar, não é importante".
Exemplo:
Exemplos práticos para iniciantes
Imagem de um produto:
Imagem explicando um gráfico no blog:
Imagem apenas decorativa no layout:
Quando usar alt e quando NÃO usar?
| Situação | Deve usar alt? | Exemplo |
|---|---|---|
| Imagem que transmite informação | ✔️ Sim | Fotos, gráficos, imagens de conteúdo |
| Imagem decorativa | ❌ Não | Bordas, ícones de enfeite |
| Botão com imagem (ícone funcional) | ✔️ Sim | alt="Abrir menu" |
| Imagem que representa texto | ✔️ Sim | Logo com nome da empresa |
Dicas finais para você nunca errar
Se a imagem tem um propósito real, o alt deve descrevê-la.
Se ela é só um enfeite, o alt deve ser vazio.
Sempre pense: "se essa imagem sumisse, a pessoa ainda entenderia?"
O alt deve complementar a imagem, não repetir o que já está escrito ao lado dela.
Pratique agora!
Escolha qualquer página do seu site ou projeto e revise todas as imagens.
Pergunte-se:
Essa imagem é informativa ou decorativa?
A descrição realmente explica algo útil?
Um iniciante conseguiria entender a página só lendo os alts?
Faça isso em apenas 5 minutos e você já terá um site mais profissional, mais acessível e mais amigável para o Google!
Conclusão: um detalhe pequeno que faz uma diferença gigante
O atributo alt pode parecer algo simples demais para merecer atenção — mas agora você viu como ele é essencial para qualquer página bem feita.
Ele melhora a acessibilidade, ajuda no SEO, evita problemas quando a imagem não carrega e deixa seu site mais profissional.
É justamente esse tipo de cuidado que diferencia alguém que “só escreve código” de um desenvolvedor que pensa na experiência do usuário e cria interfaces que qualquer pessoa consegue acessar.
E o melhor: é fácil demais de aplicar.
Basta um pequeno hábito em cada imagem que você cria.
Continue praticando, revisando suas páginas e aplicando o alt da forma correta.
Esses pequenos passos constroem a base para você evoluir cada vez mais como desenvolvedor(a)!