"Qual nome de arquivo você gostaria que um leitor de tela lesse em voz alta em seu ouvido 40 vezes por dia?" É uma pergunta um pouco absurda, mas é exatamente o que acontece quando uma imagem significativa fica com alt="image1.jpg" ou, pior, sem nenhum texto alternativo. Este artigo é um guia prático para escrever textos alternativos que realmente ajudam – não apenas presentes, mas bons.

Resumindo – o que este guia cobre

  1. Por que texto alternativo incorreto é quase tão ruim quanto texto alternativo ausente
  2. Como escrever um bom texto alternativo
  3. Quando deixar o texto alternativo intencionalmente vazio
  4. O que fazer com gráficos e diagramas complexos

Por que o texto alternativo incorreto é quase tão ruim quanto o texto alternativo ausente

De acordo com as WCAG 1.1.1, todo conteúdo não textual deve ter uma alternativa em texto — mas o requisito formal é apenas metade da história. "image1.jpg", "imagem" ou "logotipo" atendem tecnicamente ao requisito (há um atributo alt), mas não transmitem informações reais. Um usuário de leitor de tela que ouve uma sequência de "imagem... imagem... image23.png" não fica menos frustrado do que um usuário com visão olhando para uma série de quadros vazios.

Como escrever um bom texto alternativo

A regra norteadora: descreva a mensagem da imagem no contexto onde ela aparece, não uma descrição literal do que você vê. Uma foto de pessoas ao redor de uma mesa em uma reunião de equipe, acompanhando um artigo sobre colaboração, poderia ser apresentada como "Equipe trabalhando junta em torno de uma mesa" - e não como "Foto de pessoas". Para um gráfico ou gráfico, descreva o que o gráfico apresenta: “Gráfico de barras mostrando um aumento de 40% nas vendas no terceiro trimestre” é significativamente melhor do que “Gráfico de barras”.

Diagrama ilustrativo Texto alternativo eficaz versus ineficaz Comparação entre texto alternativo genérico e texto alternativo descritivo e preciso Texto alternativo: não apenas "presente" - também "bom" ❌ Insuficiente Alt: "image1.jpg" Um nome de arquivo não significa nada para um usuário dependendo de um leitor de tela ✅ Preciso e objetivo Alt: "Gráfico de barras: 40% aumento nas vendas no terceiro trimestre" Descreve o conteúdo e a mensagem — não apenas "há uma imagem" Imagem puramente decorativa? Alt vazio "" é melhor Regra de ouro: quais duas ou três palavras você diria a alguém ao telefone para descrever a imagem?
Regra de ouro: quais duas ou três palavras você diria a alguém ao telefone para descrever a imagem, se essa pessoa não pudesse vê-la?

Quando deixar o texto alternativo intencionalmente vazio

Nem toda imagem precisa de uma descrição. Imagens puramente decorativas – linhas divisórias gráficas, ilustrações de fundo, ícones que apenas repetem texto próximo – são melhor marcadas comalt=""(texto alternativo vazio, não faltando) para que o leitor de tela os ignore completamente. A diferença entre "ausente" e "intencionalmente vazio" é crítica: faltar soa como um erro ou lê o nome do arquivo; intencionalmente vazio simplesmente o ignora silenciosamente.

💡 Dica prática

Um teste rápido: se você excluisse totalmente a imagem da página, um usuário que não consegue vê-la perderia alguma coisa? Caso contrário, provavelmente é decorativo e adequado para um alt vazio.

O que fazer com gráficos e diagramas complexos

Para um gráfico de dados complexo, uma tabela de comparação ilustrada ou um infográfico com diversas camadas de informações, um texto alternativo curto não é suficiente — há muita informação para transmitir. A solução: texto alternativo curto que descreve o tópico geral, ao lado dele (no texto normal ao redor da imagem, não apenas no atributo alt) uma descrição mais detalhada dos dados importantes, ou uma tabela de dados equivalente que um leitor de tela possa navegar.

Não tem certeza de qual texto alternativo está faltando ou é problemático em seu site?

Nossa ferramenta encontra imagens sem texto alternativo em todos os documentos do seu site e as sinaliza por prioridade.

Torne seus documentos acessíveis gratuitamente ←