Introdução ao uso do atributo alt e atributo de título da tag htmlimg

Quando os vendedores do navegador distorcem os padrões e fazem as coisas por conta própria, eles podem causar alguns problemas ou pelo menos causar confusão. Um exemplo é a maneira como alguns navegadores lidam com os atributos Alt (geralmente chamados de tags alt incorretamente), como o navegador do IE com um grande número de usuários no Windows.

O texto alt não é usado como dicas de ferramentas, ou melhor, não fornece instruções adicionais para imagens. Pelo contrário, o atributo de título deve ser usado para fornecer informações de explicação adicionais para o elemento. Essas informações são exibidas como uma dica de ferramenta na maioria dos navegadores de imagem, embora os fabricantes possam usar qualquer outra maneira de renderizar o texto do atributo de título.

Muitas pessoas parecem estar confusas com esses dois atributos (a pergunta se tornou mais comum na lista de discussão do grupo de padrões da web recentemente), então escrevi meus pensamentos sobre como usá -los.

Para agente do usuário (UA) que não pode exibir imagens, formulários ou applets, o atributo ALT é usado para especificar texto alternativo. O idioma do texto de reposição é especificado pelo atributo lang. Fonte: como especificar texto alternativo.

O atributo ALT (observe que é um atributo e não um rótulo) inclui instruções de reposição, necessárias para pontos de acesso e imagem. Ele só pode ser usado em elementos IMG, área e entrada (incluindo elementos de applet). Para elementos de entrada, o atributo ALT destina -se a substituir a imagem do botão Enviar. Por exemplo: <Tipo de entrada = imagem src = image.gif alt = submit />.

Use o atributo ALT para fornecer descrições de texto aos espectadores que não podem ver as imagens em seu documento. Isso inclui usuários que usam navegadores que não suportam exibição de imagem ou exibição de imagem, usuários com deficiência visual e usuários que usam leitores de tela. O texto alternativo é usado para substituir as imagens em vez de fornecer legenda adicional.

Pense com cuidado antes de escrever texto alternativo para garantir que esses texto forneçam informações ilustrativas para aqueles que não veem a imagem e fazem sentido no contexto. Para imagens decorativas, você pode usar valores vazios (alt =, sem espaços nas citações) em vez de usar substitutos irrelevantes, como Blue Bullet ou Spacer.gif. Não ignore. Se você o ignorar, alguns leitores de tela lerão diretamente o nome do arquivo do arquivo de imagem e esses navegadores de texto, como o Lynx, exibirão o nome do arquivo do arquivo de imagem, que será de pouco uso no seu navegador.

É mais fácil definir o texto de substituição em uma imagem que contém texto. O texto contido na imagem geralmente pode ser usado como o valor do atributo ALT.

Quanto à duração do texto de substituição, consulte o que o WCAG 2.0 (Guia de usabilidade do conteúdo do site 2.0) diz:

O 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.

Eu entendo o mais curto possível e o maior tempo possível.

Mesmo se você quiser que ele apareça como uma dica de ferramenta, não use o atributo ALT para o elemento de texto, que não é o seu uso. Até onde eu sei, isso funciona apenas no Windows, ou seja, navegador e no antigo Netscape 4.* (versão do Windows). Nenhum navegador do Mac exibirá -o como uma dica de ferramenta.

Quando o navegador exibe o texto de substituição como uma dica de ferramenta, o comportamento do uso do atributo ALT também é incentivado. Algumas pessoas começam a escrever texto de substituição sem sentido, porque tendem a pensar que é uma informação de ilusão adicional, em vez de um substituto que não pode exibir imagens. Outros podem não querer que a dica da ferramenta apareça e, em seguida, ignore completamente a gravação do valor do atributo ALT. Essas práticas erradas causaram dificuldades para os espectadores que não podem ver a imagem.

Para instruções adicionais e informações não essenciais, use o atributo do título.

O atributo de título fornece sugestões para elementos que definem esse atributo.

Fonte: o atributo do título.

O atributo de título pode ser usado em todas as tags, exceto base, base, cabeça, cabeça, html, meta, param, script e título. Mas não é necessário. Talvez seja por isso que muitas pessoas não entendem quando usá -lo.

Use o atributo de título para fornecer informações adicionais não essenciais. A maioria dos navegadores visuais exibe o texto do título como dica de ferramenta quando o mouse é suspenso em um elemento específico, mas isso 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, a versão anterior do navegador Safari.

O atributo do título tem um bom objetivo, que é adicionar texto descritivo ao link, especialmente quando o link em si não expressa o objetivo do link com muita clareza. Isso permite que os visitantes saibam para onde esses links os levarão, e eles não carregam uma página que pode não ser de nada. Outro aplicativo em potencial é fornecer informações ilustrativas adicionais para imagens, como datas ou outras informações não essenciais.

O valor do atributo de título pode ser maior que o valor do atributo ALT. No entanto, deve -se notar que alguns navegadores truncam texto longo (como dicas de ferramentas ou outros). Por exemplo, o navegador principal de Mozilla pode exibir apenas os primeiros 60 caracteres. Isso é considerado um bug de mozilla e é algo que você precisa prestar atenção.

Meu conselho é garantir que o texto de reposição seja essencial. Na maioria dos aplicativos, ele deve ser deixado em branco, alt = (observe que não há espaços nas duas citações). Pense nessas imagens, que tipo de informação essas visualizações fornecem, que texto você deve usar para descrevê -la ou que informação você deve fornecer às pessoas que não veem as imagens? Escrevendo o texto de substituição em uma foto: o CEO do lado de fora do prédio, vestindo um terno cinza e uma gravata preta, olhando para o céu, é realmente útil para pessoas que não conseguem ver a imagem? Se você pensa assim, então você pode escrever. Em muitos casos, acho que é melhor deixar o texto de reposição em branco.

Para atributos do título, é difícil fornecer instruções rigorosas. A maior parte do meu uso está nos links que não podem ser auto-explicativos, como o mesmo texto de link na mesma página e páginas de link diferentes. Às vezes, mais texto de legenda é fornecido para alguns botões ou elementos de formulário.

Quando uma imagem requer uma descrição mais longa e excede a limitação do atributo ALT, existem algumas opções.

A propriedade Longdesc pode ser usada para fornecer links para uma página separada que contém a descrição do texto da imagem. Isso significa vincular o espectador a outra página, o que pode causar dificuldades para entender. Além disso, o apoio do navegador ao atributo Longdesc também é inconsistente e não é muito bom.

A propriedade Longdesc pode conter um link para outra parte do documento atual (ponto âncora) em vez de vincular a outra página. Nas notas de rodapé de acessibilidade, Andy Clarke explica como aplicá -lo muito bem.

Descrição Links (links d) podem ser usados ​​para complementar o LongDesc. Um link de descrição é um link regular que se conecta a uma página contendo texto alternativo. O link é colocado ao lado da imagem e está ok em todos os navegadores. As pessoas têm muitas opiniões diferentes sobre sua eficácia, e eu não gosto desta nota na minha opinião pessoal. O WCAG também é e, em suas técnicas de trabalho HTML para WCAG 2.0, o link de descrição é desaprovado.

Se uma longa descrição da imagem for útil para qualquer espectador, você deve considerá -la simplesmente exibi -la no mesmo documento, em vez de vincular a outras páginas ou escondê -la. Dessa forma, todos podem ler. Este é um método simples e de baixa tecnologia.