Um texto alternativo é um equivalente textual para uma imagem. Em HTML, ele fica no atributo alt de um elemento img. Na prática, sua função é preservar a finalidade da imagem quando o leitor não consegue vê-la. Um leitor de tela pode anunciá-lo, uma visualização somente em texto ou de baixa largura de banda pode exibi-lo, e os sistemas de busca podem usá-lo junto com a página para entender a imagem. Ele não é um campo para repetir uma consulta-alvo nem uma alavanca de ranqueamento isolada.
Finalidade, não palavras-chave
A mesma imagem pode exigir alternativas diferentes em contextos diferentes. A foto de uma caneca azul numa listagem de produto pode precisar do nome do produto, da cor e do material. Num artigo sobre hábitos de escritório, o dado útil pode ser que a caneca fica ao lado de um caderno. Se a foto apenas decora um parágrafo que já diz o mesmo, a alternativa correta pode ser vazia: alt="". As diretrizes de imagens do W3C fazem essa distinção pela finalidade: imagens informativas descrevem a informação essencial, imagens funcionais descrevem a ação ou o destino, e imagens decorativas recebem alternativa nula.
- Imagem informativa
- Diga a informação que o leitor deixaria de ver: “Caneca de cerâmica azul ao lado de um caderno sobre uma mesa.”
- Imagem funcional
- Nomeie a ação ou o destino: “Finalizar a compra” é mais útil do que “ícone de carrinho de compras”.
- Imagem decorativa
- Use alt="" quando ela não acrescenta informação e não é um controle interativo.
- Gráfico ou diagrama complexo
- Use um resumo curto no alt e coloque as conclusões, os rótulos e os dados em texto próximo ou em uma descrição vinculada.
Escolha a alternativa certa
Comece pela mensagem da página e depois decida que papel a imagem tem. Isso evita o erro comum de descrever um detalhe bonito e deixar de fora o fato necessário para entender a página. Em um gráfico, um rótulo como “Cadastros mensais” raramente basta: o texto também deve informar a tendência e os valores que importam. Para uma imagem usada como link, o Google documenta que o texto alternativo da imagem é usado como texto âncora, por isso a alternativa deve comunicar o destino ou a ação. Uma imagem decorativa dentro de um link é diferente: o link ainda precisa de um nome acessível, vindo de texto visível ou de outro rótulo confiável.
| Uso da imagem | Alternativa útil | O que evitar |
|---|---|---|
| Fotografia de produto | Produto específico, variante que o distingue e estado visível | Um slogan de vendas ou uma consulta de compra repetida |
| Botão com ícone | A ação, como “Baixar relatório” | “Seta azul” |
| Gráfico | Conclusão breve, mais o texto próximo com os dados completos | Uma longa sequência de valores espremida no alt |
| Divisor decorativo | Atributo alt vazio | Nome de arquivo ou “decoração” |
Escreva e verifique o texto alternativo
Escreva a alternativa depois que a imagem estiver posicionada ao lado do texto final. Mantenha-a curta o bastante para ser lida como parte da frase, coloque a distinção principal no início e use os termos que os leitores já veem na página, quando forem relevantes. Não existe um limite universal de caracteres: um ícone pode precisar de duas palavras, enquanto uma foto de produto pode exigir uma frase curta. Se o conceito não couber em poucas palavras, torne a explicação mais longa visível no conteúdo da página.
- Classifique a imagem como informativa, funcional, complexa ou decorativa no contexto final da página.
- Rascunhe a menor frase que preserve a finalidade dela. Remova “imagem de” e outras formulações que não acrescentem sentido.
- Compare a alternativa com a legenda, o título e o texto ao redor, para que ela não contradiga esses elementos nem apenas os repita.
- Inspecione o HTML renderizado para encontrar um elemento img e o valor alt pretendido. URLs de imagem e o título de mídia do CMS não substituem essa verificação.
- Em um template representativo, ouça com um leitor de tela ou inspecione a árvore de acessibilidade. Depois, amostre componentes repetidos e casos de imagem ausente.
Separo uma imagem que carrega significado da decoração e escrevo o texto alternativo para o significado, sem enfiar nome de arquivo ou palavras-chave nele. Essa prática é um método de revisão, não uma prova de que todas as imagens de um site são acessíveis. Uma revisão completa também verifica templates renderizados, imagens dentro de links e fluxos editoriais.
Limites e erros comuns
O texto alternativo ajuda a acessibilidade e dá aos sistemas de busca uma pista relevante, mas não consegue corrigir um controle inacessível, uma imagem bloqueada, um texto de página irrelevante ou a falta de explicação textual de um visual complexo. O Google usa o contexto da página, as legendas e outros sinais, além do texto alternativo, para entender imagens. Trate a descoberta de imagens e a qualidade da página de destino de imagens como verificações separadas.
- Não use nome de arquivo, título do CMS ou lista de palavras-chave como alternativa.
- Não presuma que todo alt não vazio é melhor: imagens decorativas normalmente devem ser ignoradas com alt="".
- Não faça o alt carregar instruções legais, dados ou uma chamada à ação que não existam em nenhum outro lugar da página.
- Não reutilize a mesma alternativa genérica em imagens de produtos não relacionados só porque um template aceita.
- Não afirme que adicionar texto alternativo garante posições na web, inclusão de imagens ou um resultado de conformidade de acessibilidade.