Um gerador pode entregar uma landing page com fotografias, ilustrações, ícones e gráficos em poucos minutos. Isso não significa que o texto alternativo esteja pronto. O modelo pode repetir o nome do arquivo, descrever decoração demais ou inventar uma frase promocional que a imagem não sustenta.

O problema não se resolve preenchendo todo alt. Algumas imagens precisam de uma descrição curta. Outras precisam ficar silenciosas. Um gráfico pode exigir dados em texto, e um ícone usado como botão precisa comunicar a ação, não a sua aparência.

Este guia mostra como tomar essa decisão no contexto da página, corrigir a fonte e testar a versão publicada.

Comece pelo propósito, não pelos pixels

O critério 1.1.1 da WCAG 2.2 sobre conteúdo não textual pede uma alternativa que cumpra propósito equivalente. Isso muda a pergunta. Em vez de “o que aparece na imagem?”, pergunte “o que uma pessoa perderia se não visse esta imagem aqui?”.

A mesma foto pode exigir respostas diferentes:

  • numa seção de equipe, a identidade da pessoa pode importar;
  • como fundo de um CTA, a foto pode ser decorativa;
  • dentro de um estudo de caso, uma cena pode comprovar um evento descrito;
  • num card que funciona como link, o destino do card é mais importante que os objetos da foto.

Texto alternativo depende de contexto. Copiar uma descrição da biblioteca de mídia para todos os usos costuma produzir ruído.

Classifique cada imagem antes de escrever

Faça um inventário com uma linha por ocorrência, não apenas por arquivo:

página e seção:
arquivo ou componente:
tipo de imagem:
informação disponível somente nela:
função interativa:
texto equivalente próximo:
decisão: descrever, ocultar ou explicar em texto longo
responsável pela revisão:

A árvore de decisão para alt da W3C separa imagens informativas, funcionais, complexas, redundantes e decorativas. Essa classificação é mais útil que uma regra de tamanho ou um limite arbitrário de caracteres.

Imagem informativa

Ela acrescenta informação necessária ao entendimento. Escreva uma alternativa breve que transmita essa contribuição.

<img
  src="equipe-no-lancamento.webp"
  alt="Equipe da Acme reunida diante do novo quiosque no dia do lançamento"
/>

Não liste tudo que aparece no quadro. Se a cor das camisetas, o mobiliário e o horário não mudam o sentido do conteúdo, corte esses detalhes.

Imagem decorativa

Ela cria atmosfera, separa blocos ou repete informação já disponível em texto. Use alternativa vazia para que tecnologias assistivas possam ignorá-la.

<img src="formas-abstratas.webp" alt="" />

O atributo vazio é deliberado. Omitir alt não comunica a mesma decisão e pode levar o leitor de tela a anunciar o nome do arquivo.

Imagem funcional

Quando uma imagem é o conteúdo de um link ou botão, comunique o destino ou a ação.

<a href="/contato/">
  <img src="icone-envelope.svg" alt="Entrar em contato" />
</a>

“Ícone de envelope” descreve a forma, mas não diz o que acontecerá. Se o controle já tem texto visível, a imagem interna geralmente pode ser decorativa para evitar repetição.

Imagem complexa

Gráficos, mapas e diagramas raramente cabem num alt útil. Dê uma identificação curta e disponibilize a informação essencial no texto próximo, numa lista ou numa tabela.

<img
  src="conversoes-por-mes.webp"
  alt="Gráfico de conversões mensais; dados completos na tabela seguinte"
/>

O texto longo precisa entregar a tendência, os valores e a conclusão que a pessoa vidente consegue obter. Não esconda um parágrafo inteiro dentro do atributo.

Trate imagens geradas por IA como material editorial

Uma imagem gerada não conhece a promessa aprovada, o cliente real nem o papel que terá na página. Antes de escrever a alternativa, revise o próprio asset:

  • a cena representa o assunto sem simular um resultado inexistente;
  • pessoas, produtos e ambientes não sugerem um cliente real sem autorização;
  • telas não mostram números, depoimentos ou interfaces inventadas;
  • texto embutido está correto e também existe como texto real quando necessário;
  • detalhes visuais não contradizem a legenda ou o conteúdo próximo.

Se a imagem inventa uma prova, o melhor alt não conserta o problema. Troque o asset.

O guia de otimização de imagens em landing pages ajuda a revisar formato, dimensões, carregamento e caminhos. Acessibilidade e performance compartilham o arquivo, mas exigem decisões diferentes.

Não use o nome do arquivo como descrição

Estes valores não ajudam:

alt="imagem"
alt="foto"
alt="hero-final-v7.png"
alt="imagem gerada por inteligência artificial"
alt="marketing tecnologia inovação futuro"

O texto deve comunicar propósito, não preencher uma exigência do componente nem acumular palavras-chave. Também não precisa começar com “imagem de” na maioria dos casos. O leitor de tela já anuncia o tipo de elemento.

Há exceções. Dizer “ilustração”, “mapa” ou “captura de tela” pode esclarecer a natureza da evidência. Use quando essa distinção importa para a leitura.

Evite repetir a legenda e o parágrafo

Leia a imagem junto com o conteúdo ao redor. Se a legenda já diz “Equipe reunida no lançamento de maio”, repetir exatamente isso no alt faz a pessoa ouvir a mesma frase duas vezes.

Escolha uma divisão de trabalho:

  • o alt identifica o conteúdo necessário para entender a imagem;
  • a legenda acrescenta crédito, data ou contexto editorial;
  • o parágrafo explica a conclusão;
  • uma tabela oferece os dados completos de um gráfico.

Se o texto próximo já entrega toda a informação e a imagem só ilustra, alt="" pode ser a melhor decisão.

Revise logos, avatares e ícones separadamente

Um logo isolado costuma precisar do nome da organização. Não escreva “logo da empresa Acme” quando “Acme” cumpre o mesmo propósito.

Em listas de depoimentos, o nome da pessoa deve existir como texto real. O avatar pode ficar silencioso se não acrescenta informação. Se a identidade visual confirma qual empresa deu o depoimento e esse nome não aparece em outro lugar, o logo precisa comunicar essa informação.

Ícones merecem uma revisão no componente completo:

  • ícone decorativo ao lado de texto visível: ocultar;
  • ícone sozinho num botão: dar nome acessível ao botão;
  • estado comunicado apenas por ícone: oferecer texto ou nome que acompanhe a mudança;
  • SVG inline: conferir se ele não cria um nome duplicado no controle.

O artigo sobre HTML semântico em sites criados por IA mostra como revisar link, botão, figura e controles na estrutura final.

Inclua texto que aparece dentro da imagem

Se a imagem contém uma frase necessária e ela não aparece em outro lugar, a alternativa precisa transmitir esse texto. A solução mais robusta costuma ser retirar a frase do bitmap e renderizá-la em HTML.

Texto real permite seleção, zoom, tradução, adaptação de contraste e reflow. Também evita publicar uma oferta antiga presa numa arte que ninguém lembrou de atualizar.

Para capturas de tela, descreva a parte que sustenta a instrução. Uma documentação que ensina onde clicar pode combinar uma alternativa curta com passos escritos. Não tente narrar cada pixel da interface.

Faça uma primeira revisão sem leitor de tela

Inspecione o HTML produzido, não apenas a propriedade no componente-fonte.

Procure:

  • <img> sem alt;
  • valor preenchido com nome do arquivo;
  • imagem decorativa anunciada;
  • link composto por imagem sem nome compreensível;
  • texto importante desenhado dentro do asset;
  • background CSS que carrega informação exclusiva;
  • gráfico sem dados equivalentes;
  • alt que continua descrevendo uma versão antiga da imagem.

Checks automáticos encontram ausências e alguns padrões ruins. Eles não sabem por que a imagem está naquela seção.

Teste a leitura no contexto da página

Ative um leitor de tela e percorra a seção como uma pessoa faria. O guia de teste com leitor de tela explica como preparar o ambiente e registrar evidências.

Durante o teste, confirme:

  1. a imagem aparece na ordem esperada;
  2. a descrição faz sentido sem olhar a tela;
  3. a leitura não repete texto próximo;
  4. imagens decorativas ficam silenciosas;
  5. links e botões comunicam ação ou destino;
  6. gráficos entregam a mesma conclusão em texto;
  7. a tarefa principal continua compreensível.

Não avalie o alt como frase isolada numa planilha. Uma descrição boa pode ficar redundante ou confusa quando lida entre o heading e a legenda reais.

Peça ao agente uma auditoria com decisões explícitas

Um pedido útil separa inventário de edição:

Audite as imagens desta página antes de editar.


Escopo:
- fonte e versão: [origem]
- páginas: [rotas]
- objetivo de cada página: [lista]
- referência: WCAG 2.2, critério 1.1.1


Para cada ocorrência de imagem, informe:
- arquivo e contexto;
- tipo: informativa, decorativa, funcional, complexa ou redundante;
- texto equivalente já disponível;
- decisão recomendada;
- texto alternativo proposto quando necessário;
- dúvida editorial que impede uma decisão segura.


Não invente identidade, resultado, dado, cliente ou intenção.
Não trate o nome do arquivo como descrição.
Não edite nem publique até eu aprovar o inventário.

Depois da aprovação, peça uma correção pequena e um diff restrito aos componentes e conteúdos afetados.

Reteste depois de publicar

Uma build pode apontar para outro asset, perder um atributo durante a renderização ou servir conteúdo antigo. Depois de publicar:

  1. abra a URL final;
  2. confirme que cada imagem carrega;
  3. inspecione o HTML entregue;
  4. percorra a seção com leitor de tela;
  5. compare descrição, legenda e conteúdo visível;
  6. verifique logos, links por imagem e gráficos;
  7. registre URL, versão, navegador e resultado.

Se houver correção, publique uma nova versão no mesmo Site. O fluxo de republicação com agente de IA mantém a URL enquanto substitui o pacote aprovado.

Feche com uma matriz que possa ser mantida

Guarde a decisão junto do componente ou do inventário editorial:

página:
imagem:
propósito:
decisão:
texto alternativo aprovado:
texto equivalente longo:
responsável:
versão retestada:

Revise essa matriz quando uma imagem, legenda, destino ou promessa mudar. Texto alternativo não é metadado para escrever uma vez e esquecer. Ele faz parte do conteúdo publicado.