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

vous êtes ici : Accueil > Fiches AccessiWeb : Images > Critère 1.9

Critère 1.9 : Chaque image texte doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée ?

revenir en haut de la page

Carte d'identité du critère 1.9 [niveau AccessiWeb : Argent]

revenir en haut de la page

Comprendre

Comprendre le critère

Bénéfices pour les utilisateurs

• L'application de cette recommandation va permettre à un utilisateur malvoyant, par exemple, de modifier à sa convenance la taille des caractères pour lire plus aisément les informations. Un texte dessiné dans une image empêchera cette souplesse de configuration, puisque sa taille ou son contraste ne peuvent pas être modifiés dans le navigateur ou le logiciel de grossissement de l'utilisateur.
  
  Remarque : Il est très souvent aisé de mettre du texte en forme par l'intermédiaire d'une feuille de style plutôt que de mettre du texte sous forme d'image, tout en gardant le même aspect graphique.
  A part le cas de contraintes graphiques strictes où il ne sera pas possible de transformer de façon équivalente le texte mis sous forme d'image, on choisira de préférence l'utilisation de feuilles de style.

Valeur ajoutée pour le site

• La présence de texte mis en forme par l'utilisation de feuilles de style au lieu de textes en image permet une mise à jour plus facile pour le graphiste et l'intégrateur html.

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 texte.
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 1.9.a [Argent] : Chaque image texte (balise img) doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée ?
   • Test 1.9.b [Argent] : Pour chaque image réactive (balise img ou object avec l'attribut usemap), chaque zone texte (balise area) doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée ?
   • Test 1.9.c [Argent] : Pour chaque balise form, chacun de ses boutons "image texte" (balise input avec l'attribut type="image") doit si possible être remplacé par du texte stylé. Cette règle est-elle respectée ?
   • Test 1.9.d [Argent] : Chaque image texte applet (balise applet) doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée ?
   • Test 1.9.e [Argent] : Chaque image texte objet (balise object avec l'attribut type="image/...") doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée ?
   
   
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.9.a [Argent] et le test 1.9.c [Argent] :
  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. Repérer les images contenant du texte dont la transformation à l'identique avec du texte stylé n'est pas possible.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 1.9.b [Argent] :
  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. Pour chaque image réactive, vérifier que pour chaque zone texte, la transformation à l'identique avec du texte stylé n'est pas possible.
  5. Si c'est le cas, le test est validé.
• Pour le test 1.9.d [Argent] :
  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. Repérer les images texte applet dont la transformation à l'identique avec du texte stylé n'est pas possible.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 1.9.e [Argent] :
  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.
  4. Repérer les images texte objet dont la transformation à l'identique avec du texte stylé n'est pas possible.
  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.9.a [Argent] et le test 1.9.c [Argent] :
  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. Repérer les images contenant du texte dont la transformation à l'identique avec du texte stylé n'est pas possible.
  4. Si c'est le cas, le test est validé.


• Pour le test 1.9.b [Argent] :
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. Pour chaque image réactive, vérifier que pour chaque zone texte, la transformation à l'identique avec du texte stylé n'est pas possible.
4. Si c'est le cas, le test est validé.


• Pour le test 1.9.d [Argent] :
  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. Repérer les images texte applet dont la transformation à l'identique avec du texte stylé n'est pas possible.
  4. Si c'est le cas, le test est validé.
  
  
• Pour le test 1.9.e [Argent] :
  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. Repérer les images texte objet dont la transformation à l'identique avec du texte stylé n'est pas possible.
  4. 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, en concertation avec le graphiste, doivent veiller au respect de ce critère.

Implémentation

Lorsqu'un texte est dessiné dans une image, il convient d'abord de se demander si celui-ci ne peut pas être écrit directement dans la page html, puis mis en forme par l'intermédiaire de la feuille de style. C'est notamment le cas lorsque le graphisme du texte est celui d'une police de caractère standard (Arial, Verdana, ou autres polices de la famille sans-serif). Le positionnement, la taille et la couleur du texte, ses attributs comme la mise en gras sont ensuite définis dans la feuille de style. Dans le cas de notations plus spécifiques pour lesquelles il est fréquent de les représenter sous forme d'images, comme les équations mathématiques ou l'écriture musicale, le WAI préconise l'utilisation de langages appropriés comme le mathml ou TEX qui permettent de les restituer sous forme de texte inscrit dans la page et accessible aux utilisateurs qui ne peuvent voir les images.

Exemple de mauvaise pratique

Il n'y a pas d'exemple pour cette rubrique.

Exemple de bonne pratique

Il n'y a pas d'exemple pour cette rubrique.

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 3.4) : Markup and style sheets rather than images: The example of math
• html techniques (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 en haut de la page