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.3 : Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?

revenir en haut de la page

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

revenir en haut de la page

Comprendre

Comprendre le critère

Toutes les images porteuses d'information doivent avoir une alternative textuelle pertinente. Cette alternative textuelle doit restituer l'information véhiculée par l'image par rapport au contenu auquel elle est associée ou elle doit donner sa fonction dans le cas d'un lien image.

Bénéfices pour les utilisateurs

• Bénéfice 1 :
  Les personnes aveugles, par exemple, ne peuvent pas voir les éléments graphiques et n'ont, par conséquent, pas accès à l'information qu'ils véhiculent. Pour consulter une page Internet, elles utilisent soit un navigateur textuel, soit une aide technique du type lecteur d'écran.
  A l'heure actuelle, ces aides techniques interprètent uniquement les données textuelles présentes sur une page. Cela signifie qu'elles ne peuvent pas directement décrire les éléments graphiques.
  Les utilisateurs de ces aides techniques n'auront accès à l'information véhiculée par les éléments graphiques que si le concepteur de la page a pris soin de fournir systématiquement une alternative textuelle à l'ensemble des éléments graphiques. C'est précisément le contenu de l'alternative textuelle qui sera restitué à l'utilisateur.
  Si aucune alternative textuelle n'est associée aux éléments graphiques, les aides techniques vont néanmoins tenter d'afficher une information pour l'utilisateur. Dans la plupart des cas, c'est le nom de fichier de l'élément graphique qui est affiché, par exemple, "ar_000.jpg". Cette information est dénuée de sens pour l'utilisateur. Il y a perte d'information.
  
  
• Bénéfice 2 :
  Les utilisateurs n'ayant qu'une connexion à faible débit ou consultant un site Web via leur téléphone portable, peuvent être amenés à désactiver l'affichage des éléments graphiques dans leur navigateur afin de gagner du temps lors du chargement de la page. Concrètement, lorsque la page est chargée, aucun élément graphique n'apparaît. Ces utilisateurs deviennent ainsi dépendants du contenu de l'alternative textuelle. C'est donc pour eux le seul moyen d'accéder à l'information véhiculée par les éléments graphiques.

Valeur ajoutée pour le site

• Bénéfice 1 :
  Le site sera valide selon les spécifications du W3C qui rendent obligatoire la présence de l'attribut alt sur les balises img et area.
  
  
• Bénéfice 2 :
  Certains moteurs de recherche peuvent référencer le contenu de l'attribut alt des éléments graphiques.

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.
   • Ouvrir le code source de la page Web et sélectionner le code des images porteuses d'information identifiées. Il s'agit du code associé à tous les éléments suivants (exemple de code source : <img src="image.gif" alt="alternative textuelle à l'image" />) :
     • balise img
     • balise img ou object avec l'attribut usemap
     • balises area contenues entre les balises <map name=[...]> et </map>
     • balise input avec l'attribut type="image"
     • balise applet
     • balise object avec l'attribut type="image/..."
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 1.3.a [Bronze] : Pour chaque image porteuse d'information (balise img) ayant un attribut alt, le contenu de cet attribut est-il pertinent ?
   • Test 1.3.b [Bronze] : Pour chaque zone (balise area) d'une image réactive, porteuse d'information et ayant un attribut alt, le contenu de cet attribut est-il pertinent ?
   • Test 1.3.c [Bronze] : Pour chaque bouton associé à une image (balise input avec l'attribut type="image") ayant un attribut alt, le contenu de cet attribut est-il pertinent ?
   • Test 1.3.d [Bronze] : Pour chaque image applet (balise applet) porteuse d'information et ayant un attribut alt, le contenu de cet attribut est-il pertinent ?
   • Test 1.3.e [Bronze] : Pour chaque image objet (balise object avec l'attribut type="image/...") porteuse d'information et ayant une alternative textuelle, l'alternative textuelle entre <object> et </object> est-elle pertinente ?
   
   
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.3.a [Bronze] et le test 1.3.c [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. Vérifier que pour tous ceux qui ont un attribut alt, le contenu de cet attribut est pertinent.
  5. Si c'est le cas, le test est validé.


• Pour le test 1.3.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 "Voir les images map [nouvelle fenêtre]"
3. Chaque images réactive s'affiche avec la liste de ses balises area
4. Vérifier que pour chaque zone d'une image réactive, porteuse d'information et qui a un attribut alt, le contenu de cet attribut est pertinent.
5. Si c'est le cas, le test est validé.


• Pour le test 1.3.d [Bronze] :
  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 Applets / Scripts [nouvelle fenêtre]".
  3. Tous les balises applet de la page s'affichent avec, en dessous, l'extrait de code source correspondant.
  4. Vérifier que pour toutes celles qui ont un attribut alt, le contenu de cet attribut est pertinent.
  5. Si c'est le cas, le test est validé.


• Pour le test 1.3.e [Bronze] :
  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. Vérifier que pour toutes celles qui ont une alternative textuelle entre <object> et </object>, le contenu de celle-ci est pertinente.
  5. Si c'est le cas, le test est validé.

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

• Pour le test 1.3.a [Bronze] et le test 1.3.c [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. Vérifier que pour chaque image porteuse d'information ayant un attribut alt, le contenu de cet attribut est pertinent.
  5. Si c'est le cas, le test est validé.


• Pour le test 1.3.b [Bronze] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
3. Une nouvelle fenêtre apparaît contenant le code source de la page.
4. En faisant une recherche sur le mot area (ctrl + f), vérifier que pour chaque zone d'une image réactive porteuse d'information ayant un attribut alt, le contenu de cet attribut est pertinent.
5. Si c'est le cas, le test est validé.


• Pour le test 1.3.d [Bronze] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  3. Une nouvelle fenêtre apparaît contenant le code source de la page.
  4. En faisant une recherche sur le mot applet (ctrl + f), vérifier que pour chaque image applet porteuse d'information ayant un attribut alt, le contenu de cet attribut est pertinent.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 1.3.e [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. Vérifier que pour chaque image objet porteuse d'information ayant une alternative textuelle (Note : champ "Texte alternatif"), le contenu de l'alternative textuelle est pertinent.
  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é ?

Les personnes en charge du contenu, en concertation avec les graphistes, doivent déterminer la valeur informative ou décorative de chaque élément graphique afin de choisir l'alternative textuelle qui leur sera associée.

Implémentation

On ne peut pas décider de l'alternative textuelle d'une image sans en considérer son contexte car une image pourra passer de catégorie décorative à porteuse d'information selon le contexte de la page Web où elle se trouve.
D'un point de vue technique, les seuls moyens de fournir une alternative textuelle à un élément graphique sont :

• soit d'utiliser l'attribut alt des balises img, area, input (avec l'attribut type="image") et applet
• soit d'écrire entre les balises object le texte de l'alternative.

<img src="fichier_image.jpg" alt="contenu de l'alternative textuelle" />

<area shape="rect" coords="0,0,30,30" nohref alt="contenu de l'alternative textuelle" />

<input type="image" src="fichier_image.jpg" name="image" alt="contenu de l'alternative textuelle" />

<object data="fichier_image.jpg" type="image/jpeg">
contenu de l'alternative textuelle
</object>

Exemple de mauvaise pratique

• Si l'élément graphique est destiné à la décoration ou à la mise en page, il ne faut pas tenter de le décrire :
  

  <img src="'space.gif" alt="spacer" />

• Si l'élément graphique sert à illustrer le texte (photo accompagnant un article de journal, pictogramme...), le contenu de l'alternative textuelle ne doit pas être une description narrative :
  

  <img src="fauteuil.gif" alt="fauteuil roulant stylisé en blanc sur fond bleu" />

• Si l'élément graphique est un lien, l'alternative textuelle ne doit pas être une description de l'image ou un symbole visuel :
  

  <a href="next.html" ><img src="fleche_droite.gif" alt=">>" /></a>

Exemple de bonne pratique

• Si l'élément graphique est destiné à la décoration ou à la mise en page, il faut lui associer une alternative textuelle nulle :
  

  <img src="'space.gif" alt="" />

• Si l'élément graphique sert à illustrer le texte (photo accompagnant un article de journal, pictogramme...), le contenu de l'alternative textuelle doit décrire l'information véhiculée :
  

  <img src="fauteuil.gif" alt="accès réservé aux handicapés" />

• Si l'élément graphique est un lien, le contenu de l'alternative textuelle doit indiquer à l'utilisateur la destination du lien. Ici, c'est la fonction de l'élément graphique qui doit être restituée et non sa description :
  

  <a href="next.html"><img src="fleche_droite.gif" alt="page suivante" /></a>

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.

Cette copie d'écran montre un bon exemple d'alternative textuelle donnée à une image lien (l'alternative textuelle est "Retour vers la page d'accueil").

Cette copie d'écran montre des mauvais exemples d'alternatives textuelles données à des éléments graphiques destinés à la mise en page et qui sont commentés inutilement par "spacer", "hautmin2_r1_c5", etc.

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 7.1) : Short text equivalents for images ("alt-text")
• WAI Curriculum : a text equivalent for images and graphical buttons
• OpenWeb : Des images accessibles
• Plongez dans l'accessibilité : Fournir des équivalents texte pour les images
• Jukka Korpela : Simple guidelines on using ALT texts in IMG elements
• Ian Hickson : Mini-FAQ about the alternate text of images
• WebAIM : Appropriate Use of Alternative Text
• Martin Schrode : On accessible advertising

revenir au sommaire de la fiche

revenir en haut de la page

---