Quando os fornecedores de navegadores violam os padrões e fazem coisas que não seguem as regras, eles podem causar problemas ou, pelo menos, confusão. Um exemplo é a maneira como alguns navegadores lidam com atributos alt (muitas vezes chamados incorretamente de tags alt), como o Internet Explorer para Windows, que possui um grande número de usuários.
O texto alternativo (alt text) não é usado como dica de ferramenta ou, mais precisamente, não fornece informações descritivas adicionais para a imagem. Em vez disso, o atributo title deve ser usado para fornecer informações descritivas adicionais para o elemento. Essas informações são exibidas como uma dica de ferramenta na maioria dos navegadores de imagens, embora os fabricantes sejam livres para renderizar o texto do atributo do título de outras maneiras.
Muitas pessoas parecem estar confusas com essas duas propriedades (essa pergunta tem aparecido na lista de discussão do Web Standards Group ultimamente), então escrevi meus pensamentos sobre como usá-las.
atributo alternativo
Para agentes de usuário (UA) que não podem exibir imagens, formulários ou miniaplicativos, o atributo alt é usado para especificar texto alternativo. O idioma do texto de substituição é especificado pelo atributo lang.
Fonte: Como especificar texto alternativo .
O atributo Alt (observe "atributo" em vez de "rótulo") contém instruções de substituição, que são necessárias para imagens e pontos de acesso de imagem. Ele só pode ser usado em elementos img, area e input (incluindo elementos de applet). Para elementos de entrada, o atributo alt destina-se a substituir a imagem do botão enviar. Por exemplo: <input type="image" src="image.gif" alt="Enviar" />.
Use o atributo alt para fornecer uma descrição de texto para visualizadores que não conseguem ver as imagens em seu documento. Isso inclui usuários que usam navegadores que não oferecem suporte nativo à exibição de imagens ou que têm a exibição de imagens desativada, usuários com deficiência visual e usuários que usam leitores de tela. O texto alternativo é usado para substituir uma imagem em vez de fornecer texto descritivo adicional.
Pense bem antes de escrever seu texto alternativo para ter certeza de que ele realmente fornece informações para pessoas que não conseguem ver a imagem e que faz sentido no contexto. Para imagens decorativas, use um valor vazio (alt="", sem espaços entre aspas) em vez de um texto de substituição irrelevante, como "marcador azul" ou "spacer.gif". Não ignore. Se você ignorar, alguns leitores de tela lerão o nome do arquivo de imagem diretamente, e navegadores de texto como o Lynx exibirão o nome do arquivo de imagem, e isso não terá utilidade para o seu navegador. .
É mais fácil definir texto alternativo para imagens que contenham texto. De modo geral, o texto contido na imagem pode ser usado como valor do atributo alt.
Quanto ao comprimento do texto alternativo, veja o que WCAG 2.0 (Diretrizes de disponibilidade de conteúdo de site 2.0) tem a dizer:
O comprimento do valor do atributo Alt deve ser inferior a 100 caracteres em inglês ou o usuário deve garantir que o texto de substituição seja o mais curto possível.
Entendo-o como “o mais curto possível e o mais longo que for necessário”.
Mesmo se você quiser que apareça como uma dica de ferramenta, não use o atributo alt em elementos de texto. Este não é o uso pretendido. Pelo que eu sei, isso só funciona no navegador IE do Windows e no antigo Netscape 4.* (versão Windows). Nenhum navegador Mac exibe isso como uma dica de ferramenta.
O uso indevido do atributo alt é incentivado quando os navegadores exibem texto alternativo como uma dica de ferramenta. Algumas pessoas começam a escrever textos alternativos sem sentido porque tendem a considerá-los como informações descritivas adicionais, em vez de um substituto que não pode exibir a imagem. Outros podem não querer que a dica de ferramenta apareça e então ignorar completamente o valor do atributo alt. Estas práticas erradas causam dificuldades aos espectadores que não conseguem ver as imagens.
Para informações descritivas adicionais e informações não essenciais, use o atributo title.
atributo de título
O atributo title fornece informações consultivas para o elemento no qual está definido.
Fonte: O atributo title .
O atributo title pode ser usado em todas as tags, exceto base, basefont, head, html, meta, param, script e title. Mas não é necessário. Talvez seja por isso que muitas pessoas não entendem quando usá-lo.
Use o atributo title para fornecer informações adicionais não essenciais. A maioria dos navegadores visuais exibe o texto do título como uma dica de ferramenta quando o mouse passa sobre um elemento específico. No entanto, cabe ao fabricante decidir como renderizar o texto do título. Alguns navegadores exibirão o texto do título na barra de status. Por exemplo, versões anteriores do navegador Safari.
Um bom uso do atributo title é adicionar texto descritivo a um link, especialmente quando o link em si não transmite claramente o propósito do link. Desta forma, os visitantes sabem para onde os links os levarão e não carregarão uma página que possa não lhes interessar. Outra aplicação potencial é fornecer informações descritivas adicionais para imagens, como datas ou outras informações não essenciais.
O valor do atributo title pode ser definido por mais tempo que o valor do atributo alt. Esteja ciente, entretanto, que alguns navegadores truncarão textos muito longos (como dicas de ferramentas ou outros). Por exemplo, o navegador principal da Mozilla só pode exibir os primeiros 60 caracteres. Isso é considerado um bug do Mozilla e é algo que você deve estar ciente.
Pense antes de usar
Meu conselho é manter seu texto alternativo na essência. Na maioria das aplicações, deve ser deixado em branco, alt="" (observe que não há espaços entre aspas). Pense nessas imagens, que informações elas fornecem para quem as visualiza, que palavras você deve usar para descrevê-las ou que informações você deve fornecer às pessoas que não conseguem ver as imagens? Será realmente útil para alguém que não consegue ver a imagem escrever o texto alternativo como “Foto: CEO parado do lado de fora de um prédio, vestindo terno cinza e gravata preta, olhando para o céu”? Se você pensa assim, então escreva. Em muitos casos, acho melhor deixar o texto de substituição em branco.
Para o atributo title, é difícil fornecer instruções de uso rigorosas. Eu o uso principalmente em links que não são autoexplicativos, como o mesmo texto de link na mesma página, mas em páginas vinculadas diferentes. Às vezes, é fornecido um texto mais descritivo para alguns botões ou elementos de formulário.
descrição mais longa
Quando uma imagem requer uma descrição mais longa do que os limites do atributo alt, existem algumas opções.
O atributo longdesc pode ser usado para fornecer um link para uma página separada contendo uma descrição de texto da imagem. Isso significa vincular o visualizador a outra página, o que pode causar dificuldade de compreensão. Além disso, o suporte do navegador para o atributo longdesc é inconsistente e não muito bom.
O atributo longdesc pode conter um link para outra parte do documento atual (uma âncora) em vez de um link para outra página. Nas notas de rodapé de Acessibilidade , Andy Clarke dá uma boa explicação de como aplicá-la.
Links de descrição (links D) podem ser usados para complementar o longdesc. Um link de descrição é um link normal para uma página que contém texto alternativo. O link é colocado ao lado da imagem e está disponível em todos os navegadores. Existem muitas opiniões diferentes sobre a sua eficácia e, pessoalmente, não gosto desta nota. WCAG também, em seu rascunho de trabalho Técnicas HTML para WCAG 2.0 , os links de descrição estão "obsoletos".
Se uma descrição longa da imagem for útil para qualquer visualizador, você pode considerar simplesmente exibi-la no mesmo documento, em vez de vincular a outras páginas ou ocultá-la. Assim todos poderão ler. Esta é uma abordagem simples e de baixa tecnologia.