Images réactives et menus graphiques
CHAPITRE 13
179
Rien n’indique ici une image (celle-ci n’est définie qu’en arrière-plan au moyen d’une
propriété CSS). Cet élément vide ne trahit pas non plus clairement la présence
d’un lien. Un tel code HTML vide de contenu sera ignoré par les navigateurs
vocaux, gênant considérablement les non voyants. Sur les navigateurs graphiques où
CSS n’est pas actif, cette balise dépourvue de contenu textuel sera dotée de dimensions nulles et sera donc non cliquable. Tout cela interdirait l’emploi de cet élément
dans les composants de navigation essentiels du site.
L’idée des textes de remplacement ne fonctionne pas : l’attribut alt ne porte pas sur
l’élément . Quant à l’attribut title, il n’est obligatoirement pas pris en compte
par les navigateurs vocaux.
Tout cela impose de placer un texte de contenu dans cet élément vide. Un message
incompréhensible hors contexte serait ici une erreur naïve ; il n’assisterait en rien les
non voyants et ne leur permettrait pas de deviner à quoi sert ce lien :
On veillera donc à écrire une instruction autonome, digne de l’attribut alt des
images (img) et décrivant la fonction du lien. Souvent, elle se contentera de reprendre
le texte contenu dans l’image. Si l’image représente une enveloppe parce que le lien
mène à la page de contact du site, le message suivant conviendra parfaitement :
Voilà un texte compréhensible par tous, notamment par les non voyants, Cependant,
dans un navigateur graphique, il se superposera à l’image de fond qui jusque là se suffisait à elle-même. Rappelons-nous les techniques évoquées pour le préchargement
d’images : elles serviront ici encore à faire ignorer ce texte aux navigateurs graphiques
sans le rendre invisible aux autres. On peut placer ce texte dans une balise masquée
par la règle display: none :
Cliquez sur l'image
Contactez le webmaster
HTML
Contactez le webmaster
CSS
a.image {
display: block;
width: 100px;
height: 100px;
background: url(image1.gif) no-repeat;
}