biblioteca viva de saberes inclusivos

conhecimento acessível para comunicar com responsabilidade, diversidade e equidade

Ver categorias

Texto Alternativo para Imagens: Guia Prático para Jornalistas e Editores

Tempo de leitura: 3 min

Neste artigo
Resumidor de documentos com IA Resumo do documento

Introdução #

A descrição alternativa, também denominada texto alternativo para imagens (alt text), é um elemento central nas diretrizes de acessibilidade web, conforme o Critério de Sucesso 1.1.1 das WCAG 2.1[1], pois assegura a percepção de conteúdos não textuais por usuários com deficiências visuais que dependem de tecnologias assistivas. Paralelamente, um alt text bem estruturado otimiza a semântica da página aos olhos dos algoritmos de busca, melhorando índices de rastreabilidade e relevância em mecanismos como Google e Bing[2] , o que é particularmente impactante em portais de jornalismo digital, onde visibilidade e inclusão caminham conjuntamente.

O que é Alt Text e Por que ele é Importante? #

Descrição alternativa é um atributo HTML (alt="") que fornece um texto substituto para imagens. Seu propósito principal é:

  1. Acessibilidade: Usuários de leitores de tela dependem do ‘alt text’ para entender o conteúdo e a função das imagens no contexto da página.
  2. SEO: Mecanismos de busca como Google e Bing valorizam esse texto para indexar melhor o conteúdo visual, melhorando sua visibilidade orgânica.
  3. Fallback: Quando a imagem não carrega (por falha de rede ou bloqueio de conteúdo), o ‘alt text’ comunica ao usuário o que estava ali.

Princípios Chave para Descrição de Imagens #

Seja Descritivo e Específico: Descreva o que importa na imagem.

  • Exemplo: Em vez de “pássaro”, use “beija-flor verde pairando sobre flor vermelha”.

Manter Concisão: Mantenha entre 5 e 15 palavras, salvo em casos de imagens complexas.

  • Exemplo: “Gráfico de barras mostrando crescimento de 10% ao ano” ao invés de “gráfico de barras mostrando crescimento ao longo dos anos”.

Contexto é Fundamental: Ajuste a descrição ao propósito da imagem no texto.

  • Exemplo: Num artigo sobre empatia, “foto de duas pessoas se abraçando” enfatiza o gesto, não apenas “duas pessoas”.

Evite Redundância: Não repita informações já citadas no texto ao lado da imagem.

  • Exemplo Ruim: <img alt="Mapa do Brasil"> dentro de um parágrafo que já diz “Veja o mapa do Brasil”.

Considere o Propósito da Imagem: Diferencie imagem informativa de ilustrativa.

  • Exemplo: Para instruções técnicas, “diagrama de conexões elétricas de um circuito simples”.

Deixe em Branco para Imagens Decorativas: Use alt="" quando a imagem for puramente estética.

  • Exemplo: Ícones decorativos que não acrescentam informação ao conteúdo.

Exemplos de Texto Alternativo Bom e Ruim #

Exemplo 1: Foto de um Panorama Urbano ao Anoitecer

Vista noturna da cidade de São Paulo, com inúmeros prédios e iluminados sob um céu roxo.
(Créditos: Depositphotos)

Alt Text Ruim: “cidade”

  • Por que é ruim: Genérico, não transmite o que é memorável nessa cena.

Alt Text Bom: “Horizonte de São Paulo ao anoitecer com arranha-céus iluminados sob um céu roxo.”

  • Por que é bom: Específico, ambiente e horário claros.

Exemplo 2: Gráfico de Pizza de Distribuição de Votos

Gráfico de pizza intitulado 'Distribuição de Votos', mostrando os resultados: Categoria A com 50%, Categoria B com 35% e Categoria C com 25%.

Alt Text Ruim: “gráfico de pizza”

  • Por que é ruim: Não diz quais fatias ou proporções.

Alt Text Bom: “Gráfico de pizza intitulado ‘Distribuição de Votos’, mostrando os resultados: Categoria A com 50%, Categoria B com 35% e Categoria C com 25%.”

  • Por que é bom: Detalha as porcentagens e categorias.

Exemplo 3: Ilustração Decorativa de Agenda

Alt Text Ruim: “agenda”

  • Por que é ruim: Informação redundante se o título já menciona “agenda”.

Alt Text Bom: alt=""

  • Por que é bom: Indicando que é puramente decorativa e não precisa ser lida por leitores de tela.

Texto Alternativo para Imagens Complexas (Infográficos, Gráficos, etc.) #

Para infográficos, fluxogramas ou diagramas detalhados, considere:

  1. Descrição Longa Inline: Utilize o atributo longdesc ou uma seção abaixo da imagem com descrição completa.

  2. Link para Dados Acessíveis: Forneça um link para uma tabela HTML ou CSV acessível.

  3. Resumo no Alt Text: Ofereça um breve resumo e direcione para a descrição completa.

<img src="infografico.png" alt="Resumo das tendências de mercado em 2025; veja descrição completa abaixo." />
<div id="descricao-infografico">
	  <!-- descrição longa aqui -->
</div>
HTML

Texto Alternativo para Imagens e SEO #

  • Palavras-chave relevantes: Inclua termos que descrevam o conteúdo da imagem e sejam buscados pelo público, sem “keyword stuffing”.
  • Relevância semântico-visual: Mantenha coerência entre o texto da página e o alt text para reforçar o tema principal.
  • Performance: Imagens otimizadas e alt text adequado reduzem taxa de rejeição e melhoram métricas de engajamento.

Lista de Verificação de Acessibilidade para Texto Alternativo #

  • [ ] Cada imagem tem alt text?
  • [ ] O alt text é descritivo e específico?
  • [ ] O alt text é conciso?
  • [ ] O alt text reflete com precisão o conteúdo e propósito da imagem?
  • [ ] O alt text está vazio (alt="") para imagens decorativas?
  • [ ] Imagens complexas acompanham descrições longas ou alternativas acessíveis?

Recursos e Leituras Adicionais #

  1. WCAG 2.1 – Success Criterion 1.1.1: Non-text Content
  2. WebAIM: Writing Effective Alt Text
  3. W3C: Tips and Tricks in Images Tutorial
  4. eBook Acessibilidade | data-labe
  5. MWPT: Movimento Web Para Todos

Conclusão #

A prática de escrever texto alternativo (alt text) eficaz não só cumpre normas de acessibilidade como também potencializa a visibilidade online. Ao seguir estes princípios—descrição específica, concisão, contexto e tratamento adequado de conteúdos complexos—jornalistas e web designers garantem que suas imagens comuniquem valor a todos os leitores.

acessibilidade web, alt text