Como adicionar texto alternativo (alt text) a uma imagem

O que é o texto alternativo?

O texto alternativo (atributo alt) é um atributo da tag <img> que descreve o conteúdo da imagem por meio de palavras: <img src="..." alt="...">. Quando a imagem não pode ser carregada (conexão lenta, caminho do arquivo incorreto), ele é exibido no navegador em seu lugar, é lido em voz alta por leitores de tela para usuários com deficiência visual e permite que os mecanismos de busca entendam o que é a imagem, pois o Google não “vê” a imagem no nível dos pixels, mas, na maioria das vezes, confia no texto ao redor e no atributo alt.

O texto alternativo tem uma finalidade totalmente diferente do nome do arquivo da imagem (por exemplo, IMG_2031.jpg): o nome do arquivo serve para o servidor/sistema de arquivos, enquanto o texto alternativo existe para transmitir significado. Os dois não devem ser confundidos.

O texto alternativo também é diferente de uma legenda (caption) que aparece abaixo da imagem: a legenda é um texto visível a todos na página, enquanto o texto alternativo, em condições normais, não é visível e só entra em ação quando a imagem não pode ser carregada ou quando é acessada por um leitor de tela. Essa distinção costuma ser confundida.

Embora, em alguns ambientes de desenvolvimento, deixar o atributo “alt” em branco possa passar pela validação HTML, essa validade técnica não significa que o texto alternativo seja realmente significativo; a ferramenta de validação verifica apenas se o atributo existe, e não a qualidade do seu conteúdo.

Por que isso é importante?

O texto alternativo é fundamental tanto para a acessibilidade quanto para o SEO de imagens. Usuários com deficiência visual, ao navegar pela página com leitores de tela, obtêm informações sobre o conteúdo da imagem por meio do texto alternativo; se esse texto estiver ausente, o leitor de tela geralmente lê apenas “imagem” ou o nome do arquivo, o que resulta em perda de informação. Em alguns países, a acessibilidade pode ser uma exigência legal.

Já os mecanismos de busca, como não conseguem “ver” diretamente o conteúdo das imagens, classificam a página nos resultados de busca de imagens (Google Imagens) com base na legenda. Em sites de comércio eletrônico, adicionar a legenda correta às imagens de produtos pode aumentar o tráfego adicional proveniente do Google Imagens. A falta de legenda afeta negativamente tanto a experiência do usuário quanto o tráfego de pesquisa de imagens.

Quando uma imagem demora a carregar em uma conexão lenta ou não carrega de forma alguma, a legenda é a única fonte de informação que permite ao usuário entender o que esperar daquela área; isso torna a legenda importante não apenas para o SEO, mas também para a usabilidade geral.

Como corrigir isso?

• Escreva um texto alternativo curto e descritivo para cada imagem relevante.
• Em imagens com fins meramente decorativos (por exemplo, enfeites de fundo) alt="" , faça com que o leitor de tela pule a imagem; isso é diferente de simplesmente não incluir o atributo alt.
• Use a palavra-chave apenas se ela realmente descrever a imagem e de forma natural.
• Mantenha a legenda curta e clara; evite frases desnecessariamente longas — geralmente, algumas palavras já são suficientes.
• Em imagens de produtos, indique o nome do produto e suas características importantes (como cor, modelo, ângulo).
• Se você estiver fazendo um upload em massa no seu sistema de gerenciamento de conteúdo, em vez de preencher o texto alternativo automaticamente, crie-o manualmente sempre que possível ou, pelo menos, use um modelo significativo baseado no nome do produto.
• Em imagens complexas, como infográficos ou tabelas, considere apresentar os detalhes que não cabem na legenda como texto simples logo abaixo da imagem.

Exemplo

<img src="tenis-esportivo-vermelho.jpg" alt="Tênis esportivo masculino vermelho, vista lateral">

Exemplo ruim: <img src="IMG_2031.jpg" alt="imagem"> — nem o nome do arquivo nem a legenda fornecem qualquer informação sobre o conteúdo da imagem. Outro exemplo ruim: alt="tênis tênis tênis esportivo tênis barato tênis promoção comprar" — em vez de descrever uma única imagem, isso serve apenas para encher de palavras-chave, criando uma experiência sem sentido e enfadonha para o usuário de leitor de tela.

Erros comuns

• Deixar o atributo alt totalmente em branco (em imagens que não sejam meramente decorativas).
• Usar nomes de arquivo sem sentido, como “imagem1.jpg” ou “IMG_2023”, como texto alternativo.
• Preencher o texto alternativo com várias palavras-chave seguidas (por exemplo, “tênis, tênis esportivo, tênis barato, tênis em promoção”).
• Repetir o mesmo texto alternativo genérico em todas as imagens.
• O relatório do Seoraporu.co lista cada texto alternativo ausente individualmente; em sites grandes, isso geralmente é um problema que precisa ser corrigido em massa no modelo de gerenciamento de produtos/imagens.