O atributo alt fornece uma alternativa de texto descrevendo o conteúdo ou função de uma imagem. Ele serve usuários e ferramentas que não conseguem ver a imagem.
html
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
O atributo alt fornece uma alternativa de texto descrevendo o conteúdo ou função de uma imagem. Ele serve usuários e ferramentas que não conseguem ver a imagem.
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
alt em voz alta, para que um usuário cego saiba o que a imagem transmite. Sem ele, eles ouvem apenas o nome do arquivo ou simplesmente "imagem" — inútil.alt em vez de um ícone de imagem quebrada.alt para entender e indexar imagens (SEO de imagens).<!-- ✅ describe the MEANING, not "image of..." -->
<img src="dog.jpg" alt="A golden retriever catching a frisbee" />
<!-- ✅ for functional images, describe the ACTION -->
<a href="/home"><img src="logo.png" alt="Acme home" /></a>
<!-- ✅ DECORATIVE images get an EMPTY alt so screen readers skip them -->
<img src="divider.png" alt="" />
O alt="" (vazio, mas presente) é importante: diz aos leitores de tela "isto é decorativo, ignore-o". Omitir alt completamente é diferente — então o leitor pode anunciar o nome do arquivo.
alt é o atributo de acessibilidade mais importante para imagens e um requisito legal sob os padrões de acessibilidade (WCAG).
Torna o conteúdo perceptível para usuários não-videntes, fornece um fallback quando as imagens quebram e ajuda no SEO — descreva o que a imagem significa em contexto, e use alt="" para imagens puramente decorativas.