Inscrivez-vous en une minute !!
Connectez-vous
Des descriptions valides avec les attributs alt et longdesc
Pour rendre vos images accessibles, il ne suffit pas de mentionner un texte alternatif, mais il faut aussi prendre soin de certains éléments qu'on va détailler dans le présent chapitre, lors de la spécification de descriptions alternatives.
J'entends par une description valide, une description qui permet d'améliorer l'accessibilité et de bien décrire ou remplacer le contenu de l'image.
Description valide avec l'attribut alt
Un texte alternatif valide doit répondre aux critères suivants :
- il ne doit pas être une chaîne vide, exemple <img alt="" />, sauf pour les images de présentation (images servant de puces) et les images de mise en forme (images d'espacement : spacer images) qui n'ont pas d'importance.
- il ne doit pas être une chaîne composée uniquement d'un ou plusieurs espaces, Exemple <img alt=" " />.
- il ne doit pas être le nom du fichier, exemple <img src="images/voiture.png" alt='voiture.png' />.
- il ne doit pas contenir l'expression : image de, photo de etc.
- il ne doit pas comporter plus de 150 caractères, ce nombre à été proposé et préconisé par le WCAG1.0 (guide publié par le W3C en 1999 pour la promotion de l'accessibilité des sites). Pour être plus sûr de ne pas se faire tronqué le texte alternatif par certains navigateurs, il ne faut pas dépasser 60 caractères (ce qui vous fera 10 mots moyens en total).
- il ne doit pas comporter des balises, car elles peuvent perturber les lecteurs et les moteurs de recherche, en plus une balise insérée dans un texte alternatif ne sera jamais
interprétée par le navigateur. On peut pas afficher un texte alternatif en italique, en gras ou en couleur rouge
- il ne doit pas contenir la mention "cliquer ici" par exemple dans une image cliquable, mais plutôt il doit nous renseigner sur la cible du lien.
- il doit être en relation avec le contenu et le rôle de l'image ainsi que son contexte (le texte voisin).
Pour résumer en un mot, un texte alternatif doit être significatif, expressif, peut bien remplacer l'image dans les navigateurs vocaux, à texte-seul ou bien dans les navigateurs visuels si elle n'est pas affichée, enfin il doit comporter uniquement du texte et des entités html.
Si vous voulez mettre un guillemet dans le texte alternatif vous devez le faire échapper par l'entité html équivalente à savoir " sinon vous allez embrouiller le navigateur, qui va croire que le texte alternatif se termine dans le guillemet qui se trouve immédiatement après le premier.
- Exemple juste :
<img src="WCAG.png" alt="Web Content Accessibility Guidelines : "WCAG"" />
Pour voir les guillemets dans le texte alternatif, essayez de passer la souris au-dessus de l'image avec Internet Explorer 6 ou 7.
- Exemple erroné :
<img src="WCAG.png" alt="Web Content Accessibility Guidelines : "WCAG"" />
Dans ce deuxième exemple, le navigateur va s'arrêter au deuxième guillemet et il va croire que le texte alternatif est (Web Content Accessibility Guidelines : ), et que WCAG est un attribut, ce qui fera que votre document ne sera pas conforme aux standards du W3C.
Notez aussi, et c'est très important, que Le texte qui se trouve dans le voisinage de l'image, doit aussi être en relation avec l'image, et doit décrire sa raison d'être.
Description valide avec l'attribut longdesc
Une longue description doit respecter les conditions suivantes :
- contrairement à ce que croient beaucoup de gens, l'attribut longdesc doit avoir pour valeur l'URI de la ressource qui traite l'image d'une manière exhaustive. Voici un extrait du DTD strict de l'attribut longdesc :
longdesc %URI; #IMPLIED
L'attribut longdesc est facultatif (implied) et doit recevoir pour valeur un URI. - l'URI de l'attribut longdesc doit être valide : il ne doit pas être erroné (faute de frappe), il ne doit pas pointer vers une ressource inexistante, supprimée, déplacée ou renommée.
- la description longue doit être une ressource XHTML.
Tuto suivant : une carte cliquable côté client accessible.
