O texto alternativo é um dos elementos de acessibilidade digital mais negligenciados, mas de maior impacto.
Independentemente de você estar criando um site, escrevendo um blog ou agendando uma postagem social, adicionar um texto alternativo bem pensado e descritivo faz uma diferença real para as pessoas que dependem de leitores de tela ou de outra tecnologia assistiva.
Mas escrever um texto alternativo eficaz nem sempre é simples. O que você diz sobre um gráfico? As imagens dos produtos precisam de detalhes? Quando é melhor deixar o texto alternativo em branco?
Neste guia, abordaremos tudo o que você precisa saber sobre as práticas recomendadas de texto alternativo, com exemplos reais de texto alternativo. Em apenas alguns instantes, você estará mais bem posicionado para escrever descrições de imagens que melhorem a acessibilidade, impulsionem o SEO e atendam aos principais padrões de conformidade.
O texto alternativo, abreviação de “texto alternativo”, é uma descrição escrita de uma imagem. Geralmente aparece no código HTML como uma linha visível de texto ao lado da imagem ou como uma descrição mais longa em uma página separada acessada por meio de um link.
O texto alternativo é incrivelmente importante para pessoas com deficiência visual, pois fornece um contexto essencial que, de outra forma, você perderia. Ele transforma imagens em palavras, tornando o conteúdo mais inclusivo e mais fácil de navegar.
O texto alternativo foi originalmente criado para melhorar a acessibilidade digital, e essa continua sendo sua função mais importante atualmente. Para usuários cegos e com baixa visão, os leitores de tela usam texto alternativo para descrever imagens em voz alta, ajudando-os a navegar e entender o conteúdo visual.
Mas o texto alternativo não serve apenas para a tecnologia assistiva. Quando bem escrito, ele também contribui para melhorar o SEO.
Isso ocorre porque os mecanismos de pesquisa não conseguem “ver” imagens. Eles dependem do texto alternativo, juntamente com os nomes dos arquivos, para interpretar o que uma imagem mostra. Isso significa que o texto alternativo relevante, que usa palavras-chave naturalmente, pode melhorar a classificação de suas páginas nos resultados de pesquisa de imagens.
O melhor texto alternativo é específico, conciso e relevante para a finalidade da imagem. Aqui estão algumas dicas práticas para orientar sua redação:
Seguindo essas práticas recomendadas, você criará um texto alternativo que é realmente útil para os usuários. Para ver esses princípios em ação, dê uma olhada nos exemplos de texto alternativo abaixo.
O que pode surpreender você é que nem todo texto alternativo deve ser escrito da mesma maneira.
Por que? Porque tipos diferentes de imagens exigem abordagens diferentes.
Mas, independentemente de você estar trabalhando com gráficos, conteúdo de mídia social ou fotos de produtos, o objetivo é sempre o mesmo: descrever o que importa, de uma forma que esteja conectada ao contexto da imagem e que ofereça suporte à experiência do usuário.
Vamos examinar como você deve abordar a cópia alt para cada tipo de imagem:
Como o nome sugere, as imagens informativas transmitem informações importantes que não estão escritas em outra parte da página.
[Imagem:] Tela de um laptop mostrando o painel de controle das configurações de privacidade de um usuário.
Texto alternativo: Painel de controle das configurações de privacidade que mostra as opções de rastreamento de localização, preferências de marketing e compartilhamento de dados.
Essa descrição se concentra no que é visível e relevante para o contexto da imagem, sem explicar demais.
Imagens decorativas não acrescentam conteúdo significativo. Elas existem apenas para fins estéticos e devem ser ignoradas por leitores de tela e outras tecnologias de assistência.
[Imagem:] Um padrão de fundo de ondas azuis.
Texto alternativo: alt=”” (vazio)
Use um atributo alt nulo, como no exemplo acima, para que a tecnologia assistiva possa ignorar a imagem e seguir em frente.
As tabelas e os gráficos transmitem dados complexos, que podem parecer difíceis de condensar em um texto alternativo.
A resposta? Seu texto alternativo deve simplesmente resumir a principal conclusão do gráfico ou da tabela.
[Imagem:] Um gráfico de barras mostrando as taxas de engajamento de banners de cookies por design.
Texto alternativo: Gráfico de barras mostrando que os banners com menos opções têm taxas de consentimento mais altas do que os banners com opções granulares.
Se houver mais detalhes, você pode considerar fornecer uma descrição mais longa no texto próximo ou criar um link para uma alternativa de texto.
As imagens dos produtos devem ser descritas com detalhes visuais importantes que ajudem os usuários a entender o que está sendo vendido.
[Imagem:] Um par de fones de ouvido sem fio em um fundo branco.
Texto alternativo: Fones de ouvido sem fio sobre o ouvido na cor preta, com almofadas acolchoadas e faixa de cabeça ajustável.
Isso é especialmente importante para a acessibilidade e a usabilidade do comércio eletrônico.
A mídia social não é exceção quando se trata de escrever texto alternativo. Ao compartilhar conteúdo visual em canais sociais, inclua um texto alternativo conciso, mas descritivo, que descreva a imagem de uma forma relacionada ao contexto da publicação.
[Imagem:] Uma equipe reunida em torno de um quadro branco durante uma reunião.
Texto alternativo: Equipe de marketing fazendo brainstorming de ideias de campanha em um quadro branco coberto de notas adesivas.
A maioria das plataformas, como X, LinkedIn e Instagram, agora suporta texto alternativo, portanto, não há desculpa para ignorá-lo, garantindo que todos na comunidade possam acessar seu conteúdo.
Mesmo com as melhores intenções, é fácil errar no texto alternativo. Aqui estão algumas das armadilhas mais comuns e como você pode evitá-las:
O texto alternativo, como “Imagem de um gráfico” ou “Foto de um produto”, não oferece nenhum contexto útil. Seja específico. O que o gráfico mostra? Que tipo de produto é esse?
O texto alternativo não é o lugar para ensaios completos. Descrições muito detalhadas podem sobrecarregar os usuários de leitores de tela e interromper o fluxo. Seja breve e direto – apenas algumas palavras são suficientes ou, no máximo, duas frases claras e focadas.
O texto alternativo que está repleto de palavras-chave e não tem uma descrição real não ajuda os usuários nem os mecanismos de pesquisa. Lembre-se de se concentrar primeiro na clareza – quando o texto alternativo for realmente útil, você pode ter certeza de que os benefícios de SEO virão logo em seguida.
Se a legenda da imagem ou o texto próximo já disser a mesma coisa, você não precisará repeti-la no texto alternativo. Concentre-se apenas no que a própria imagem acrescenta.
Botões, ícones e links com imagens devem ter um texto alternativo descritivo que explique sua função, como “Enviar formulário” ou “Baixar PDF”, e não apenas “seta” ou “ícone”.
Se você estiver gerenciando conteúdo em diferentes plataformas, certifique-se de que o texto alternativo funcione de forma consistente em todas elas, inclusive em celulares e publicações sociais. A acessibilidade não deve parar no seu site.
Evitando esses erros comuns e usando as ferramentas certas, você estará mais perto de criar uma experiência mais acessível e fácil de usar.
Depois de escrever o texto alternativo, como você sabe que ele está funcionando?
É importante testar se o seu texto alternativo funciona bem na prática, tanto para leitores de tela quanto para a experiência geral do usuário.
Veja como você pode testar e melhorar as descrições de suas imagens:
Tente navegar no seu site com um leitor de tela como o NVDA (Windows) ou o VoiceOver (macOS). Isso dá a você uma visão direta de como o seu texto alternativo é lido em voz alta e se ele faz sentido no contexto.
A desativação de imagens no navegador é uma maneira rápida de visualizar o texto alternativo que aparece no lugar de cada imagem. Essa pode ser uma boa maneira de descobrir descrições que parecem confusas ou redundantes e que precisam ser editadas.
Use ferramentas automatizadas para ajudar a descobrir erros que possam afetar os leitores de tela, além de outros problemas de acessibilidade.
Se você tiver acesso a testadores que usam tecnologia assistiva, o feedback deles é a melhor coisa que você pode obter. Pergunte se o texto alternativo parece útil, conciso e consistente e faça ajustes com base nas sugestões.
Depois que você tiver otimizado o texto alternativo, monitore o tráfego de pesquisa relacionado à imagem no Google Search Console. Se suas imagens começarem a aparecer em resultados relevantes, você saberá que suas descrições também estão funcionando para os mecanismos de pesquisa.
A otimização do texto alternativo é um processo contínuo, mas seguir essas etapas ajudará você a permanecer no caminho certo e a criar uma experiência digital mais inclusiva.
Se você pretende atender aos padrões de acessibilidade, o texto alternativo não é opcional. As WCAG ( Web Content Accessibility Guidelines ) estabelecem expectativas claras sobre como as imagens devem ser tratadas para dar suporte a usuários com deficiências visuais, inclusive:
O cumprimento desses padrões ajuda você a criar um site mais inclusivo. E também pode ajudar a reduzir o risco legal, especialmente para organizações que operam em áreas onde as leis de acessibilidade, como a Lei de Acessibilidade Europeia, são aplicadas.
O texto alternativo pode ser um pequeno detalhe, mas tem um grande impacto.
Isso torna seu conteúdo mais inclusivo. Ele ajuda você a atender aos padrões de acessibilidade. Isso aumenta o SEO.
Mas o mais importante é que ele melhora a experiência de pessoas reais que dependem da tecnologia assistiva todos os dias.
Ao seguir as práticas recomendadas e evitar os erros comuns descritos acima, você pode começar a tornar a acessibilidade uma parte natural do seu processo de conteúdo.
Saiba mais sobre Dê uma olhada no nosso WayWidget e ajude mais pessoas a acessar seu site.
