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.4 : Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative a-t-elle une longueur maximum de 80 caractères (hors cas particuliers) ?

revenir en haut de la page

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

revenir en haut de la page

Comprendre

Comprendre le critère

Le nombre maximum de caractères de l'alternative textuelle de toutes les images porteuses d'information est 80 (espaces et ponctuations compris, un caractère accentué comptant pour 1) à l'exception des cas particuliers pour le critère 1.4.

Bénéfices pour les utilisateurs

• Bénéfice 1 :
  L'alternative textuelle associée à un élément graphique est la seule information restituée à l'utilisateur lorsqu'il désactive le chargement des images (par exemple, à cause d'une connection Internet bas débit). Cette alternative textuelle doit décrire uniquement et de manière concise la même information que celle véhiculée par l'élément graphique. Si la description a besoin d'être détaillée, cela doit être fait via une autre technique (lire les fiches 1.5 et 1.6).
  
  
• Bénéfice 2 :
  Pour l'utilisateur d'un logiciel de grossissement avec le navigateur Internet Explorer, cette alternative textuelle s'affiche dans une info-bulle au passage de la souris. Du fait que cette alternative textuelle est limitée à 80 caractères, elle pourra s'afficher sur un seul écran, même avec un fort grossissement.
  
  
• Bénéfice 3 :
  Pour l'utilisateur d'un afficheur braille de 80 caractères, cette alternative textuelle limitée à 80 caractères s'affiche sur une seule ligne.

Valeur ajoutée pour le site

• Tout élément textuel est repéré par les moteurs de recherche. Par conséquent, tout élément graphique possédant une alternative textuelle sera mieux référencé, en particulier si elle est courte et explicite.

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 :
   • 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" />) :
     • 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
   • Copier/coller le contenu de l'alternative textuelle des images porteuse d'information dans un éditeur de texte et compter le nombre de caractères (espaces et ponctuations compris).
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 1.4.a [Bronze] : Pour chaque image porteuse d'information (balise img) ayant un attribut alt, le contenu de cet attribut a-t-il une longueur maximum de 80 caractères (hors cas particuliers) ?
   • Test 1.4.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 a-t-il une longueur maximum de 80 caractères (hors cas particuliers) ?
   • Test 1.4.c [Bronze] : Pour chaque bouton associé à une image (balise input avec l'attribut type="image") ayant un attribut alt, le contenu de cet attribut a-t-il une longueur maximum de 80 caractères (hors cas particuliers) ?
   • Test 1.4.d [Bronze] : Pour chaque image applet (balise applet) porteuse d'information et ayant un attribut alt, le contenu de cet attribut a-t-il une longueur maximum de 80 caractères (hors cas particuliers) ?
   
   
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.4.a [Bronze] et le test 1.4.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 chaque image qui a un attribut alt, le contenu de cet attribut a une longueur maximum de 80 caractères (hors cas particuliers).
  5. Si c'est le cas, le test est validé.


• Pour le test 1.4.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 a une longueur maximum de 80 caractères (hors cas particuliers).
5. Si c'est le cas, le test est validé.


• Pour le test 1.4.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 chaque balise applet qui a un attribut alt, le contenu de cet attribut a une longueur maximum de 80 caractères (hors cas particuliers).
  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.4.a [Bronze] et le test 1.4.c [Bronze] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "CSS" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Désactiver les CSS" puis l'option "Tous les styles".
  3. Puis, dans le menu "Images", activer l'option "Afficher les attributs Alt".
  4. Vérifier que pour chaque image qui a un attribut alt, le contenu de cet attribut a une longueur maximum de 80 caractères (hors cas particuliers).
  5. Si c'est le cas, le test est validé.


• Pour le test 1.4.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 a une longueur maximum de 80 caractères (hors cas particuliers).
5. Si c'est le cas, le test est validé.


• Pour le test 1.4.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 a une longueur maximum de 80 caractères (hors cas particuliers).
  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

Rédiger des alternatives textuelles de 6 à 7 mots maximum (si l'image est porteuse d'information, sinon l'alternative est vide), espaces et accents compris (une lettre accentuée compte pour un caractère). 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

Imaginons le site d'un guide touristique qui utilise un jeu de pictogrammes pour identifier et signaler aux visiteurs certaines caractéristiques des lieux décrits.
Par exemple, pour signaler que le lieu est accessible aux personnes handicapées, la page comporte le logo du fauteuil roulant stylisé en blanc sur fond bleu.
Ce pictogramme apporte bien une information à laquelle tout utilisateur doit avoir accès. Cependant, il n'est pas nécessaire de décrire avec précision ce qu'il représente et la manière dont il est dessiné. Ce qui importe est l'information qu'il véhicule.
On évitera donc une alternative textuelle du type :

<img src="fauteuil.gif" alt="logo d'un fauteuil roulant stylisé en blanc sur fond bleu indiquant que le lieu est accessible aux personnes handicapées" />

Exemple de bonne pratique

Dans l'exemple précédent, écrire de préférence :

<img src="fauteuil.gif" alt="accessible aux personnes handicapées" />

revenir en haut de la page

Illustrations

Il n'y a pas d'illustration pour cette fiche.

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

---