atributo alt - alt attribute
O atributo alt é o atributo HTML usado em documentos HTML e XHTML para especificar o texto alternativo ( texto alt ) que deve ser renderizado quando o elemento ao qual ele é aplicado não pode ser renderizado.
O atributo alt é usado pelo software "leitor de tela" para que uma pessoa que está ouvindo o conteúdo de uma página da web (por exemplo, uma pessoa cega) possa interagir com esse elemento. Além disso, ele substitui a imagem quando copiado e colado como texto e torna as imagens mais legíveis por máquina , o que melhora a otimização do mecanismo de pesquisa . Cada imagem deve ter um atributo alt para ser acessível, mas não precisa conter texto. Pode ser um atributo vazio ou nulo: alt=""
.
O atributo foi introduzido no HTML 2 e no HTML 4.01 foi necessário para as tagsimg
e . É opcional para a tag e a tag obsoleta .
area
input
applet
Exemplo
Aqui está uma imagem para a qual o atributo alt é "No céu está hasteada uma bandeira vermelha com uma cruz branca cuja barra vertical é deslocada em direção ao mastro."
O HTML para esta imagem pode ser algo como o seguinte:
<img alt="In the sky flies a red flag with a white cross whose vertical bar is shifted toward the flagpole." src="http://upload.a.org/wikipedia/commons/thumb/8/83/Dannebrog.jpg/180px-Dannebrog.jpg">
Um leitor com deficiência visual usando um leitor de tela como o Orca ouvirá o texto alternativo no lugar da imagem. Um navegador da web baseado em texto , como o Lynx , exibirá o texto alternativo em vez da imagem. Um navegador gráfico normalmente exibirá apenas a imagem e exibirá o texto alternativo apenas se o usuário solicitar que ele mostre as propriedades da imagem ou tiver configurado o navegador para não exibir imagens, ou se o navegador não foi capaz de recuperar ou decodificar a imagem .
Um valor de atributo alt alternativo seria "A bandeira dinamarquesa".
Equívocos comuns
O alt
atributo nem sempre precisa descrever literalmente o conteúdo da imagem. Tenha em mente o propósito e o contexto da imagem e o que seria útil para alguém que não pode vê-la. O atributo alt deve ser uma alternativa para a imagem, geralmente declarando sua finalidade. Por exemplo, uma imagem de um sinal de aviso não deve ter o texto alternativo "um triângulo com um fundo amarelo, borda preta e um ponto de exclamação", mas simplesmente "Aviso!" - a menos, é claro, que o objetivo da imagem seja mostrar o que símbolo de aviso realmente se parece.
O Internet Explorer 7 e anteriores renderizam texto em atributos alt como texto de dica de ferramenta , o que não é compatível com os padrões. Esse comportamento levou muitos desenvolvedores da web a usar indevidamente o alt quando desejavam exibir dicas de ferramentas contendo informações adicionais sobre as imagens, em vez de usar o title
atributo destinado a esse uso. A partir do Internet Explorer 8, os atributos alt não são mais processados como dicas de ferramentas.
O atributo alt é comumente, mas incorretamente, referido como "tag alt".
Imagens decorativas
O W3C recomenda que as imagens que não transmitem informações, mas são puramente decorativas, sejam especificadas em CSS em vez de na marcação HTML. No entanto, às vezes pode ser necessário incluir uma imagem decorativa como uma img
tag HTML . Nesse caso, se a imagem realmente não adiciona ao conteúdo, um atributo alt em branco deve ser incluído na forma de alt=""
. Isso torna a página navegável para usuários de leitores de tela ou navegadores não gráficos. Se (violando o padrão) nenhum atributo alt foi fornecido, os navegadores que não podem exibir a imagem ainda exibirão algo lá, por exemplo, o URL da imagem ou uma string de texto fixa.
Veja também
Notas
Referências
-
Incluindo uma imagem: o
IMG
elemento (especialmente, Como especificar um texto alternativo ) da especificação HTML 4.01 -
O
img
elemento (especialmente, Requisitos para fornecer texto para agir como uma alternativa para imagens ) da especificação HTML 5 -
Técnicas para WCAG 2.0 (especialmente, H37: Usando
alt
atributos emimg
elementos ) - Fornecimento de equivalentes de texto para imagens do Dive Into Accessibility
- Uso apropriado de texto alternativo de WebAIM
-
Diretrizes sobre textos alternativos em
img
elementos de Jukka Korpela - Texto alternativo para imagens: o atributo alt de Estelle Weyl
- Mini-FAQ sobre o texto alternativo de imagens de Ian Hickson
links externos
- Bookmarklets úteis para gerenciamento de atributos alternativos [1] [2]