Karuta’s ASP & M$ SQLserver

Dicas, códigos e outras coisinhas de meus estudos para não esquecer…

Uso correto do atributo ALT em imagens

Posted by karuta em agosto 27, 2009

Ao assistir uma palestra sobre SEO e SEM da Martha Gabriel presenciei um dos participantes do evento perguntar sobre o “problema do atributo alt no Firefox”. Essa sempre foi uma afirmação dos meus alunos no curso de Web Standards na BR Multimídia. Sendo assim resolvi escrever esse artigo para esclarecer aos iniciantes de Web Standards, Acessibilidade e SEO o que realmente acontece e o uso correto do atributo ALT para imagens no HTML.

Muitas pessoas usam o atributo alt em imagens esperando o hint que aparece quando o cursor do mouse é posicionado sobre a imagem, mas no Firefox isso não acontece. Alguns que não conhecem as reais funcionalidades desse atributo falam que é um erro do Firefox, Opera, Safari etc.

Comportamento do atributo ALT no IE e browsers modernosO hint que aparece quando o cursor do mouse está sobre uma imagem não é papel do ALT e sim do atributo TITLE. Nos browsers que seguem mais a risca as especificações de Web Standards o hint só poderá ser visto com o uso do atributo TITLE.

Você deve estar pensando agora que isso é um erro do IE. Alguns podem ter esse ponto de vista, mas você vai perceber que quando insere um atributo TITLE em uma imagem o IE ele substitui o ALT no hint. Já que isso acontece podemos entender que o IE simplesmente usa o ALT em mais uma funcionalidade caso o usuário não esteja usando o atributo TITLE, mesmo assim seria melhor que ele seguisse a especificação para não gerar confusões.

Usando corretamente o atributo ALTVamos esclarecer então para que serve o atributo ALT. Como a própria abreviação sugere o atributo ALT se refere a um texto alternativo e deve ser usado nos seguintes contextos:

Texto alternativo para imagens. Quando um usuário desabilita o carregamento de imagens em seu browser ou dispositivo o texto do alt é exibido no lugar da imagem. No caso de algum erro acontecer no carregamento da imagem o texto alternativo também será exibido. Caso a imagem possua algum link a sua funcionalidade também poderá ser referenciada no alt, aumentando assim a usabilidade caso a imagem não seja carregada.
Texto alternativo para acessibilidade. Leitores de tela e leitores de código usados por portadores de necessidades especiais irão ler o atributo alt para descrever a imagem.
Só para salientar o atributo ALT e de uso obrigatório para imagens.

Atributo ALT e SEOO atributo ALT também pode ser usado para otimização de conteúdo on-page, mas com muito bom senso.

Uma das primeiras regras ao se otimizar o uso de palavras chave é se lembrar que o conteúdo em primeiro lugar deve ser criado para os usuários e não para sistema de busca. Em se tratando de acessibilidade e o uso do atributo ALT para imagens essa regra também deve ser seguida. Apesar do texto do ALT não ser lido normalmente na página, ele vai ser usado por leitores de tela e de código. Sendo assim não se deve inserir somente palavras chave no texto do ALT e sim escrever uma descrição condizente com o conteúdo da imagem em equilíbrio com a inserção de palavras chave.

Erros quanto ao uso e não uso do atributo ALTExistem erros muito comuns quanto a aplicação do Atributo ALT, vou numerar alguns deles abaixo:

O não uso do Atributo ALT que é obrigatório para imagens de conteúdo.
Atributo ALT vazio somente para passar em validações de código. Todo atributo ALT deve ter uma pequena descrição da imagem.
Atributo ALT vazio gerado por editores de código. Diversos editores de código e editores visuais inserem automaticamente o atributo ALT vazio. Por isso afirmo que o código deve ser verificado antes de sua publicação, pois nenhum editor HTML é perfeito.
Atributo ALT igual para todas as imagens de conteúdo de uma página.
Atributo ALT somente para gerar hint do mouse. Como explicado acima o hint é uma funcionalidade do atributo Title. Caso tenha necessidade do hint use o atributo TITLE em conjunto com o ALT mas usando textos diferentes, pois os leitores de tela e código não entendem o TITLE. E lembrando mais uma vez o ALT é obrigatório.

Texto escrito por: Lauro Santos (http://www.laurosantos.com.br/blog/atributo-alt-ie-firefox/)

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

 
%d blogueiros gostam disto: