17th
Acessibilidades - imagens com links: alt vs title
É curioso como às vezes coisas que nos são óbvias, que usamos quase diariamente, se tornam um problema complicado!
Das primeiras coisas que aprendi a nível de acessibilidades é que “todas” as imagens com sentido semântico, com funções de navegação e outros casos [ver o excelente artigo The Alt and Accessibility] devem ter alt atributte.
Até aqui tudo bem, nada de complicado… mas…. há uma situação que já uso a bastante tempo que nunca me senti confortável:
- Botão de download de vCard
1. Por exemplo em: http://www.3lm.pt
Este é mais ou menos o código que tenho:
|link com title=”descarregar contacto [vCard]”||imagem com alt=”“|
Fiz esta escolha, porque sei o o title aparece em todos os browsers como tooltip, e tendo o title no link que envolve a imagem à partida não precisaria de alt. Esta opção pareceu-me importante pois sei que muitos users sem qualquer informação ali, não iriam saber para que iam clicar.
Seja como for isto numa me “cheirou” bem como compromisso entre acessibilidades e usabilidade.
2. Ao fazer o splash screen para http://www.sival.pt decidi que era tempo a me debruçar sobre este problema. Mas não sabia o tempo que ia perder. A maior parte de tutoriais e artigos sobre acessibilidades não têm este caso particular, e muito menos estão preocupados (e com razão) se o browser mostra ou não a tooltip do alt da imagem (sei que todos dão mas não por default).
Abordagens:
a) colocar o title do link e o alt da imagem a dizerem: descarregar contacto [vCard]
- não! nesta abordagem sabia que estaria a ser redundante. Os leitores de ecrã iriam 2x ler a mesma coisa.
b) usar a opção 3lm, com title=”descarregar contacto [vCard]” e alt=”“
- após várias pesquisas fiquei a saber que nesta situação muita das vezes os leitores de ecrã sem sempre lêm o title, pois favorecem o alt em deprimento do title! Logo esta situação não podia ser usada.
c) felizmente deparei-me com o artigo de Mike Cherim. Então a opção que estou a passar a usar é a seguinte:
|link com title=”vCard”||imagem com alt=”descarregar contacto”|
Os leitores de ecrã irão ler: vcard com descarregar contacto
Esta opção tem mais sentido a nível de acessibilidades, e é a que estou a usar de momento. Não é ainda a solução ideal a nível de usabilidade, pois para o user comum onde o seu browser não mostra em tooltip o alt da imagem, lê simplesmente vCard. O que para muita gente é algo abstracto.
Existe alguma esperança que estando o botão ao pé de contactos possam inferir o que é… mas não boa pratica fazer o user pensar! ehehehe
Poderia usar javascript para obrigar o alt a aparecer, mas se há algo que discordo completamente é usar javascript para reproduzir funções nativas ao browser.
E por aqui me fico… se entretanto tiver uma nova abordagem irei colocar aqui, se tiverem sugestões o mail é: we@burocratik.com.
Alex
