Início » Blog » Acessibilidade » Porque, como e quando usar o atributo alt nas imagens do seu site

Porque, como e quando usar o atributo alt nas imagens do seu site

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

O texto alternativo é utilizado para descrever o conteúdo de uma imagem. Ele é inserido através do atributo alt na tag <img>. 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, é 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 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 o usuário.

O que o alt tem a ver com o rankeamento no Google?

Certo, sabemos que o alt é um atributo obrigatório, indispensável, e que não se deve nem discutir sobre não utilizá-lo. O alt também é lido pelo Google e ajuda muito na indexação do site, mas como podemos trabalhar as palavras-chaves 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).

As primeiras perguntas que precisamos nos fazer são:

  • 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?

Ao responder estas perguntas, se em uma delas for observado que a imagem é desnecessária, então não utilize uma tag <img> para este conteúdo.  Se o seu objetivo é meramente ilustrativo, nesse caso, substitua a tag <img> por um background no CSS. Assim você não confunde o usuário do leitor de telas mostrando uma imagem que ele não precisa reconhecer.

Imagem de fundo roxo, com o sinal de acessibilidade à esquerda. Ao lado direito da figura está escrito: o guia final de ferramentas de acessibilidade digital.

Como fazer um atributo alt de qualidade

Agora, se a imagem é referência para o conteúdo, procure ser deixar tudo claro e objetivo. Por exemplo, 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, neste caso, criamos um alt com a seguinte descrição: “Responsáveis da ONG X entregam doações à comunidade carente”.

O texto deve ser simples e direto a respeito do que se trata a figura, porém, quando a imagem tem mais um objetivo, como trabalhar a palavra-chave: “São Paulo” e “Amigos do bem”, neste exemplo, a palavra “São Paulo” teria o intuito de que o Google indexasse a notícia para esta região e já a palavra “Amigos do Bem”, seria mais 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”.

Neste caso, a descrição da imagem ficará um pouco mais extensa, porém, não sairá do foco em descrever o que se refere a imagem, além, de conseguir trabalhar as palavras-chaves adequadamente. A única preocupação que é preciso ter, é que seja o mais breve e direto possível, não é necessário escrever um outro texto explicando toda a imagem, a não ser em casos de que a imagem seja um quadro, e seja importante criar uma descrição explicando todos os traços daquela pintura, dessa forma, é imprescindível ter uma descrição mais longa.

Outro ponto importante. Observe o exemplo abaixo:

<a href=”link” title=”Ir para o twitter (link externo)” target=”_blank”> <img src=”image” alt=”Icone do Twitter”> </a>

Neste caso, temos a imagem do ícone do Twitter dento da tag <a> que ao clicar envia para um “link externo”, ou seja, para outra aba do navegador. Dessa forma, é importante sinalizar que estamos indo para outra aba, e no exemplo acima, esta sinalização é passada no title da tag <a> com o termo utilizado: “link externo”.

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 e neste caso, não tem problema que o alt tenha um conteúdo mais extenso.

Por: Thabata Marchi

Voltar ao topo