Texto alternativo nas imagens: o que é e por que importa

Quem monta um site costuma cuidar bem das fotos: escolhe as melhores, corta no tamanho certo, ajusta a cor. Aí, na hora de subir para a página, aparece um campo pequeno e discreto chamado "texto alternativo" — e quase todo mundo pula. Parece detalhe técnico, coisa de programador. Não é.

O texto alternativo (ou alt, do inglês alternative text) é uma frase curta que descreve o que aparece na imagem. Ela não fica visível na tela em situações normais, mas é ela que faz sua foto existir para três públicos que você provavelmente não considerou: quem não enxerga a imagem, o Google, e qualquer visitante cuja internet travou na hora errada.

O que é texto alternativo, na prática

Toda imagem em uma página tem um endereço de arquivo — algo como foto-loja.jpg — e pode ter, junto, uma descrição em texto. No código, isso aparece mais ou menos assim: <img src="foto-loja.jpg" alt="Fachada da loja na Praia do Morro, com toldo azul">.

Você não precisa mexer em código para escrever isso. No WordPress, no editor da sua loja virtual ou em qualquer painel decente, existe um campo "Texto alternativo" logo ao lado da imagem. O que você digitar ali vira o alt. É literalmente uma linha de texto — e é a diferença entre uma foto que comunica e uma foto que some.

Por que isso importa mais do que parece

1. Quem usa leitor de tela depende dele

Pessoas cegas ou com baixa visão navegam com um programa que lê a página em voz alta. Esse software não consegue "olhar" uma foto — ele lê o alt. Se o campo estiver vazio, o que a pessoa ouve é apenas "imagem", ou pior, o nome do arquivo: "i-m-g underline 4-8-3-1 ponto jpg".

Imagine uma página de cardápio com doze fotos de pratos e nenhuma descrição. Para quem usa leitor de tela, essa página vira doze anúncios de "imagem" seguidos, sem nenhuma informação. É o mesmo que fechar a porta. Esse é o lado mais importante do assunto, e faz parte de um tema maior que já tratamos em acessibilidade em sites.

2. O Google lê o alt para entender a imagem

Buscadores melhoraram muito em reconhecer o conteúdo de fotos, mas ainda dependem bastante de texto para ter certeza. O alt, o nome do arquivo e o texto ao redor da imagem são os principais sinais que dizem ao Google do que aquela foto trata.

Isso abre uma porta de entrada que muita gente ignora: a busca por imagens. Um restaurante com fotos bem descritas pode aparecer quando alguém procura "moqueca capixaba em Guarapari" na aba de imagens — e esse clique leva direto para a página. É uma fatia de tráfego que se soma ao trabalho normal de SEO e não exige nenhum investimento além de escrever com cuidado.

3. Quando a imagem não carrega, o alt aparece na tela

Conexão instável, arquivo corrompido, endereço quebrado depois de uma mudança no site: acontece. Nesses casos, o navegador mostra o texto alternativo no lugar da foto. Uma página com alts bem escritos continua fazendo sentido mesmo sem as imagens; uma página sem alts vira um amontoado de quadrados vazios.

Como escrever um bom texto alternativo

A regra mental é simples: descreva a imagem como se estivesse contando para alguém ao telefone, em uma frase. Nada de parágrafo, nada de lista de palavras-chave.

• Seja específico e curto. Entre 5 e 15 palavras costuma bastar. "Bolo de cenoura com cobertura de chocolate, fatia servida no prato" é melhor que "bolo".
• Descreva o que importa naquele contexto. A mesma foto de uma pessoa sorrindo pode ser "Cliente recebendo as chaves do carro novo" numa página de vendas e "Ana Paula, gerente da loja" na página Sobre.
• Não comece com "imagem de" ou "foto de". O leitor de tela já anuncia que é uma imagem; repetir só atrasa.
• Inclua o texto que está dentro da imagem. Se o banner diz "20% off até domingo", isso precisa estar no alt — senão a informação simplesmente não existe para parte do público.
• Não empilhe palavras-chave. Escrever "site Guarapari criação de sites web designer Guarapari barato" é encher linguiça, prejudica quem usa leitor de tela e o Google reconhece a manobra.
• Imagem decorativa leva alt vazio. Ícones, linhas divisórias e formas de fundo que não acrescentam informação devem ter alt="" — assim o leitor de tela pula em silêncio, em vez de ler ruído.

Exemplos lado a lado

Repare na última linha: quando a imagem é também um link, o alt deve descrever para onde o link leva, não o desenho do logotipo. É o tipo de detalhe que separa um site bem feito de um site só bonito.

Onde preencher isso no seu site

Em praticamente todo sistema de sites o caminho é parecido:

1. WordPress: ao enviar a imagem, a biblioteca de mídia mostra o campo "Texto alternativo" na coluna da direita. Vale revisar também as imagens antigas — elas continuam lá, mudas.
2. Lojas virtuais: na edição do produto, cada foto costuma ter um campo de descrição ou alt. Combine isso com o que já explicamos em como escrever a descrição de produto.
3. Sites feitos sob medida: o texto vai direto no atributo alt da tag de imagem, no código. Quem cuida do site faz isso para você.
4. Construtores visuais: normalmente aparece em "Configurações da imagem" ou num ícone de engrenagem sobre a foto.

Uma dica que economiza trabalho: escreva o alt na hora de subir a imagem, nunca depois. Revisar duzentas fotos antigas é tarefa chata; preencher um campo no momento do envio leva quinze segundos.

Erros comuns que vale evitar

Dois enganos aparecem o tempo todo. O primeiro é confundir alt com legenda: a legenda é o texto visível embaixo da foto, que todo mundo lê; o alt é a descrição invisível, para quem não vê a imagem. Eles podem ser diferentes, e geralmente são.

O segundo é achar que o alt substitui o resto do cuidado com imagens. Ele não conserta uma foto pesada que trava o celular do visitante — para isso o caminho é otimizar as imagens do site — nem melhora uma foto genérica de banco de imagens, assunto de como escolher as fotos certas. O alt descreve; ele não salva.

Se cuidar disso um a um parece trabalhoso demais, essa é a parte fácil: a TH Designer já entrega os sites com o texto alternativo escrito em todas as imagens, pensando tanto em acessibilidade quanto em busca, e revisa o que já existe quando o site é uma reforma. Conheça nossos serviços e peça um orçamento sem compromisso.

No fim, o texto alternativo é um daqueles cuidados que ninguém elogia porque ninguém vê — até o dia em que um cliente que usa leitor de tela consegue fechar o pedido sozinho, ou uma foto sua aparece no Google e traz uma visita que não viria. Quinze segundos por imagem. Poucas coisas no site rendem tanto por tão pouco.

Perguntas frequentes