Imagine um comprador de manutenção diante de duas fotos lado a lado: mesmo corpo metálico, mesmo sextavado, mesmo fundo branco. O que muda está em uma das pontas. Se o texto alternativo das duas disser “conexão metálica industrial”, quem não enxerga a imagem perde justamente a informação que separa uma peça da outra.
O caso: Serra Azul, uma empresa fictícia
A Serra Azul não existe e nada aqui foi medido em catálogo real. No exemplo, ela vende a SA-110, com rosca externa nas duas pontas, e a SA-120, com rosca externa em uma ponta e interna na outra. Cada peça tem três imagens: a foto do card, que é o único link para a ficha; o close na página do produto; e uma faixa de textura sem informação.
Antes de escrever, pergunte o que a imagem faz
A árvore de decisão do W3C orienta a alternativa textual pelo papel da imagem: funcional, informativa ou decorativa. Aplicamos essa lógica à SA-120, e fotos da mesma peça receberam respostas diferentes:
| Imagem | Papel | Alt proposto |
|---|---|---|
| Foto do card | Funcional | Abrir ficha da conexão SA-120, com rosca externa e rosca interna |
| Close na página | Informativa | Conexão SA-120 com rosca externa em uma ponta e rosca interna na outra |
| Faixa de textura | Decorativa | Vazio |
A conta do catálogo fictício: 2 peças × 3 imagens = 6 imagens. Como cada peça repete os três papéis, a equipe escreve 4 alts e deixa 2 vazios.
Quando foto e link disputam a mesma frase
Agora suponha um novo layout, com foto e nome no mesmo link: “Conexão SA-120, rosca externa e rosca interna”. O texto do link já identifica a peça e indica o caminho. Nossa recomendação é deixar vazio o alt dessa foto, para a frase não ser anunciada duas vezes. A conta muda: restam 2 alts escritos, os dos closes, e 4 vazios.
A regra prática é simples: o link diz para onde a pessoa vai; o alt entrega o que só a imagem está comunicando naquele ponto. Se a foto acrescentar algo que o link não diz, o alt traz apenas esse acréscimo.
O método: teste da troca
Este roteiro é proposta nossa e cabe em uma planilha:
- Inventarie. Registre peça, local da imagem, destino do link, se houver, e papel.
- Separe o visível do documentado. No exemplo, o tipo de rosca aparece na foto; bitola, material e pressão não.
- Escreva com a fonte certa. Use a função ou o que está visível. Medida que não se lê na imagem fica fora do alt do close e vai para a tabela técnica.
- Troque os textos. Apague o código da peça e aplique o alt de uma à outra. Se continuar verdadeiro, não diferencia: reescreva.
- Cubra as fotos. Leia a página. A pessoa precisa conseguir escolher a peça e saber aonde cada link leva.
Na Serra Azul, “conexão metálica industrial” reprova, porque serve às duas. Já “rosca externa nas duas pontas” passa: aplicada à SA-120, fica falsa. Com dois pares de alts, card e close, são 2 trocas.
E a busca?
A documentação do Google sobre imagens indica que o conteúdo da página e o texto alternativo ajudam a compreender a imagem, e recomenda mantê-la perto de texto relevante. Compreensão não é promessa de posição. Por isso, nosso critério de aprovação é outro: o comprador consegue distinguir as peças sem ver a foto?
Os limites
- O exemplo é ilustrativo e não traz resultado de negócio, acessibilidade ou tráfego.
- O teste da troca não vem do W3C nem do Google e não substitui avaliação com quem usa leitor de tela.
- Ele não valida especificação. Quem responde pela peça deve conferir cada afirmação técnica.
- Se a diferença não aparece na foto, nenhum alt resolve sozinho: faça outra imagem ou explique a diferença no texto da página.
Para começar, escolha o par de produtos mais parecido do catálogo e rode as cinco etapas. O resultado mostra se os textos atuais distinguem as peças ou apenas ocupam o campo.
Para aprofundar
- Machine Learning Aplicado à Mídia Programática: Como a IA Eleva a Eficácia das Campanhas
- Como a inteligência artificial está transformando a forma como anunciamos
Sinal / Negócios & Indústria. Reportagem explicativa produzida com auxílio de IA e revisão editorial automatizada.
