texto alternativo (ou texto alternativo) é um dos elementos mais simples, porém mais poderosos, para conseguir um site acessível. Embora muitos o associem apenas ao SEO, sua verdadeira função é muito mais importante: o texto alternativo acessível serve para garantir que todos, inclusive aqueles que utilizam leitores de tela, possam compreender o conteúdo visual de uma página. Mas… Como saber o que colocar e o que não colocar? Este guia prático, com exemplos claros, explica passo a passo.
O que é texto alternativo e quem o “lê”?
Alt text é um atributo HTML que descreve o conteúdo de uma imagem. Eles “lêem” principalmente:
- Leitores de tela, usados por pessoas cegas ou com baixa visão.
- Mecanismos de busca, como o Google, para indexar corretamente a imagem.
- Navegadores, quando a imagem não carrega.
Também é exigido por regulamentos como WCAG (Diretrizes de acessibilidade de conteúdo da Web) e EN 301 549 na Europa.
No código HTML, fica assim:
A regra de ouro: contexto, contexto e contexto
O maior erro ao escrever texto alternativo é descrever a imagem literalmente e isoladamente. Contexto é tudo. Pense: o que esta imagem contribui para o conteúdo? O que o usuário precisa saber se não conseguir ver?
Por exemplo:
- Incorreto: “Uma mulher com um laptop sorrindo.”
- Correto: “Designer revisando protótipo no laptop durante reunião de equipe.”
A segunda opção contextualiza a imagem em relação ao conteúdo do site.
Caso 1: Imagens Informativas
São imagens que comunicam informações essenciais: fotos de pessoas, gráficos de dados, ilustrações explicativas.
Exemplo 1: foto da equipe
- Incorreto: “Cinco pessoas em pé.”
- Correto: “Equipe de atendimento ao cliente posando no escritório principal.”
Exemplo 2: gráfico de vendas
- Incorreto: “Gráfico de barras coloridas.”
- Correto: “Gráfico que mostra um aumento de 30% nas vendas trimestrais em 2024.”
Dica principal: seja conciso, mas informativo. Se a imagem for muito complexa, acompanhe-a com uma descrição longa no texto principal ou com uma ária descrita por.
Caso 2: Imagens Funcionais
Estes não mostram informações visuais, mas executam ações: botões, ícones, links.
Aqui não descrevemos o que você vê, mas o que você faz.
Exemplo 1: ícone de pesquisa
- Incorreto: “Lupa”
- Correto: “Pesquisa”
Exemplo 2: botão com ícone de envelope
- Incorreto: “Sobre”
- Correto: “Enviar mensagem”
*Use frases como: “Ir para o topo”, “Baixar relatório”, “Fechar menu”.
Caso 3: Imagens Decorativas
Se uma imagem não fornece informações e existe apenas para fins estéticos ou de preenchimento visual, não deve conter texto alternativo.
Exemplo: enfeites de fundo, bordas florais, sombras.
O correto é:
Este alt=”” indica ao leitor de tela que ele pode ignorá-lo, evitando confusão ou redundância.
Lista de verificação rápida para avaliar seu texto alternativo
Antes de publicar, pergunte-se estas 5 perguntas:
- Descreve o propósito da imagem, não apenas sua aparência?
- Faz sentido dentro do contexto do conteúdo?
- É breve, mas informativo (máximo de 125 caracteres)?
- Você evita frases desnecessárias como “imagem de…” ou “foto de…”?
- É diferente dependendo do tipo de imagem (informativa, funcional ou decorativa)?
Se você responder “sim” a todas elas, você está no caminho certo!
Conclusão
O texto alternativo não é apenas uma caixa técnica que precisa ser preenchida: é uma oportunidade de criar um site mais inclusivo e, no processo, melhorar o seu posicionamento nos mecanismos de busca. Pense no contexto, na intenção e na pessoa que não consegue ver a imagem, mas quer entendê-la.
