Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • Eléments graphiques
   • Cadres
   • Couleurs
   • Multimedia
   • Tableaux
   • Liens
   • Scripts
   • Eléments obligatoires
   • Structuration de l'information
   • Présentation de l'information
   • Formulaires
   • Aide à la navigation
   • Contenus accessibles
5. Moteur de recherche
6. Glossaire
7. Outils d'aide à l'évaluation
8. Remerciements
9. Références
10. Plan du guide

vous êtes ici : Accueil > Fiches AccessiWeb : Eléments graphiques > Fiche 1.1

Fiche 1.1 : Chaque élément graphique possède-t-il une alternative textuelle ?

Carte d'identité

revenir en haut de la page

Comprendre

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, 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

Par le code source

1. Identifier tous les éléments IMG en faisant une recherche dans le code source.
2. Vérifier que chaque élément IMG a un attribut alt qui lui est associé.

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 AccessiWeb (version 1.0) :

1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "1. Eléments graphiques" de la Barre AccessiWeb, activer le critère 1.1.
3. Tous les éléments graphiques de la page s'affichent dans une nouvelle fenêtre avec, en dessous, l'extrait de code source correspondant.
4. Vérifier que chacun d'eux possède l'attribut alt.

Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :

1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Images" de la Barre d'Outils Accessibilité, activer l'option "Liste des images [Nouvelle fenêtre]".
3. Tous les éléments graphiques de la page s'affichent avec, en dessous, l'extrait de code source correspondant.
4. Vérifier que chacun d'eux possède l'attribut alt.

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

1. Dans le menu "Images", activer le sous-menu "Entourer les images" puis l'option "Images sans attribut alt".
2. Tous les éléments graphiques de la page ne comportant pas d'attribut alt sont entourés d'un liseret rouge.
3. S'il y a au moins une image entourée d'un liseret rouge, le critère n'est pas validé.

Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :

1. Lire la page. Il est possible de passer d'élément graphique en élément graphique en tapant sur la touche G du clavier.
2. Pour chaque image sans commentaire (absence de l'attribut alt), Jaws donnera le nom du fichier image ou l'adresse du lien de la page vers laquelle pointe l'image.
3. Si l'image possède un attribut alt vide (alt=""), elle sera détectée par Jaws comme étant un élément graphique sans importance et ne sera pas affichée.
4. Si l'image a une alternative textuelle (alt="alternative textuelle"), celle-ci s'affiche dans la fenêtre représentant l'afficheur braille et est lue par Jaws.
   Note : Jaws ne permet pas d'identifier à 100% si l'image a un attribut alt. Par exemple, si Jaws donne le nom du fichier image, cela peut signifier soit que l'attribut alt est absent, soit qu'il est présent et qu'il contient le nom du fichier image. Par conséquent, si vous avez un doute sur le texte donné par Jaws en remplacement d'une image, il est recommandé de compléter l'évaluation du critère en utilisant une vériification par le code source. Par ailleurs, l'ordre d'apparition des éléments graphiques est celui du code source.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

La mise en oeuvre de ce critère concerne les concepteurs de site web.

Implémentation

Le seul moyen de fournir une alternative textuelle à un élément graphique est d'utiliser l'attribut alt des balises IMG et AREA.

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

<area shape="rect" coords="0,0,30,30" href="monlien.html" alt="contenu de l'alternative textuelle" />

Mise en oeuvre à l'aide d'outils d'édition de page web

• avec FrontPage : Le commentaire se place dans l'emplacement "Texte" de la boîte de dialogue "propriétés de l'image" (cliquer sur l'image avec le bouton droit pour la trouver).
• avec Dreamweaver : Dans le champ "sec" (comme "secondaire") dans la fenêtre des propriétés, pour mettre un alt="" mettez "vide"
• avec WebExpert : Dans la boîte de dialogue "Insérer une image graphique", placer le commentaire dans la case "Alternative".
• avec HotMetal Pro : Lors de l'insertion de l'image, placer le commentaire dans la case "Alternate Text" de la boîte de dialogue "Image Properties". Cette boîte de dialogue peut être retrouvée par la suite en cliquant sur l'image avec le bouton droit (en mode "TagsOn" ou "WYSIWYG").
• avec N-View : utilisez l'option "texte alternatif" du menu "images".

Exemple de mauvaise pratique

L'élément graphique suivant ne comporte pas d'alternative textuelle (l'attribut alt est absent).

<img src="spacer.gif" />

Exemple de bonne pratique

L'élément graphique suivant contient une alternative textuelle.

<img src="couple.jpg" alt="couple" />

revenir en haut de la page

Illustrations

revenir en haut de la page

Références

Autres fiches à consulter

• Fiche 1.2 : Pour chacune des images de la page ayant une alternative, les textes dans l'attribut ALT sont-ils appropriés par rapport au contexte dans lequel l'image se trouve ?
• Fiche 1.3 : Les éléments graphiques destinés à la décoration sont-ils commentés par ALT="" ?
• Fiche 1.5 : Les commentaires associés à chacune des zones réactives d'une image map sont-ils pertinents ?
• Fiche 1.8 : Pour chacune des images texte de la page, le contenu de son alternative est-il au moins équivalent au texte inscrit dans l'image ?
• Fiche 1.12 : Pour chacune des images liens, le texte contenu dans l'attribut ALT donne-t-il la fonction du lien ?
• Fiche 11.6 : Dans un formulaire, le commentaire du bouton SUBMIT est-il pertinent ?

Autres ressources

• html techniques (section 7.1) : Short text equivalents for images ("alt-text")
• Les images accessibles sur le site openweb
• la-grange.net : Fournir des équivalents texte pour les images
• A. J. Flavell : ALT texts in IMG
• Jukka Korpela : Simple guidelines on using ALT texts in IMG elements
• Ian Hickson : Mini-FAQ about the alternate text of images
• webaim.org : Creating accessible images
• Martin Schrode : On accessible advertising

revenir en haut de la page