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

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

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 os deficientes visuais. Visto que é pela descrição da imagem que os cegos 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, os deficientes visuais 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.

 

Tecnologias assistivas: Banner retangular, na horizontal, de fundo verde-água. No canto esquerdo, há uma mão saindo da tela de um computador, entregando um livro de capa verde-água com o símbolo de acessibilidade da ONU para outra mão, fora do computador. Ao lado da figura há o texto na cor branca "[Kit gratuito] Guia completo para tornar o seu website acessível. No canto direito do banner há um botão retangular e laranja com a chamada "BAIXE O KIT GRÁTIS" escrita em branco. Fim da descrição.

 

Como fazer um alt de qualidade

Agora, se a imagem é referência para o conteúdo, procure ser 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 eu tenho 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

Compartilhe esse post!


Rating: 5.0. From 2 votes.
Please wait...

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *