Accès Publics Internet en ArdècheAccès Publics Internet en Ardèche

Animation
Relations Sivu
Documentation
NetPublic
Animateurs
Bibliothèques
Relais de services publics

Rechercher un accès public près de :

 


Rechercher sur le site

Plan du Site

 



Articles :: Brèves


Animation > Compétences

Accessibilité d’un site Web - Les Images (2)

Les images sont omniprésentes sur les sites Internet et apportent pour la plupart des informations du contenu de la page.

Une personne ne pouvant pas visualiser ces images (personne déficiente visuelle ou internaute ayant choisi de naviguer en mode texte) n’aura pas accès au contenu informatif de ces dernières. Il faut donc décrire textuellement l’information que l’image transmet au moyen de ce que l’on nomme une "balise alternative" (attribut "alt").

Le texte alternatif

L’attribut alt [1]

L’attribut alt est le principal vecteur des textes alternatifs pour :
-  les images ’img’ ;
-  les zones réactives des images cliquables area ;
-  les boutons de formulaire input type="image".
-  Ces descriptions doivent être concises et complètes. Les termes les plus importants doivent être placés au début du texte.

L’attribut longdesc

Si la description excède approximativement 10 mots, il faut en effet envisager le recours à l’attribut longdesc des éléments img, qui crée un lien vers cette description détaillée placée dans un document annexe.

Toutes les images sont-elles concernées ? On peut distinguer en fait deux grands types d’images selon l’information qu’elles véhiculent : des images significatives et des images non significatives.

Les images significatives :
-  des images porteuses de sens : il s’agit de toute image apportant une information pertinente pour la compréhension de la page, cette information n’étant présentée par ailleurs ;
-  des images-liens : elles sont essentielles à la navigation, et doivent donc impérativement être dotées d’un attribut alt indiquant précisément et brièvement la cible du lien. Par exemple, la traditionnelle icône représentant une silhouette de maison et suggérant un lien vers votre page d’accueil aura comme attribut alt="Accueil" ;
-  du texte en image : combien de titres de sites par exemple sont-ils transformés en graphismes GIF ou JPEG ? Quand ce n’est pas un paragraphe entier de texte. Le texte en image est probablement l’un des pires obstacles à l’accessibilité, à moins que la totalité du texte de l’image ne soit reproduit dans un attribut alt

Les images non significatives :
-  des images transparentes : elles sont utilisées dans les mises en pages à l’ancienne pour « caler » la mise en page (le recours à cette technique laborieuse est inutile dans une mise en page CSS) ;
-  des images typographiques : les images typographiques sont par exemple les puces et les boulets ; ceux-ci peuvent être remplacés par des listes HTML -ul-li-... que les navigateurs non-graphiques sauront interpréter, avec toute liberté de spécifier pour les navigateurs graphiques l’image de votre choix à l’aide de la propriété CSS list-style-image : url(...). On peut y ranger également les barres de séparation horizontales, qui seront avantageusement remplacées par l’élément hr ou par les techniques de bordure CSS ;
-  Des images strictement décoratives : relevant de l’ordre de la présentation, celles-ci peuvent fréquemment être gérées par la feuille de style, à l’aide des propriétés background-image ou content. Si une image non significative n’est pas dotée d’un attribut alt vide, le contenu de cet attribut (ou un contenu attribué par défaut par le navigateur) sera répété autant de fois qu’il y a d’images de ce type, parasitant la compréhension et rendant la consultation de la page particulièrement pénible. De même, un navigateur texte insèrera le nom du fichier image, souvent dénué d’intérêt et de sens pour le lecteur. Pour des images purement décoratives, des graphismes utilisés comme espacement, des images typographiques, il est donc indispensable d’utilisez un attribut alt « vide ». L’attribut vide indique que l’image n’a pas de signification ou de contenu. Sa valeur étant nulle, le navigateur ne l’affichera pas ou ne le lira pas.

Conclusion
-  En renseignant les balises "Alt", vous permettez une navigation allégée sans images, qui résulte d’un choix de l’internaute, soit d’un problème de serveur (saturation du réseau, image non transférée).
-  Des images commentées seront mieux référencées par les moteurs de recherche grâce à une meilleure occurence de vots mots clés.

[1] Pour une personne voyant normalement, la balise "Alt" se traduit par l’apparition d’un cadre de texte jaune reprenant le contenu alternatif de l’image au passage de la souris sur le visuel.




Réalisation : Inforoutes de l'Ardèche -- PackWeb -- Spip --