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 modernos
O 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 ALT
Vamos 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 SEO
O 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 ALT
Existem 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.
Artigos relacionados:
4 Comments
oi Lauro, artigo muito esclarecedor. Eu sempre tive essa duvida, qto ao firefox. Porque não funciona? agora esta tudo mais claro. Obrigado
Eu era uma dessas pessoas que achava que era um erro do IE e do FF, quando o hint não aparecia. Procurei em alguns lugares, matérias falando a respeito disso, mas só aqui encontrei! Obrigado pela informação. Grande abraço. Sucesso
Parabéns boa explicação, tenho uma dúvida se puderes esclarecer ficarei grato.
O conteúdo feito em flash é uma imagem, é relevante atribuir o atributo alt?
O que me estava a acontecer era ainda mais estranho. Localmente aparecia o atributo alt quando colocava o rato sobre a imagem, mas quando fazia upload para o server não aparecia.
O uso do atributo title solucionou o problema.
Muito obrigada pela informação.