Tag Archives: alt

Explorando o atributo ALT

Em praticamente todas as minhas palestras eu falo da importância do atributo ALT nos elementos de imagens. Reforço que além de garantir a acessibilidade em elementos não textuais, a descrição curta de uma imagem também é indexada por ferramentas de busca, o que envolve diretamente o posicionamento da páginas em ranking das buscas, ou simplesmente SEO. O vídeo abaixo de Matt Cutts (Google) fala um pouco sobre a importância da utilização do atributo ALT para SEO e acessibilidade.

A ideia de fazer esse post (e esse teste) surgiu quando eu estava procurando por uma foto razoavelmente famosa no Google imagens, de quatro jovens em uma mesa com copos plásticos na sua frente. Fiz a busca por diversas formas “happy hour nerd”, “quadro amigos em uma mesa”, “foto antiga de quatro jovens em uma mesa com copos de plástico” e por ai vai. Não encontrei o que procurava.

O objetivo deste post é fazer um teste simples com algumas imagens. Publiquei algumas imagens inicialmente com o atributo ALT em branco e depois de alguns dias descrevi adequadamente cada uma delas. Os testes nas duas situações foram os seguintes:

  • - Utilizar ferramentas automáticas de verificação de SEO antes e depois de colocar o atributo ALT
  • - Fazer a busca pela imagem utilizando textos da sua descrição

Antes de começar o teste, vale a pena citar a importância do atributo ALT na própria recomendação do W3C:

A imagem dada pelo atributo SRC é o conteúdo integrado, o valor do atributo ALT fornece conteúdo equivalente para aqueles que não podem processar imagens ou que tenham o carregamento de imagens desativado.

Tradução livre do parágrafo disponível em http://www.w3.org/TR/html5/embedded-content-0.html#attr-img-alt

As imagens para o teste foram tiradas por mim e a princípio são inéditas, apesar do gosto duvidoso.

Foto de um pão francês em um prato branco

Foto de uma ampulheta

Foto de uma placa com o mapa do zoológico de São Paulo

Este post sofreu atualizações, que foram detalhadas no momento da sua publicação.

Atualização 01 – 23/02/2014 as 23:11

Em um primeiro teste em duas ferramentas online de verificação de SEO, um deles considerou positivo o atributo ALT nas imagens, mas ignorou que eles estão em branco. Um segundo detectou que o atributo ALT está em branco e apontou como falha em SEO na página. Vou testar mais ferramentas antes de selecionar ao menos três delas para este experimento.

Atualização 02 – 06/03/2014 as 08:05

Eu havia esquecido de configurar o robots.txt do blog e por isso demorou um pouco para a indexação do conteúdo. Fiz uma busca rápida por palavras-chave das imagens e, claro, não trouxeram nenhum resultado.

Resultado da busca do google pelo nome do site

Resultado da busca no google por uma palavra chave da primeira foto

Resultado da busca no google por uma palavra chave da segunda foto

Resultado da busca no google por uma palavra chave da terceira foto

O próximo passo é fazer os experimentos com as ferramentas de SEO e imagens sem o atributo ALT preenchido e depois refazer os testes com o texto adequado em cada uma delas. Retirei também o conteúdo do atributo ALT das figuras acima para não interferir no resultado do experimento.

Atualização 03 – 07/03/2014 as 07:15

Fiz os testes com algumas ferramentas online automáticas de SEO na página. O foco foram apenas as imagens e seus atributos ALT preenchidos. Utilizei três ferramentas online para esse experimento.

O uso dessas ferramentas no post não significa que estou endossando ou recomendando seu uso. Todas elas foram escolhidas de forma aleatória para este experimento.

Site Analyser

O site gera um resultado baseado nos pontos de validação. No caso das imagens, elas são consideradas como elementos multimídia. As imagens abaixo mostram o resultado da verificação das imagens com e sem o atributo ALT declarado. O resultado foi interessante.

Imagem da avaliação da ferramente “Site Analyser” sem o atributo ALT das imagens preenchido

Percentual de 48,82% para elementos multimídia, o que significa um número baixo.

Imagem da avaliação da ferramenta “Site Analyser” com o atributo ALT das imagens preenchido

O ranking passou para 64,12% com o uso adequado do atributo ALT

WooRank

Faz toda a verificação da página e gera um resultado final em forma de ranking. Cada item corrigido melhora o posicionamento. Com relação ao atributo ALT das imagens, o impacto foi pequeno mas perceptível.

Imagem da avaliação da ferramenta “WooRank” sem o atributo ALT das imagens preenchido

O ranking da verificação foi de 41,1%

Imagem da avaliação da ferramenta “WooRank” com o atributo ALT das imagens preenchido

O ranking da verificação foi de 41,9%

SEO Workers

Com relação as imagens, a ferramenta identifica quantas existem e quantas não tem seu atributo ALT declarado. A ferramenta mostra uma tabela para que possa ser feito um teste com as palavras-chave que estão dentro do atributo ALT nos buscadores Google, Yahoo e Bing.

Imagem da avaliação da ferramenta “SEO Workers” sem o atributo ALT das imagens preenchido

O site exibe um aviso de que não foram encontradas imagens com o atributo ALT declarado

Imagem da avaliação da ferramenta “SEO Workers” com o atributo ALT das imagens preenchido

A verificação mostra as palavras chave encontradas dentro do atributo ALT e possibilita que o usuário as teste em ferramentas de busca

Depois do teste, todas as imagens deste post tiveram seu atributo ALT declarado. Agora é só esperar a indexação pelo Google para concluir o teste.

Atualização 04 – 11/03/2014 as 08:22

Hoje o Google indexou a página novamente com os devidos textos alternativos das fotos. Todas as palavras que estavam no atributo ALT das imagens do experimento foram indexadas.

Imagem do resultado da busca pelas palavras-chave pão, mapa e ampulheta no blog reinaldoferraz.com.br

Conclusão – Parte 1

O objetivo desse experimento foi apenas mostrar como os textos dentro do atributo ALT são indexados por ferramentas de busca e como eles auxiliam na busca por informações que estão somente em imagens. O resultado foi bem satisfatório já que foi possível verificar como as ferramentas indexam os textos dentro do atributo ALT.

O atributo ALT é fundamental para a acessibilidade na Web, já que descreve conteúdo não textual que está em um elemento de imagem. Porém, o texto declarado dentro desse atributo tem uma importância enorme na semântica, já que auxilia na descrição de um elemento não textual e em SEO, pois ferramentas de busca indexam o conteúdo em texto desse atributo, possibilitando novas formas de acesso ao conteúdo da página.

Da próxima vez que publicar uma imagem na Web, pense bem em como descrever essa imagem. Essa descrição pode ser a única forma de encontrar essa imagem por uma ferramenta de busca.

PS: Ainda não consegui encontrar a foto que eu procurava no início desse post.

Atualização 05 – 11/03/2014 as 15:50

Encontraram a foto utilizando o termo “table nerds meme”. Obrigado ao André Nogueira pela ajuda!


Atualização 06 – 29/02/2016 as 11:45

Depois de ter conseguido bons resultados e extrair informações relevantes deste post, surgiu uma nova situação que eu gostaria de explorar ainda neste estudo: Se as ferramentas de busca conseguem obter o significado da imagem por textos aproximados.

Mais adiante vou descrever com detalhes essa nova fase da pesquisa, mas por enquanto vou apenas publicar a imagem abaixo sem o atributo ALT declarado e com uma breve descrição próxima a imagem. Após a indexação, avaliarei como essa informação é indexada.

A imagem abaixo é a foto de um rádio relógio cinza.

Saxofone descrição desta foto do rádio relógio é um experimento para verificar a indexação

A imagem acima é uma foto de um despertador digital.

Atualização 07 – 18/03/2014 as 12:15

Depois de alguns dias, esta página foi indexada novamente com as atualizações relacionadas a última foto. Coloquei uma foto sem o atributo ALT declarado, porém com texto descrevendo a imagem antes e depois. Abaixo, apresento parte dos resultados:

Primeiramente, é importante ressaltar que a descrição da imagem auxilia o Google a organizar a busca por imagens do site. Conforme mostra a imagem abaixo, a busca por imagens na página pela palavra “ampulheta” traz a foto da ampulheta como o primeiro resultado.

Captura de tela do resultado da busca por imagem pela palavra ampulheta. O resultado traz a foto da ampulheta em primeiro lugar

Sendo assim, gostaria de compreender como a busca se comportaria com uma imagem que não tem o atributo ALT declarado, apenas textos próximos. O resultado para a busca pelo termo “rádio relógio” foi o seguinte:

Captura de tela do resultado da busca por imagem pela palavra rádio relógio. O resultado traz a foto do rádio relógio em primeiro lugar

O Google trouxe como primeiro resultado a foto do rádio relógio, mesmo sem o atributo ALT declarado.

O teste seguinte foi clicar em cada uma das imagens. Quando clicamos em alguma imagem o Google traz uma informação em texto daquela figura. Quando clicamos na foto da ampulheta, por exemplo, o resultado é o seguinte:

Detalhe da busca por imagem da palavra ampulheta. A imagem mostra o detalhe ao clicar na imagem, que traz a informação do atributo alt

No caso da foto do rádio relógio, o Google trouxe o seguinte resultado:

Detalhe da busca por imagem por rádio relógio. A imagem mostra o detalhe ao clicar na imagem, que traz a informação que vem antes da foto

No caso da foto do rádio relógio, o Google traz a informação que vem antes da imagem, desconsiderando o texto que foi colocado logo depois.

A próxima etapa do experimento com a busca por imagem vai ser declarar o atributo ALT da imagem com uma palavra aleatória e verificar como a busca se comporta com essas novas informações.

Atualização 08 – 29/03/2014 as 09:03

Atualizei a imagem e aguardei pela indexação do Google. Utilizei a palavra “saxofone” no atributo alt da imagem. Ao fazer uma busca por essa palavra por imagens, o Google me trouxe o seguinte resultado:
Detalhe da busca por imagem por saxofone. A imagem mostra o detalhe ao clicar na imagem, que traz a informação do atributo alt da imagem
Além de trazer a foto do rádio relógio como a primeira (o que já era esperado), o Google substituiu o texto do detalhe da imagem. Enquanto o atributo ALT não estava declarado, o Google utilizava o texto que vinha antes da imagem como descrição detalhada. Com o atributo ALT declarado, agora o Google faz uso do texto dentro desse atributo para dar maiores detaohes sobre a imagem.

Conclusão – Parte 2

Declarar o atributo ALT nas imagens ajuda também na busca por imagens. O Google organiza a busca por imagens baseado no texto dentro desse atributo.

Além disso, o texto do atributo ALT também é exibido quando fazemos uma busca por imagens. Caso não exista um texto dentro do ALT na figura, o texto que vem antes da imagem é utilizado como descrição.

Resumindo esse enorme post: Utilize texto relevante dentro do atributo ALT nas imagens