O uso correto do atributo alt
Publicado em 19.12.2005 na categoria Acessibilidade
O atributo alt, em HTML, existe para que o desenvolvedor coloque um texto alternativo junto a qualquer imagem. Esse texto serve para ser exibido enquanto a imagem ainda não foi carregada, quando a imagem não consegue ser baixada, quando a imagem não estiver disponível, por conta de opção do usuário ou quebra de endereço da imagem. Apesar do simples entendimento, o atributo não vem sendo usado da forma correta por grande parte dos desenvolvedores, sobretudo por conta da maneira equivocada como o Internet Explorer exibe o alt.
O navegador da Microsoft dá ao alt o comportamento do atributo title, ou seja, quando o usuário repousa o mouse sobre a imagem, aparece ao lado do cursor o texto do atributo. Esse comportamento equivocado faz com que alguns sites utilizem o alt de maneira equivocada, como para os créditos de uma foto, no JC OnLine.
Em outros casos, o texto informativo até é escrito, mas não da maneira correta. Por exemplo, se temos uma foto do presidente Lula, é muito comum vermos o texto do alt ser apenas “Foto”. O correto seria contextualizar a imagem, para que quem não a estivesse vendo recebesse informação equivalente a quem está visualizando a foto. No caso, algo como “Presidente Lula assina medida provisória do bem”.
O alt não deve ser a descrição da imagem e sim um equivalente textual do conteúdo. Uma seta para o lado não deve receber no alt o texto “seta para o lado” e sim “ir para a próxima página”, como determina o W3C nas recomendações para acessibilidade de conteúdo da web.
Além disso, é interessante notar que nem todas as imagens precisam de um texto no alt. Se você usa imagens decorativas dentro do HTML e não no CSS, por exemplo, é melhor usar um alt=” ” do que um alt dizendo “grande botão azul”, como explica Jakob Nielsen no capítulo de acessibilidade do livro Projetando Websites.
A regra geral para o bom uso do alt é bom senso e pensar sempre em que tipo de informação aquela imagem está transmitindo para o usuário. Como sempre, devemos pensar no usuário ao escrever o equivalente textual de conteúdo. Dessa forma, quem acessar o site sem visualizar as imagens não sofrerá com perda de informação.
Olá,
Parabéns pelo texto q me esclareceu muito. Achar conteúdo sobre padrões web em português anda muito difícil, por isso é sempre bom encontrar leituras como essa.
Alías, vc não teria algum site ou livro falando sobre cada atributo do xhtml e css? preferencialmente em português.
Amigo, gostei muito do texto foi bastante elucidador. Mas me diz uma coisa, tenho em uma determinada página algumas dessas imagens decorativas e todas tem a tag alt. Quando vou validar o XHTML da erro, pois a tag está vazia exatamente como nesta parte do texto acima:
“…é melhor usar um alt=” ” do que um alt dizendo “grande botão azul”, como explica Jakob Nielsen no capítulo de acessibilidade do livro Projetando Websites.”
Só que dessa forma o XHTML não é validado pelo W3C, o que devo fazer para validar?
Errado! Totalmente errado alex!
Nem um nem outro, tudo que faz parte do layout deve ser colocado como fundo, botões tipo enviar, essas coisas, você deve botar o nome do botão se ele for de enviar, ponha enviar…
“Se você usa imagens decorativas dentro do HTML e não no CSS, por exemplo, é melhor usar um alt=” ” do que um alt dizendo “grande botão azul”, como explica Jakob Nielsen no capítulo de acessibilidade do livro Projetando Websites.” Discoro desse trecho, pois todas as imagens decorativas do site DEVEM ser inseridas via CSS, ou seja, as imagens que fazem parte exclusivamente do conteúdo do site serão inseridas através da tag IMG do HTML, mas as imagens que são apenas elementos de layout, ou decorativas como você bem disse, serão inseridas através da propriedade BACKGROUND da CSS.
Em relação ao bom senso no uso eu concordo contigo, pois o texto contido no atributo ALT pode ser usado tanto para descrever uma imagem menos ou mais rica em detalhes, como para descrever uma ação que deva ser realizada pelo usuário dentro do site.
Valeu! Legal seu blog!