O alt text, ou texto alternativo, comunica a informação ou função de uma imagem quando uma pessoa não consegue vê-la. Deve descrever o que importa em seu contexto, sem acumular palavras-chave. Uma imagem decorativa precisa de um atributo alt vazio; uma imagem que funciona como link ou botão precisa explicar seu propósito. Neste guia da Agencia Cero você verá como escrevê-lo com exemplos e qual é sua relação com o SEO.
O SEO busca facilitar que os buscadores descubram e interpretem conteúdo útil. Por exemplo, uma empresa de cortinas pode explicar seu serviço para quem busca “cortinas rolô Las Condes”, desde que atenda à região. Essa consulta pode orientar uma página, mas não deve ser copiada automaticamente em todas as imagens. O texto alternativo responde ao que cada imagem comunica, não a uma cota de palavras-chave.
Para entender o contexto geral, confira o que é SEO e como evoluiu.
Agencia Cero
O texto alternativo tem uma função de acessibilidade e também fornece contexto aos buscadores. O Google combina o atributo alt com o conteúdo da página e sistemas de visão para interpretar imagens. Uma descrição pertinente pode ajudar a compreendê-las, mas não garante indexação, tráfego nem posição. A prioridade é que alguém que não veja a imagem receba as informações necessárias.
O que é texto alternativo?
Em HTML, o texto alternativo é incorporado por meio do atributo alt da tag img. Leitores de tela podem comunicá-lo, e o navegador pode mostrá-lo se a imagem não carregar. Não é o mesmo que uma legenda visível nem que o atributo title. Sua redação depende de a imagem informar, decorar ou permitir uma ação.
<img src="cortina-roller.jpg" alt="Cortina rolô branca instalada em uma janela">Por que o texto alternativo é importante?
Revisar o texto alternativo importa por três motivos, sem confundir acessibilidade com garantia de posicionamento:
- Acesso ao conteúdo: uma alternativa adequada permite comunicar as informações de uma imagem a pessoas que usam leitores de tela. O texto deve se ajustar à função do elemento; descrever todas as imagens indiscriminadamente pode acrescentar ruído.
- Contexto para a busca: o Google usa o texto alternativo junto com outros sinais para compreender uma imagem. Isso não garante que apareça nos resultados nem que as visitas aumentem.
- Compreensão quando a imagem não está disponível: o texto alternativo pode preservar informações úteis se o arquivo não carregar. Não substitui uma revisão completa de acessibilidade do site.
Como escrever um texto alternativo útil
Antes de escrever, identifique a função da imagem, leia o texto ao redor e decida quais informações seriam perdidas se ela não estivesse visível. Depois, redija uma alternativa breve e suficiente. Os exemplos a seguir são hipotéticos; não descrevem automaticamente a imagem inserida neste artigo.
Identifique a função da imagem
A mesma fotografia pode cumprir funções diferentes conforme a página. Em uma oferta turística, importa identificar o lugar e a atividade. Em um portfólio, a composição ou o enquadramento podem importar. Escolha as informações de que a pessoa precisa para entender o conteúdo, sem acrescentar qualidades ou localizações que você não conhece.
Exemplo: uma foto em uma página de turismo
Imagine uma foto de um barco no Lago Ranco, com montanhas ao fundo, em uma página de passeios. Se você confirmou a localização, uma alternativa poderia ser “Barco de passeio no Lago Ranco, com montanhas ao fundo”. “Turismo de aventura no Lago Ranco” descreve uma oferta, mas, por si só, não explica o que a imagem mostra. Se a foto leva à reserva e não há outro nome acessível, o propósito do link também deve ficar claro.
Em um portfólio, essa mesma cena poderia ser descrita como “Vista panorâmica do lago e das montanhas, com um barco em primeiro plano”, se esses elementos estiverem presentes. Acrescente “fotografia panorâmica” quando o formato trouxer informação relevante. Não use “fotografia profissional” como um rótulo publicitário que substitui a descrição.
Recomendamos que confira 22 Dicas de SEO para Iniciantes
Cristián Hernández G.
Quando incluir uma palavra-chave
Uma palavra-chave pode fazer parte do alt quando nomeia com precisão algo importante da imagem. Por exemplo, “cortina rolô branca instalada em uma janela” faz sentido se isso é visível e relevante para a página. Não acrescente comunas, serviços, preços ou variantes apenas para atrair buscas. Descreva a informação visual ou funcional de que o leitor precisa, mesmo que o resultado não inclua a palavra-chave principal do artigo.
Evite acumular termos como “bolinhos veganos, restaurante vegano, sobremesas veganas”. Se a imagem mostra bolinhos e esse dado é conhecido, “Bolinhos veganos recém-assados em uma bandeja” pode ser mais útil. Não deduza ingredientes ou propriedades que a foto e seu contexto não permitem confirmar.
Descreva as informações relevantes com precisão
Para uma imagem informativa, identifique os elementos que sustentam a explicação: o que aparece, o que acontece e qual detalhe permite compreender a página. Não é preciso inventariar todos os objetos nem narrar sensações que a imagem não comunica de forma verificável.
Use palavras claras e verifique se a descrição corresponde à imagem real. Uma forma de revisá-la é imaginar o que diria a alguém que não a vê e precisa entender o conteúdo. Se o texto próximo já explica a mesma coisa, evite repetição desnecessária e avalie se a imagem acrescenta informação independente.
Qual extensão o texto alternativo precisa ter
Não existe um limite universal de 125 caracteres que garanta a leitura completa em todos os leitores de tela. Busque concisão sem perder informações essenciais. Quando uma imagem contém um gráfico, mapa ou diagrama complexo, ofereça também uma explicação extensa ou uma tabela acessível no conteúdo, em vez de colocar todos os dados no atributo alt.
Em um exemplo hipotético de café da manhã com waffles, mirtilos e chá, uma lista de cada prato, guardanapo e detalhe do fundo pode desviar do importante. Descreva os elementos relevantes para aquela página. Se o objetivo é ensinar a montar uma mesa, alguns detalhes do ambiente podem, sim, ser necessários.
Exemplo: descrever um café da manhã sem perder precisão
Para esse café da manhã, “Waffles com mirtilos e uma xícara de chá” pode ser uma alternativa adequada se a imagem mostrar isso. Não troque waffles por ovos mexidos apenas para abreviar. Normalmente, você pode omitir “imagem de”, porque o leitor de tela já identifica o elemento; mantenha uma referência ao tipo de imagem quando trouxer significado, como em um esquema ou uma captura de tela.
Em um portfólio gastronômico, você poderia destacar a iluminação ou a composição se forem relevantes. No cardápio de uma cafeteria, costuma importar identificar o prato. O nome do estabelecimento ou sua localização deve ser acrescentado apenas se for necessário para entender a imagem ou sua função. Não transforme o alt em uma frase comercial nem atribua à foto um estabelecimento não confirmado.
O que mais revisar nas imagens do site
O alt é uma parte da revisão de imagens. Verifique também dimensões adequadas, tamanho do arquivo, nitidez e carregamento no celular. Você pode avaliar a compressão com ferramentas como JPEG.IO, comparando o resultado com o original: a compressão não garante preservar toda a qualidade. Evite enviar material confidencial a serviços externos sem autorização.
A legenda visível permite explicar contexto, autoria ou detalhes úteis para todas as pessoas. Coloque a imagem perto do texto relacionado e use nomes de arquivo descritivos ao preparar novos recursos. Não repita palavras-chave em alt, legenda e título por obrigação. Verifique se as imagens importantes são acessíveis e revise a página com tecnologias assistivas quando possível.
Como lidar com imagens decorativas, funcionais e complexas
As imagens decorativas, que não fornecem informações nem cumprem uma função, devem ter alt="". Deixar o atributo vazio não equivale a omiti-lo: sem ele, algumas tecnologias podem anunciar o nome do arquivo. Decida conforme o uso concreto; uma foto pode informar em uma página e ser decorativa em outra.
Em uma imagem funcional, como um ícone que é o único conteúdo de um botão, comunique a ação: “Buscar” ou “Baixar catálogo”, conforme o caso. Se o mesmo link já inclui um texto visível que o identifica, um alt vazio pode evitar a repetição. O controle deve sempre manter um nome acessível.
Quando uma imagem contém texto necessário, ofereça essas palavras em uma alternativa acessível e evite usar imagens de texto se puder publicar texto real. Para um gráfico complexo, use uma descrição breve que o identifique e acompanhe-o dos dados e conclusões em texto ou tabela. Não reduza informações essenciais para cumprir um limite arbitrário.
Como revisar o alt antes de publicar
Abra a imagem real, verifique sua função, redija a alternativa e revise a página publicada. Se usar WordPress, verifique o atributo na imagem inserida: mudar um dado na biblioteca de mídia nem sempre atualiza todas as inserções existentes. Teste também os links ou botões que contêm imagens e confirme que seu propósito é compreendido sem vê-las.
Para aprofundar esses critérios, consulte o tutorial de imagens acessíveis do W3C e as recomendações do Google para imagens. Se precisar revisar como conteúdo, navegação e contato se conectam, conheça nosso serviço de design web estratégico ou conte seu contexto em contato.
