Texto alternativo: o que é, como elaborar e adicionar Alt Text

Imagem com ícone de um notebook ao centro e uma mão programando um site incluindo os atributos alt nas imagens..

O texto alternativo é um elemento muito importante para a composição de qualquer imagem. Seja em sites ou em redes sociais, ele é essencial para garantir mais acessibilidade para pessoas cegas ou que dependem de leitores de tela

O que é texto alternativo?

Imagine que você esteja de olhos fechados e esteja navegando pela web contando apenas com a sua audição. Você irá descobrir tudo que existe na página que está acessando por meio de leitores de tela, que fazem a leitura do código do site. Ler textos é fácil, mas o que acontece quando a ferramenta se depara com uma imagem? Ou ela vai te avisar que existe uma imagem ali, mas você nunca conseguirá saber do que se trata, ou irá te descrever a imagem com base em textos alternativos.

O texto alternativo, também conhecido como alt text, alt tags ou descrições alt, é utilizado para descrever o conteúdo de uma imagem. Ele aparece no lugar da imagem quando ela não consegue ser carregada. Ainda, ele permite que os mecanismos de pesquisa rastreiem e classifiquem seu site de uma melhor forma. Por último, e não menos importante, o texto alternativo é a maneira como os leitores de tela conseguem descrever imagens.

O que é texto alternativo no Instagram, Facebook e LinkedIn?

Nas redes sociais, como Instagram, Facebook e LinkedIn, o texto alternativo funciona da mesma forma, descrevendo o conteúdo das imagens. Normalmente, a função de alt text está presente nas configurações de acessibilidade dessas redes, mas vamos falar disso mais a fundo daqui a pouco. 

É importante ressaltar que o texto alternativo não é exatamente a mesma coisa da #PraCegoVer, apesar de cumprirem funções bem parecidas! As descrições alt ainda precisam ser inseridas nas imagens de qualquer forma, para poderem ser reconhecidas pelos leitores de tela.

Qual o objetivo do texto alternativo?

Além de auxiliar o usuário em situações, como um erro no carregamento da imagem devido a uma conexão ruim ou até um erro na url da imagem, o texto alternativo é também de suma importância para as pessoas com deficiência visual. Visto que é pela descrição da imagem que as pessoas cegas conseguem identificar do que se trata o “gráfico” (nome dado pelos leitores de tela para sinalizar que naquele local existe uma imagem, mesmo quando não existe o atributo alt na tag <img>).

É isso mesmo! Quando não colocamos um alt em nossa tag, as pessoas com deficiência visual sabem que existe uma imagem no conteúdo do seu site, porém, não sabem do que se refere, o que traz uma experiência muito ruim para a pessoa usuária.

Por que o texto alternativo é importante para SEO de imagens?

Certo, sabemos que o alt é um atributo obrigatório, indispensável, e que não se deve nem discutir sobre não utilizá-lo. Mas como isso funciona?

Da mesma forma que as tecnologias assistivas conseguem ler sites, os mecanismos de busca também. É aí que SEO entra. O alt text é lido pelo Google e ajuda muito na indexação do site. Inclusive, podemos trabalhar as palavras-chaves no próprio texto alternativo para ajudar na otimização dos buscadores.

Quando se cria um conteúdo com o foco em acessibilidade, já estamos realizando uma otimização para os motores de busca, o chamado SEO (Search Engine Optimization).

Como elaborar um texto alternativo?

Criar um texto alternativo pode parecer difícil para quem nunca teve que fazer isso antes, mas é mais simples do que parece. Primeiro, você precisa se fazer algumas perguntas:

  • Por que esta imagem existe neste contexto?
  • Por qual motivo ela aparece para o meu usuário?
  • O que eu desejo transmitir ao meu usuário com esta imagem?

Com isso em mente, te damos algumas dicas a seguir para que você possa produzir os melhores alt texts:

  • Descreva a imagem e seja específico;
  • Evite adjetivos e seja o mais objetivo possível;
  • Mantenha seu texto alternativo com no máximo 125 caracteres;
  • Não comece o texto alternativo com “foto de…” ou “imagem de…”;
  • Use suas palavras-chaves, mas com moderação;
  • Não abrevie palavras;
  • Nomeie quem está na foto;
  • Não utilize alt text em imagens “decorativas”. Nesse caso, substitua a tag <img> por um background no CSS. Assim você não confunde a pessoa usuária do leitor de telas mostrando uma imagem que ela não precisa reconhecer.

Lembre-se: o ALT sempre deve estar presente em imagens que representam um conteúdo da página. O title é um atributo complementar para algumas tags HTML e deve ser utilizado somente em casos onde o próprio conteúdo do link não seja suficiente para descrevê-lo.

Procure não repetir informações na imagem que já existem no texto. Lembre-se que em casos de imagens com detalhes relevantes, como gráficos, mapas ou outra imagem com informações, deve-se descrever com mais precisão. Nesse caso, não tem problema que o alt tenha um conteúdo mais extenso.

Exemplos de texto alternativo

Para garantir que você não tenha dúvidas de como são os textos alternativos na prática, separamos alguns bons exemplos para se inspirar, e também alguns ruins para saber o que não fazer. Confira!

Texto alternativo bom

Vamos imaginar um site de notícias. Neste site existe um artigo que conta sobre uma ONG que ajudou uma comunidade carente com agasalhos e alimentos. Dentro deste conteúdo temos uma imagem que mostra as pessoas da ONG X entregando as doações para a comunidade. Então, criamos um alt com a seguinte descrição: “Responsáveis da ONG X entregam doações à comunidade carente”.

Agora, quando a imagem tem mais um objetivo, como trabalhar a palavra-chave: “São Paulo” e “Amigos do bem”, o texto alternativo pode ser um pouco mais extenso. Neste exemplo, a palavra “São Paulo” teria o intuito de que o Google indexasse a notícia para esta região. Enquanto isso, a palavra “Amigos do Bem”, seria um nome popular da ONG, como as pessoas da região conhecem. Como faríamos neste caso? A descrição poderia ser: “Amigos do bem (ONG X) entregam doações à comunidade carente em São Paulo”.

Texto alternativo ruim

Textos alternativos ruins normalmente são muito longos, ou então são muito opinativos. Já falamos que os alt texts devem ser objetivos, então é importante lembrar de não colocar sua própria opinião nas descrições.

Por exemplo, pensando no mesmo cenário que já imaginamos acima, um exemplo do que não fazer poderia ser: “Responsáveis da ONG Amigos do bem entregam doações de arroz, feijão, farinha e açúcar em 5 caixas à comunidade carente em São Paulo. Todos parecem muito felizes enquanto usam camisas com o logo da ONG”.

Percebeu a diferença?

Como adicionar texto alternativo às suas imagens?

Como já comentamos aqui, essa não é uma tarefa difícil. No entanto, é importante saber que a forma de adicionar textos alternativos no seu site será diferente da maneira como você fará isso nas redes sociais. Venha entender melhor.

Como colocar o texto alternativo no site?

Para adicionar o texto alternativo em sites, você precisa mexer no código e estrutura do site. Ele é inserido através do atributo alt na tag <img>.

Mas calma, mesmo quem não tem conhecimento de programação pode fazer isso tranquilamente. Normalmente, nas próprias plataformas de criação de site, já existem espaços designados para a inserção do alt text. Assim, você pode ter um site bonito e acessível, não dá para ser melhor não é mesmo?  

Como colocar o texto alternativo no Instagram?

Basta seguir este passo a passo para adicionar textos alternativos no Instagram:

  • Suba uma foto normalmente no aplicativo;
  • Antes de salvar e postar, clique em “Configurações avançadas”;
  • Clique em “Escrever texto alternativo”;
  • Descreva a foto;
  • Clique em “Salvar”.

Super fácil, não é mesmo?

Como colocar o texto alternativo no Facebook?

Confira o passo a passo de como colocar texto alternativos no Facebook:

  • Suba uma foto normalmente no aplicativo;
  • Antes de salvar e postar, passe o mouse sobre a foto e clique em “Editar”;
  • Um texto será gerado automaticamente e mostrado no lado esquerdo da sua foto. Clique em “Substituir texto alternativo gerado” para editar;
  • Escreva seu texto alternativo. Para voltar ao texto gerado automaticamente, clique em “Limpar”;
  • Clique em “Salvar” no canto inferior esquerdo.

Agora você já sabe tudo que precisa para incluir alt texts nos seus conteúdos!

Como acessar texto alternativo?

Como usuário, para conseguir acessar os textos alternativos das imagens, existem dois caminhos. Como já comentamos, você pode fazer isso por meio de leitores de tela. Caso ainda não tenha uma ferramenta de leitura de tela no celular, você pode ativar essa funcionalidade direto nas suas configurações de acessibilidade.

Outra opção, essa já mais voltada para programadores ou especialistas em acessibilidade, é checar diretamente no código dos sites

Conclusão

Como você já pôde perceber, o texto alternativo é uma ferramenta super importante para o sucesso do seu site. Além de ajudar no seu rankeamento em mecanismos de busca, também contribui para criar uma melhor experiência ao usuário. 

Se você quer continuar aprendendo sobre ferramentas de acessibilidade digital, não deixe de conferir nosso blog!

Voltar ao topo