Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • 1) Images
   • 2) Cadres
   • 3) Couleurs
   • 4) Multimédia
   • 5) Tableaux
   • 6) Liens
   • 7) Code exécutable
   • 8) Eléments obligatoires
   • 9) Structuration de l'information
   • 10) Présentation de l'information
   • 11) Formulaires
   • 12) Navigation
   • 13) Consultation
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

Critère 1.5 : Chaque image porteuse d'information a-t-elle si nécessaire une description détaillée ?

revenir en haut de la page

Carte d'identité du critère 1.5 [niveau AccessiWeb : Bronze]

revenir en haut de la page

Comprendre

Comprendre le critère

Toutes les images porteuses d'information dont l'alternative textuelle ne peut suffisamment décrire l'information véhiculée par l'image ou la fonction de cette image dans le cas d'un lien image, doivent avoir une description détaillée.

Bénéfices pour les utilisateurs

• Les personnes aveugles ou les utilisateurs n'ayant qu'un accès Internet à faible débit et qui désactivent le chargement des images, ne peuvent visualiser les informations véhiculées par l'intermédiaire d'une image. De même, les personnes malvoyantes ou les personnes souffrant d'un handicap cognitif peuvent éprouver des difficultés à "déchiffrer" une image complexe et porteuse d'information.
  Or, la description d'un graphe statistique ou d'un dessin, par exemple, peut s'avérer longue et inappropriée à l'attribut alt dont le contenu ne doit pas dépasser 80 caractères. Il faut alors recourir à l'attribut longdesc qui permet une description détaillée de l'image.

Valeur ajoutée pour le site

• Toute information publiée sous forme de texte dans un site, possède toujours l'avantage d'apporter une meilleure lisibilité de celui-ci et donc de référencement par les moteurs de recherche.

revenir en haut de la page

Comment évaluer

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

1. Sélectionner le(s) élément(s) à tester :
   • Identifier dans un navigateur graphique toutes les images porteuses d'information qui nécessitent une description détaillée.
   • Ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants (exemple de code source : <img src="image.gif" alt="alternative textuelle à l'image" longdesc="description_detaille.html" />) :
     • balise img
     • balise img ou balise object avec l'attribut usemap
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 1.5.a [Bronze] : Chaque image porteuse d'information (balise img, balise img ou balise object avec l'attribut usemap) qui nécessite une description détaillée a-t-elle un attribut longdesc ?
   • Test 1.5.b [Bronze] : Pour chaque image (balise img, balise img ou balise object avec l'attribut usemap) ayant un attribut longdesc, le contenu de cet attribut est-il une url valide ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

Evaluer avec la Barre d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

• Pour le test 1.5.a [Bronze] :
  Pour les images porteuses d'informations (balise img) et les images réactives porteuses d'informations (balise img avec l'attribut usemap)
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Images" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des images".
  3. Tous les éléments graphiques de la page s'affichent avec, en dessous, l'extrait de code source correspondant.
  4. Sélectionner les images porteuses d'information
  5. Pour chaque image porteuse d'information nécessitant une description longue, vérifier qu'elle comporte un attribut longdesc.
  6. Si c'est le cas, le test est validé.
  
  
  Pour les images réactives porteuses d'informations (balise object avec l'attribut usemap)
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des fichiers multimédias [nouvelle fenêtre]".
  3. La liste des balises object apparaît. Cliquer sur le lien "Source" pour afficher l'extrait de code source correspondant.
  4. Sélectionner les images réactives porteuses d'information
  5. Pour chaque image réactive porteuse d'information nécessitant une description longue, vérifier qu'elle comporte une alternative textuelle entre <object> et </object>.
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 1.5.b [Bronze] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Images" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des images".
3. Tous les éléments graphiques de la page s'affichent avec, en dessous, l'extrait de code source correspondant.
4. Pour chaque image qui a un attribut longdesc, vérifier que le contenu de cet attribut est une url valide.
5. Si c'est le cas, le test est validé.
6. Note : les images réactives porteuses d'informations (balise object avec l'attribut usemap) nécessitant une description longue n'ont pas d'attribut longdesc. Le contenu d'une description longue est entre <object> et </object>.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :

• Pour le test 1.5.a [Bronze] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Vérifier la présence d'images porteuses d'information qui nécessitent une description détaillée.
  3. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Informations sur la page" puis l'onglet "Médias".
  4. Une nouvelle fenêtre apparaît et tous les éléments graphiques s'affichent sous forme de liste.
  5. Dans le champ "Description longue", vérifier que chaque image porteuse d'information qui nécessite une description détaillée a un attribut longdesc (Note : si aucun attribut longdesc est présent, le texte "non spécifié" est affiché pour le champ "Description longue").
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 1.5.b [Bronze] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Informations sur la page" puis l'onglet "Médias".
3. Une nouvelle fenêtre apparaît et tous les éléments graphiques s'affichent sous forme de liste.
4. Dans le champ "Description longue", vérifier que pour chaque image ayant un attribut longdesc, le contenu de cet attribut est une url valide.
5. Si c'est le cas, le test est validé.

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

Qui est concerné ?

Le développeur doit veiller à l'implémentation de ce critère.

Implémentation

Différentes méthodes sont possibles. A chacun d'utiliser celle qui correspondra le mieux à ses contraintes (graphiques, éditoriales, etc) :

• Soit mettre une légende texte explicite à proximité de l'image
• Soit utiliser l'attribut longdesc pour associer un commentaire plus détaillé.
  

<img src="stats.gif" alt="évolution de la population française : 1990-2004" longdesc="pop_fr.html" />

Note : l'attribut longdesc est supporté par Netscape 7 et Firefox 1.0.4. Il n'est pas supporté par Internet Explorer 6 dans le sens où le lien fourni par l'attribut longdesc n'est pas cliquable. En revanche, quelque soit le navigateur utilisé, il est reconnu par les aides techniques comme Jaws, par exemple.

Exemple de mauvaise pratique

Le site www.unsitecorporate.com publie une photo de groupe représentant le conseil d'administration.
Inclure la description de cette photo par l'intermédiaire de l'attribut alt risque de dépasser la limite autorisée pour la longueur des alternatives textuelles. Ainsi, il faut éviter le code suivant :

<img src="images/conseil_admin.jpg alt=""en partant de la gauche : M.Jean, directeur - M.Pierre, directeur - M.Claude, directeur - Mme.Henry - PDG, Mlle Juliette - Directrice." />

Exemple de bonne pratique

En reprenant l'exemple précédent, on ajoute l'attribut longdesc :

<img src="images/conseil_admin.jpg alt="le conseil d'administration" longdesc="conseil_admin.html" />

Le fichier "conseil_admin.html" contient :
"en partant de la gauche : M.Jean, directeur - M.Pierre, directeur - M.Claude, directeur - Mme.Henry - PDG, Mlle Juliette - Directrice."

revenir en haut de la page

Illustrations

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 7.2) : Long descriptions of images
• WAI Curriculum : a text equivalent for graphical representations of text (including symbols)
• stuffandnonsense.co.uk : Descriptive content to images

revenir au sommaire de la fiche

revenir en haut de la page

---

Guide AccessiWeb (version 3.1, 2 mars 2009) | Conditions d'utilisation | Contact
Copyright © 2009 Association BrailleNet. Tous droits Réservés.