Sites e Conversão

Texto alternativo: descreva imagens pelo que elas acrescentam

Decida quando escrever alt, o que descrever e como evitar textos redundantes que não ajudam pessoas a entender imagens ou ações.

Capa exclusiva: Texto alternativo: descreva imagens pelo que elas acrescentam
Subtópicos deste artigo 5 seções

O texto alternativo não é uma legenda universal nem uma oportunidade para repetir palavras-chave. Ele substitui a informação visual quando a imagem não pode ser percebida e depende do contexto da página. A mesma fotografia pode precisar de descrições diferentes em um artigo, num botão ou numa galeria decorativa. Uma revisão eficiente pergunta o que a imagem acrescenta e o que alguém precisa saber para cumprir a tarefa.

Identifique a função antes de escrever

Abra a página ao redor da imagem e pergunte se ela contém informação, executa uma função ou apenas cria atmosfera. Uma foto de produto pode distinguir cor e formato; um gráfico pode comunicar tendência; um ícone dentro de botão pode indicar ação; uma textura de fundo pode ser puramente decorativa. O alt deve atender à função concreta, não narrar cada pixel.

Leitura complementar no acervo da Você Digital: Vendas B2B de uniformes: organize grade de tamanhos e reposição.

Se sua empresa precisa transformar esse tema em ação, conheça a criação de site.

A árvore de decisão da W3C para imagens ajuda a escolher entre uma descrição informativa, funcional, complexa, redundante ou vazia. Quando a imagem repete exatamente uma informação já acessível em texto próximo, outra descrição extensa pode cansar quem usa leitor de tela. Para imagens decorativas, uma alternativa vazia comunica que não há conteúdo adicional a transmitir.

Faça a decisão por componente, não pelo nome do arquivo. Uma foto pode ser informativa numa galeria de casos e decorativa ao lado de um parágrafo que já explica o mesmo exemplo.

Escreva o detalhe que importa

Se a imagem contribui para a compreensão, descreva a informação relevante com linguagem breve. Em uma foto de equipe, pode bastar explicar quem está realizando uma atividade importante; não é necessário inventariar roupas, móveis e cores sem relação com o assunto. Em uma imagem funcional, descreva o destino ou a ação do link em vez do aspecto visual do botão.

Leitura complementar no acervo da Você Digital: Retirada local: organize horários e confirmação dos pedidos.

Evite fórmulas automáticas como “imagem de” quando o leitor de tela já anuncia que se trata de uma imagem. Não coloque lista de palavras-chave, slogan repetido nem texto comercial que não aparece visualmente. Se a imagem contém texto importante, forneça esse conteúdo em texto alternativo ou, preferencialmente, também no conteúdo acessível da página.

Leitura complementar no acervo da Você Digital: Checkout mobile: encontre atritos na compra de acessórios esportivos.

Para um gráfico complexo, um alt curto pode identificar o gráfico e sua mensagem principal, mas os dados e a conclusão precisam estar disponíveis em texto, tabela ou descrição próxima. Não tente enfiar todos os números num atributo de uma linha. A W3C detalha alternativas para imagens conforme seu papel e a quantidade de informação necessária.

Trate imagens funcionais com foco na ação

Se uma imagem é o único conteúdo de um link, a descrição deve ajudar a entender para onde ele leva. Uma miniatura que abre uma fotografia pode dizer “Ampliar foto do produto azul”; uma marca que retorna à página inicial precisa indicar essa finalidade, não apenas recitar a logomarca. Quando texto visível já nomeia o mesmo link, repetir a mensagem pode ser desnecessário.

Leitura complementar no acervo da Você Digital: Navegação por teclado: revise o caminho completo do site.

Ícones decorativos próximos a texto podem ficar sem descrição para não duplicar o rótulo. Ícones que comunicam estado precisam de texto equivalente quando o estado não estiver indicado de outra forma. Teste a experiência com leitor de tela e navegação por teclado para notar repetições, omissões e controles sem nome compreensível.

Leitura complementar no acervo da Você Digital: Texto de link: deixe o destino compreensível sem adivinhação.

Padronizar exemplos ajuda a equipe, mas não crie um modelo que descreva toda imagem como “pessoa usando computador”. A imagem específica, a tarefa e o texto ao redor determinam a descrição.

Leitura complementar no acervo da Você Digital: Formulário de lead: quais perguntas realmente ajudam a equipe.

Organize gráficos, diagramas e imagens de texto

Um gráfico de vendas pode comunicar uma queda seguida de recuperação. O texto alternativo curto pode resumir a mensagem, enquanto uma tabela próxima apresenta valores, períodos e categorias. Num diagrama de processo, introduza as etapas em texto no corpo da página, assim uma pessoa não depende da imagem para descobrir a sequência.

Leitura complementar no acervo da Você Digital: Checklist de manutenção mensal para o site de uma pequena empresa.

Evite incorporar títulos e chamadas essenciais apenas numa imagem promocional. Além de dificultar acessibilidade, texto rasterizado não se adapta tão bem a zoom e tradução. Reproduza a mensagem como texto real e use a imagem como apoio visual. Se uma fotografia for usada para apresentar uma evidência, explique o que ela demonstra e onde estão os detalhes relevantes.

Leitura complementar no acervo da Você Digital: Acessórios de camping: organize conteúdo incluído na embalagem.

Quando a alternativa precisar de uma descrição longa, coloque-a na página e ligue-a a partir do alt curto. Isso mantém o atributo manejável e torna a informação disponível para diferentes usuários.

Leitura complementar no acervo da Você Digital: Expedição de livros: proteja quinas e confira o estado do exemplar.

Revise com leitores e no CMS

Durante a publicação, confira se o campo alt não foi preenchido automaticamente com nome de arquivo, título ou palavras-chave. Leia a página em voz alta, sem olhar a imagem, e avalie se a descrição ajuda a entender o conteúdo ou causa repetição. A W3C apresenta verificações preliminares de acessibilidade (fonte: w3.org), incluindo inspeção de imagens e controles.

Leitura complementar no acervo da Você Digital: Produtos com validade: crie uma rotina simples de conferência.

Dê à equipe editorial uma orientação curta com exemplos de imagens informativas, funcionais, complexas e decorativas. Inclua designer, redator e desenvolvedor porque o contexto pode ser definido no componente visual ou no conteúdo. Ao mudar a posição de uma imagem, revise o alt: a função pode ter mudado mesmo que o arquivo continue o mesmo.

Leitura complementar no acervo da Você Digital: Ferragens online: monte fichas com medidas e unidades claras.

Na revisão, imagine o conteúdo sem a imagem e pergunte qual informação continua necessária para realizar a tarefa. Se a legenda ao lado já identifica um produto, o texto alternativo pode descrever uma característica visual que ainda não foi mencionada. Se a imagem é decorativa e não acrescenta significado, um campo vazio pode ser melhor que uma repetição. Para gráficos, inclua no texto próximo a conclusão e os valores relevantes, porque uma frase curta no atributo alternativo não deve carregar uma tabela inteira. Verifique também ícones que funcionam como links: nesses casos, a alternativa precisa comunicar a ação, não apenas a aparência do desenho.

Leitura complementar no acervo da Você Digital: Estoque de velas: separe fragrâncias para evitar erros de expedição.

Um texto alternativo bom é específico o bastante para transmitir o que importa e curto o bastante para não ocupar a tarefa inteira. Decidir a função, usar contexto e apresentar gráficos complexos também em texto torna páginas mais compreensíveis sem transformar acessibilidade num exercício de preenchimento automático.

Leitura complementar no acervo da Você Digital: Artigos pet: deixe claras as medidas de coleiras e peitorais.

Leitura complementar no acervo da Você Digital: Eletrônicos usados: organize a descrição do estado de conservação.

Leitura complementar no acervo da Você Digital: Afiliados de organização: faça um tutorial para armários pequenos.

Leitura complementar no acervo da Você Digital: Pedidos por encomenda: calcule prazo para peças de madeira.

Leitura complementar no acervo da Você Digital: Utensílios de cozinha: descreva materiais sem exagerar benefícios.

Leitura complementar no acervo da Você Digital: Caixas de presente: prepare um calendário de produção realista.

Leitura complementar no acervo da Você Digital: Frete de tapetes: compare medidas dobradas e enroladas.

Leitura complementar no acervo da Você Digital: Brinquedos com pilhas: explique conteúdo e uso na ficha do produto.

Leitura complementar no acervo da Você Digital: Presentes personalizados: organize a aprovação da arte do cliente.

Leitura complementar no acervo da Você Digital: Peças de reposição: cadastre compatibilidade antes da primeira venda.

Leitura complementar no acervo da Você Digital: Cosméticos em transporte: controle vazamento e calor na entrega.

Leitura complementar no acervo da Você Digital: Papelaria online: organize variações sem confundir os compradores.

Leitura complementar no acervo da Você Digital: Fotos de joias pequenas: mostre escala, brilho e acabamento.

Leitura complementar no acervo da Você Digital: Embalagem para cerâmica: reduza avarias sem inflar o frete.

Leitura complementar no acervo da Você Digital: Core Web Vitals: priorize rapidez nas páginas que ajudam a decidir.

Leitura complementar no acervo da Você Digital: Página 404: oriente o visitante quando um endereço não existe mais.

Leitura complementar no acervo da Você Digital: Títulos de página: use hierarquia para mostrar a estrutura.

Leitura complementar no acervo da Você Digital: Página de agradecimento: confirme o envio e guie o próximo passo.

Conversa aberta

Comentários

Abrir conversa

Nenhum comentário publicado ainda. Compartilhe uma ideia ou dúvida sobre este artigo.