O atributo alt em imagens: muito além da descrição

Você já deve ter ouvido falar que é importante usar o atributo alt nas imagens. Mas você sabe por que ele é tão crucial e como usá-lo corretamente? O alt (texto alternativo) é muito mais do que uma simples descrição da imagem; ele é uma ponte para a acessibilidade, o SEO e a robustez da sua página.

O que é o atributo `alt`?

O atributo alt fornece uma descrição textual alternativa para uma imagem. Ele é exibido quando a imagem não pode ser carregada (por exemplo, por um erro no caminho, conexão lenta ou se o usuário desativou o carregamento de imagens) ou quando a imagem está sendo acessada por tecnologias assistivas, como leitores de tela.

Sintaxe básica:

html Copiar

Por que o `alt` é tão importante?

1. Acessibilidade para Pessoas com Deficiência Visual

Leitores de Tela: Para usuários cegos ou com baixa visão, os leitores de tela (softwares que leem o conteúdo da tela) lêem o texto do atributo alt. Sem ele, a imagem é ignorada ou o leitor de tela pode ler o nome do arquivo da imagem, o que geralmente não é útil.
Contexto: O alt fornece o contexto visual da imagem, permitindo que esses usuários compreendam o conteúdo e a função da imagem na página.

2. Otimização para Mecanismos de Busca (SEO)

Indexação de Imagens: Mecanismos de busca como o Google não conseguem "ver" imagens. Eles dependem do texto do alt para entender o que a imagem representa. Um alt bem escrito ajuda a imagem a ser indexada e aparecer nos resultados de pesquisa de imagens.
Relevância: O alt contribui para a relevância geral da página para determinadas palavras-chave.

3. Robustez e Experiência do Usuário

Imagens Quebradas: Se a imagem não carregar (por um erro no src, problema de servidor, etc.), o texto do alt é exibido no lugar da imagem quebrada. Isso evita que o usuário fique com um "buraco" na página e ainda entenda o que deveria estar ali.
Conexões Lentas: Em conexões de internet lentas, o texto do alt pode ser exibido antes da imagem carregar completamente, dando ao usuário uma ideia do conteúdo.

Como escrever um bom texto `alt`?

A chave é pensar no propósito da imagem e no contexto em que ela está.

Regras de ouro:

Seja descritivo e conciso: Descreva o conteúdo da imagem de forma clara e direta.
Seja relevante para o contexto: O texto alt deve fazer sentido dentro do parágrafo ou seção onde a imagem está.
Evite "imagem de" ou "foto de": O leitor de tela já informa que é uma imagem. Vá direto à descrição.
Inclua palavras-chave (com moderação): Se for relevante para o SEO, inclua uma ou duas palavras-chave, mas nunca faça "keyword stuffing" (repetição excessiva de palavras-chave).
Pense na função da imagem:
- Imagem informativa: Descreva o que ela mostra. <img src="grafico.png" alt="Gráfico de barras mostrando o crescimento de vendas em 2023, com aumento de 15% no último trimestre.">
- Imagem decorativa: Se a imagem não adiciona nenhuma informação ou função ao conteúdo (ex: bordas, espaçadores), use alt="" (vazio). Isso instrui o leitor de tela a ignorá-la. <img src="divisor.png" alt="">
- Imagem que é um link: Descreva o destino do link, não apenas a imagem. <a href="/contato"><img src="icone-email.png" alt="Entre em contato por e-mail"></a>
- Logotipo: Descreva o nome da empresa e, opcionalmente, o slogan. <img src="logo.png" alt="Nome da Empresa - Soluções Inovadoras">

Exemplos de `alt` bom e ruim:

Imagem	`alt` Ruim	`alt` Bom
[[Golden Retriever playing with ball]]	`alt="cachorro"`	`alt="Golden Retriever brincando com uma bola vermelha em um parque ensolarado."`
[[Chart showing sales growth]]	`alt="grafico"`	`alt="Gráfico de linha mostrando o crescimento de vendas de 2020 a 2023, com pico em 2022."`
[[Decorative border]]	`alt="borda decorativa"`	`alt=""` (vazio, pois é decorativa e não adiciona informação)
[[Facebook icon link]]	`alt="ícone do facebook"`	`alt="Link para a página do Facebook da empresa"`

`alt` vazio (`alt=""`) vs. `alt` ausente

alt="" (vazio): Use para imagens puramente decorativas que não adicionam valor ou informação ao conteúdo. Isso é uma boa prática, pois informa aos leitores de tela para ignorarem a imagem.
alt ausente: Nunca omita o atributo alt! Se ele estiver ausente, o leitor de tela pode tentar ler o nome do arquivo da imagem (ex: img_001.jpg), o que é confuso e inútil. Além disso, é um erro de validação de acessibilidade.

Resumindo

O atributo alt fornece uma descrição textual alternativa para imagens.
É crucial para:
- Acessibilidade: Leitores de tela leem o alt para usuários com deficiência visual.
- SEO: Ajuda mecanismos de busca a indexar e entender o conteúdo da imagem.
- Robustez: Exibido quando a imagem não carrega, melhorando a UX.
Como escrever um bom alt:
- Descritivo, conciso e relevante para o contexto.
- Evite "imagem de" ou "foto de".
- Pense na função da imagem (informativa, decorativa, link, logotipo).
Use alt="" para imagens puramente decorativas.
Nunca omita o atributo alt!