O texto alternativo (alt) é um texto descritivo adicionado a elementos visuais como imagens, ícones, gráficos e fotos. Leitores de tela e outras tecnologias assistivas dependem do texto alternativo para comunicar o conteúdo visual a usuários que não conseguem ver as imagens. O texto alternativo garante que seus designs sejam acessíveis a todos os usuários e está alinhado com padrões de acessibilidade como as Diretrizes de Acessibilidade para Conteúdo da Web (WCAG), a Seção 508 (EUA) e a AODA (Canadá).

Por que o texto alternativo é importante

Os leitores de tela leem o texto alternativo como uma alternativa ao conteúdo visual. Isso permite que usuários com deficiência visual compreendam o propósito e o contexto de imagens, ícones ou gráficos. Sem texto alternativo, os usuários podem perder informações críticas ou contexto transmitido visualmente.

Quando adicionar texto alternativo ou marcar elementos como decorativos

Nem todos os elementos visuais exigem texto alternativo. Alguns são puramente decorativos e não transmitem conteúdo significativo. Use a comparação abaixo para determinar quando o texto alternativo é necessário:

Que texto alternativo devo adicionar a imagens decorativas?

Para elementos visuais puramente decorativos, use texto alternativo como “Imagem decorativa” ou “Elemento decorativo”. Os leitores de tela irão ignorá-los automaticamente.

Como escrever um texto alternativo preciso e útil?

Pense em como você descreveria uma imagem para alguém que não pode vê-la. Pergunte a si mesmo:

• O que é importante para o usuário saber?

• Qual contexto é relevante?

• Quais detalhes são desnecessários?

Um bom texto alternativo deve ser:

• Funcional – comunica o propósito

• Informativo – descreve o conteúdo de forma clara

• Contextual – explica por que aparece próximo a outros elementos

• Focado – evita detalhes irrelevantes

Determine se a imagem tem o objetivo de transmitir informações específicas ou se busca evocar um sentimento ou emoção.

Devo incluir texto no texto alternativo para descrever conteúdo não textual?

Conteúdo não textual pode incluir:

• Imagens de produtos

• Logotipos

• Vídeos

• Infográficos

O texto alternativo deve refletir o propósito do elemento visual. Por exemplo, uma imagem de um molho de iogurte pode ser descrita de forma diferente dependendo do contexto:

• Página de receitas: “Uma tigela de molho de iogurte batido, regado com azeite de oliva e polvilhado com endro fresco e especiarias, ao lado de um pedaço de pão integral.”

• Anúncio de utensílios de mesa: “Uma tigela moderna de cerâmica, com 6 polegadas de diâmetro, acabamento cinza salpicado, contendo molho de iogurte, posicionada ao lado de uma fatia de pão.”

• Site de produtos lácteos: “Uma tigela de molho feito com iogurte orgânico de origem local, colocada sobre uma mesa ao lado de uma fatia de pão.”

Uma imagem, vídeo ou outro elemento de conteúdo não textual pode incluir texto ou outros caracteres que também precisem ser descritos no texto alternativo.

No GIF animado acima, uma criança pequena está em pé à frente de um adulto. A criança segura uma caixa com texto escrito. Você pode descrever essa imagem de várias maneiras, dependendo do contexto em que ela aparece:

• Em um site com um artigo sobre parentalidade (por exemplo: “Um menino de 2 anos está em pé à frente de sua mãe, vestindo uma camiseta branca, jeans e um moletom com zíper. O capuz está colocado e possui duas pequenas orelhas que fazem o menino parecer um ursinho. Sua mãe se ajoelha atrás dele, ajudando-o a ficar em pé e a segurar uma caixa de jogo de tabuleiro.”)

• Em um site que anuncia brinquedos e jogos de tabuleiro infantis (por exemplo: “Uma criança pequena segura o jogo de festa ‘Twister’ em uma caixa. Sua mãe, que se ajoelha atrás dele, ajuda o menino a ficar em pé e a segurar a caixa.”)

• Em um site que anuncia roupas infantis (por exemplo: “Um menino de dois anos veste um de nossos moletons felpudos estilo ursinho, na cor marrom, com duas orelhas de urso no capuz. Sua mãe se ajoelha atrás dele, ajudando-o a ficar em pé e a segurar uma caixa.”)

Dependendo de quais informações são importantes para o leitor compreender, o texto alternativo pode mudar o foco para destacar ou minimizar detalhes, incluindo caracteres visíveis como texto ou números que apareçam no conteúdo não textual.

Como escrever texto alternativo para imagens que contêm apenas texto?

Se um elemento visual contém texto, transcreva-o exatamente no texto alternativo. Evite frases desnecessárias como “imagem de texto que diz…” porque os leitores de tela já identificam o elemento como uma imagem.

Exemplo:

• Visual: Bloco de texto em um infográfico.

• Texto alternativo: “Escrevendo texto alternativo? Certifique-se de que quaisquer imagens de texto sejam transcritas exatamente como aparecem. Um leitor de tela identificará automaticamente o elemento como uma imagem.”

Como incluir dados complexos no texto alternativo?

Alguns elementos visuais contêm dados complexos, como gráficos, tabelas, mapas ou fluxogramas. Nesses casos, use texto alternativo curto ou longo, dependendo do contexto:

• Texto alternativo curto: Fornece uma visão geral breve, útil quando os detalhes não são críticos.

  • Exemplo: “Fluxograma intitulado ‘Você deve alugar ou comprar?’”

• Texto alternativo longo: Fornece todos os detalhes necessários para compreender completamente o elemento visual.

  • Exemplo: “Fluxograma intitulado ‘Você deve alugar ou comprar?’. Início: Você planeja ficar por mais de 5 anos? As opções Sim/Não levam a perguntas adicionais sobre estabilidade financeira, orçamento e custos, terminando nos resultados ‘Alugar’ ou ‘Comprar’. Cada caminho é detalhado para fornecer orientação completa.”

Como posso resumir dados em um gráfico ou infográfico?

Para gráficos, inclua tanto as principais conclusões quanto o contexto relevante:

Exemplo de gráfico de barras:

• Título: “Profissionais de marketing criam visualizações de dados regularmente”

• Texto alternativo longo: “A maioria (48%) dos profissionais de marketing cria visualizações de dados semanalmente, 37% as criam mensalmente, 10% a cada poucos meses e 5% uma ou duas vezes por ano.”

Isso permite que os usuários compreendam os insights sem precisar ver o elemento visual.

Dicas rápidas para um texto alternativo significativo

• Seja conciso e use linguagem simples

• Use voz ativa

• Evite palavras redundantes como “imagem de…” ou “ícone de…”

• Evite abreviações, a menos que sejam necessárias

• Finalize sempre o texto alternativo com um ponto

   

💡 Dica: Para imagens com texto, sempre transcreva exatamente como está escrito. Os leitores de tela reconhecerão automaticamente o tipo de imagem.