Como Escrever Texto Alternativo: Um Guia Prático para Desenvolvedores e Equipes de Conteúdo

De acordo com o relatório WebAIM Million 2025, a ausência de texto alternativo afeta 55,5% de todas as homepages analisadas — e, dessas falhas, 44% envolvem imagens com link, o que quebra completamente a navegação para usuários de leitores de tela. Isso não é um problema de nicho. É metade da web deixando pessoas cegas e com baixa visão paradas diante de imagens que não dizem nada. Se sua equipe publica imagens sem pensar cuidadosamente no texto alternativo, você não está apenas falhando em um item de conformidade — está dizendo a uma parte significativa do seu público que a experiência delas não importa.

O Que o Texto Alternativo Realmente É (e Por Que É Mais do Que Uma Tag)

Texto alternativo, ou alt text, é uma descrição escrita incorporada no atributo alt de um elemento HTML <img>. Quando um leitor de tela encontra uma imagem, ele lê o texto alternativo em voz alta para o usuário. Quando uma imagem não carrega — por causa de conexão lenta, URL quebrada ou bloqueador de conteúdo — o texto alternativo é exibido em seu lugar. Ele também é indexado por mecanismos de busca, tornando-se um sinal de SEO discreto, mas significativo.

Mas aqui está o que muitas equipes não percebem: texto alternativo não é apenas uma rede de segurança de fallback. É a principal forma pela qual pessoas cegas e com baixa visão — aproximadamente 43,3 milhões de pessoas cegas no mundo e 295 milhões com baixa visão moderada a severa — experimentam conteúdo visual na web. Leitores de tela como NVDA e JAWS (os dois leitores de tela para desktop mais usados) anunciam o texto alternativo no momento em que o foco chega a uma imagem. Se esse texto estiver ausente, for sem sentido ou redundante, a experiência do usuário se degrada imediatamente.

Pesquisas com pessoas cegas e com baixa visão traçam um quadro duro do que acontece na prática. Alguns usuários relatam ignorar completamente as imagens em sites porque, em sua experiência, o texto alternativo nunca é útil. Outros pulam imagens de produtos em sites de e-commerce e confiam em avaliações de usuários, porque textos alternativos como "image001.jpg" ou "foto" não dizem nada. Isso não é um problema do leitor de tela — é um problema de conteúdo, e é algo que sua equipe pode corrigir.

Entender o texto alternativo como uma responsabilidade de conteúdo — não apenas uma tarefa de desenvolvedor — é a primeira mudança de mentalidade que toda equipe precisa fazer. O desenvolvedor implementa o atributo; a equipe de conteúdo entende o contexto. Ambos são essenciais para acertar.

O Cenário Legal e de Conformidade

Texto alternativo não é opcional se você se importa com exposição legal. O Critério de Sucesso 1.1.1 do WCAG (Conteúdo Não Textual) é um requisito de Nível A — o nível mais baixo e mais fundamental de conformidade. Falhar nele significa falhar em qualquer auditoria formal de acessibilidade. Nos Estados Unidos, a ADA vem sendo aplicada a sites em milhares de casos, com 4.605 processos judiciais relacionados a sites sob a ADA apenas em 2024. A ausência de texto alternativo é uma das violações mais citadas em notificações extrajudiciais justamente porque é facilmente detectável, objetivamente mensurável e bloqueia diretamente o acesso a conteúdo essencial.

Além da ADA, o European Accessibility Act (EAA) passou a ser aplicável em 28 de junho de 2025. Se sua organização atende clientes na UE, a não conformidade pode acarretar penalidades de até €100.000 ou 4% da receita anual. O WCAG 2.2 Nível AA é amplamente reconhecido como referência para conformidade com o EAA, e seus requisitos de texto alternativo sob o critério 1.1.1 permanecem inalterados em relação às versões anteriores — todas as imagens informativas devem ter alternativas textuais programaticamente determináveis.

No Canadá, o Accessibility for Ontarians with Disabilities Act (AODA) também exige conformidade com o WCAG para organizações dos setores público e privado. A Section 508, no contexto federal dos EUA, tem seus próprios requisitos paralelos. A conclusão é consistente entre jurisdições: texto alternativo não é um “nice-to-have”, e o ambiente regulatório está se tornando mais rígido, não mais flexível.

O WCAG 1.1.1 é Nível A — o nível de conformidade mais básico. Falhar nele significa falhar em toda auditoria de acessibilidade, e é a violação mais fácil de ser detectada por ferramentas automatizadas e equipes jurídicas.

O Framework de Decisão: Que Imagens Precisam de Quê

Um dos equívocos mais comuns é achar que toda imagem precisa de uma descrição textual. Isso é incorreto — e adicionar texto alternativo desnecessário a imagens decorativas na verdade piora a experiência para usuários de leitores de tela, que passam a ouvir ruído que não agrega valor. A verdadeira habilidade é saber em que categoria cada imagem se encaixa. Aqui vai um framework prático:

• Imagens informativas — Fotos, ilustrações ou gráficos que transmitem conteúdo ou significado não presente no texto ao redor. Elas exigem texto alternativo descritivo que comunique a mesma informação que a imagem fornece.
• Imagens funcionais — Imagens usadas como botões, links ou controles (por exemplo, um ícone de lupa que envia uma busca, ou um logo que leva à homepage). O texto alternativo deve descrever a função, não a aparência visual: alt='Buscar', não alt='Ícone de lupa'.
• Imagens decorativas — Elementos visuais que agregam valor estético, mas não têm significado: padrões de fundo, divisores, ilustrações puramente decorativas. Elas devem ter um atributo alt vazio (alt=''), o que indica ao leitor de tela que ignore completamente a imagem.
• Imagens de texto — Capturas de tela ou gráficos que contêm palavras. A boa prática é evitá-las e usar texto real, estilizado, em vez disso. Quando forem inevitáveis, o texto alternativo deve reproduzir literalmente o texto da imagem.
• Imagens complexas — Gráficos, mapas e infográficos com dados densos. É necessário um texto alternativo curto de resumo, além de uma descrição estruturada mais longa no corpo da página ou vinculada a partir da imagem.

Observe que texto alternativo vazio (alt='') não é o mesmo que um atributo alt ausente. Uma imagem sem atributo alt pode fazer o leitor de tela ler o nome do arquivo ou a URL em voz alta — o que quase sempre é pior do que o silêncio. Sempre inclua o atributo, mesmo quando o valor for intencionalmente vazio.

Escrevendo Texto Alternativo Que Realmente Funciona: Regras Práticas

Bom texto alternativo é mais difícil de escrever do que parece. Aqui estão as regras concretas que separam descrições úteis de ruído:

• Mantenha conciso. Mire em menos de 125 caracteres. Leitores de tela como JAWS e NVDA podem truncar textos alternativos mais longos no meio da frase, cortando justamente a informação que você se esforçou para fornecer. Se a imagem for complexa o suficiente para exigir mais, isso é um sinal de que você precisa de uma descrição longa suplementar.
• Não comece com "Imagem de" ou "Foto de". Leitores de tela anunciam automaticamente que um elemento é uma imagem antes de ler o texto alternativo. Escrever alt='Imagem de uma mulher sorrindo' faz o leitor de tela dizer "imagem, imagem de uma mulher sorrindo" — o que é redundante e desperdiça o tempo de quem ouve.
• Descreva o significado, não apenas a aparência. O texto alternativo deve comunicar a mesma informação ou função da imagem. Se você está mostrando um gráfico do crescimento de receita no terceiro trimestre, não escreva alt='Gráfico de barras'. Escreva algo como alt='Gráfico de barras mostrando receita do 3º trimestre 22% maior ano a ano', e forneça os dados completos no texto ao redor.
• Combine com o contexto. A mesma fotografia pode exigir textos alternativos diferentes dependendo de onde é usada. Uma foto de um laptop sobre uma mesa usada em uma seção "Conheça Nosso Time" pode precisar de texto alternativo descrevendo o ambiente de trabalho; usada em uma listagem de produto, precisa descrever as especificações e a aparência do laptop.
• Não faça stuffing de palavras-chave. O texto alternativo é indexado por mecanismos de busca, mas encher de palavras-chave é uma experiência ruim para o usuário e uma violação da intenção do WCAG. Escreva primeiro para o usuário.
• Use gramática e pontuação adequadas. Leitores de tela convertem texto em fala, e a pontuação afeta o ritmo e a clareza. Um fragmento de frase soa menos natural do que um pensamento completo.

Texto alternativo não precisa ser uma descrição fria e objetiva. Ele pode — e às vezes deve — transmitir nuance, contexto e até emoção quando essas qualidades forem relevantes para a experiência do usuário com o conteúdo.

Exemplos de Código: Certo e Errado

Teoria é uma coisa. Vamos ver como esses princípios se aplicam em HTML real.

Imagem informativa — texto alternativo ruim:

<img src='team-photo.jpg' alt='photo'>

Imagem informativa — texto alternativo bom:

<img src='team-photo.jpg' alt='Equipe de engenharia da Accsible reunida em volta de um quadro branco durante uma reunião de sprint de produto'>

Imagem funcional (logo com link) — texto alternativo ruim:

<a href='/'>
  <img src='logo.svg' alt='logo'>
</a>

Imagem funcional (logo com link) — texto alternativo bom:

<a href='/'>
  <img src='logo.svg' alt='Accsible — voltar para a homepage'>
</a>

Imagem decorativa — implementação correta:

<img src='decorative-wave-divider.svg' alt='' role='presentation'>

Imagem complexa (gráfico) — abordagem correta com descrição longa vinculada:

<img
  src='q3-revenue-chart.png'
  alt='Gráfico de barras: receita do 3º trimestre 22% maior ano a ano. Tabela de dados completa abaixo.'
  aria-describedby='chart-description'
>
<div id='chart-description'>
  <!-- Tabela de dados completa ou descrição textual estruturada aqui -->
</div>

Para botões de ícone que não têm rótulo de texto visível, use aria-label no próprio botão e defina alt='' na imagem do ícone para evitar anúncio em duplicidade:

<button aria-label='Fechar diálogo'>
  <img src='close-icon.svg' alt=''>
</button>

Tratando Tipos Específicos de Imagem

Imagens de produto em e-commerce: Estas estão entre os contextos de texto alternativo mais críticos na web. Pessoas cegas dependem inteiramente do texto alternativo para entender o que estão considerando comprar. Descrever apenas o nome do produto é insuficiente. Inclua material, cor, principais características visuais e quaisquer variantes visualmente distinguíveis. Por exemplo: alt='Blazer slim de lã azul-marinho com botões dourados e lapelas em bico' é muito mais útil do que alt='Blazer'.

Logos: Logos nunca são decorativos. Eles exigem texto alternativo que inclua o nome da organização e qualquer slogan ou descritor significativo que apareça dentro da imagem do logo. Se o logo também for um link, o texto alternativo deve descrever seu destino, como discutido acima.

Infográficos: Estes são notoriamente difíceis de tratar bem. Um único atributo alt não consegue carregar o peso informacional de um infográfico complexo. A abordagem correta é um texto alternativo curto, em nível de resumo (por exemplo, alt='Infográfico que resume cinco etapas do nosso processo de onboarding') combinado com uma versão em texto estruturado da mesma informação visível na página.

Imagens de pessoas: Incluir nomes quando as pessoas são identificadas é útil, especialmente em contextos editoriais ou jornalísticos. Descreva o que a pessoa está fazendo ou o que a imagem comunica, não apenas a aparência física. Evite descrições que reduzam uma pessoa a suas características demográficas.

Imagens de fundo e CSS: Imagens aplicadas via background-image em CSS não têm atributo alt disponível, portanto devem ser usadas apenas para fins genuinamente decorativos. Se uma imagem precisa comunicar significado, ela deve estar no HTML como um elemento <img> com texto alternativo adequado.

Incorporando Texto Alternativo ao Seu Fluxo de Trabalho

Um dos motivos pelos quais o texto alternativo permanece quebrado em escala é que ele é tratado como um pensamento tardio de última etapa — algo que um scanner automatizado sinaliza após o lançamento, levando a um remendo apressado. A correção é mover o texto alternativo para etapas anteriores nos fluxos de trabalho de conteúdo e desenvolvimento.

Para equipes de conteúdo, isso significa estabelecer um guia de estilo interno para texto alternativo que cubra seus tipos de imagem mais comuns. Se seu site publica imagens de produtos, imagens de destaque de posts de blog, fotos de eventos e gráficos de dados, cada categoria merece um padrão documentado com exemplos de boas e más descrições. Quando redatores e editores fizerem upload de imagens, devem pensar no texto alternativo no mesmo momento em que pensam em legendas e na seleção da imagem.

Para desenvolvedores, isso significa incluir campos de texto alternativo em templates de CMS e marcá-los como obrigatórios — não opcionais — para componentes de imagem não decorativa. Quando um componente aceita uma imagem, a interface deve solicitar o texto alternativo e distinguir entre contextos informativos e decorativos. Evite preencher automaticamente o atributo alt com o nome do arquivo da imagem ou com o texto da legenda, que são coisas diferentes com propósitos diferentes.

Para responsáveis por QA e conformidade, ferramentas de varredura automatizada (incluindo soluções de overlay de acessibilidade como a Accsible) podem identificar imagens com atributos alt ausentes ou vazios em escala, sinalizando-as em tempo real. Mas ferramentas automatizadas não conseguem avaliar se o texto alternativo existente é realmente significativo — esse julgamento exige um revisor humano. Inclua verificações manuais pontuais em sua cadência de auditoria de acessibilidade e inclua revisão da qualidade do texto alternativo em qualquer critério de aceitação de novas funcionalidades que envolvam imagens.

Quando a mesma imagem é reutilizada em várias páginas ou contextos, lembre-se de que o texto alternativo apropriado pode mudar. Uma foto da sede de uma empresa usada em uma página de "Contato" e em uma página "Sobre Nossa Cultura" pode exigir descrições diferentes, dependendo do que cada página está tentando comunicar. Plataformas de CMS como WordPress permitem substituições de texto alternativo em nível de post exatamente por esse motivo.

Erros Comuns a Evitar

Mesmo equipes que levam texto alternativo a sério cometem erros recorrentes. Aqui estão os padrões que vale a pena monitorar ativamente:

• Usar o nome do arquivo como texto alternativo. Um texto alternativo como IMG_4521.jpg ou hero-banner-v3-final.png é pior do que inútil — ele sinaliza ativamente a usuários de leitores de tela que ninguém pensou neles.
• Tornar o texto alternativo idêntico à legenda adjacente. Legendas e texto alternativo atendem públicos e propósitos diferentes. Uma legenda é contexto suplementar para usuários videntes; o texto alternativo substitui a imagem para usuários que não podem vê-la. Eles podem se sobrepor, mas não devem ser copiados e colados de forma intercambiável.
• Adicionar texto alternativo a toda imagem indiscriminadamente. Dar descrições a imagens decorativas obriga usuários de leitores de tela a atravessar conteúdo irrelevante. A disciplina de decidir "esta imagem precisa de uma descrição e, se sim, de qual tipo?" é tão importante quanto a própria redação.
• Escrever descrições vagas e sem contexto. Um texto alternativo como alt='homem sorrindo' para uma foto do seu CEO durante o lançamento de um produto diz quase nada ao usuário sobre por que a imagem está ali ou o que ela significa no contexto.
• Ignorar texto alternativo em SVGs. SVGs inline também precisam de nomes acessíveis, normalmente via aria-label no elemento <svg> ou um elemento <title> como primeiro filho, combinado com role='img'.

<!-- SVG com nome acessível -->
<svg role='img' aria-labelledby='svg-title'>
  <title id='svg-title'>Crescimento de receita trimestral, do 1º ao 4º trimestre de 2024</title>
  <!-- Paths do SVG -->
</svg>

Principais Pontos

• Nem toda imagem precisa de descrição textual. Imagens decorativas devem usar alt='' para indicar aos leitores de tela que as ignorem — mas nunca omita completamente o atributo alt, ou o leitor de tela pode anunciar o nome do arquivo.
• Mantenha o texto alternativo abaixo de 125 caracteres para imagens informativas; leitores de tela podem cortar strings mais longas, e a concisão melhora a compreensão na escuta. Para imagens complexas, combine um resumo curto no alt com uma descrição completa em texto no corpo da página.
• Descreva a função, não apenas a forma. Para imagens com link e funcionais, o texto alternativo deve dizer ao usuário o que vai acontecer ou para onde ele irá — não como a imagem se parece. Para imagens informativas, comunique o significado, não apenas o conteúdo visual.
• Incorpore texto alternativo no fluxo de trabalho desde o início, não como correção pós-lançamento. Torne-o um campo obrigatório no seu CMS, inclua-o em guias de estilo de conteúdo e adicione revisão de qualidade ao seu processo de QA — ferramentas automatizadas detectam ausência de texto alternativo, mas humanos precisam avaliar se ele é significativo.
• Os riscos legais e regulatórios são reais e crescentes. Litígios sob a ADA citando ausência de texto alternativo chegaram às milhares em 2024, e o Accessibility Act da UE já está em vigor. Tratar texto alternativo como algo secundário não é uma estratégia de conformidade viável.