Bénéfice 1 :
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.
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
Bénéfice 1 :
La préférence pour l'usage d'une feuille de style implique une chaîne de travail moins fastidieuse dans la mise à jour du site. Le graphiste n'aura qu'une simple mise à jour à effectuer. Un intégrateur html pourra faire ces modifications et/ou évolutions de texte directement dans la page.
Bénéfice 2 :
Il en résulte un gain de temps global dans la chaîne de production.
Ce critère n'est pas évaluable par le code source.
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) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "1. Eléments graphiques" de la Barre AccessiWeb, activer le critère 1.9.
Tous les éléments graphiques de la page s'affichent dans une nouvelle fenêtre avec, en dessous, l'extrait de code source correspondant.
Repérer les images contenant du texte avec des polices standards.
Si tel est le cas, ces textes sont sous forme d'images et le critère n'est pas respecté.
Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Cliquer sur le menu "Images", puis l'option "Liste des images [Nouvelle fenêtre]".
Repérer les images contenant du texte avec des polices standards.
Si tel est le cas, ces textes sont sous forme d'images et le critère n'est pas respecté.
Evaluer avec la Barre d'Outils Web Developper pour Firefox (version
1.0.2 en français) :
Dans le menu "Images", activer le sous-menu "Entourer les images" puis l'option "Toutes les images".
Tous les éléments graphiques de la page sont entourés d'un liseret rouge.
Repérer les images contenant du texte avec des polices standards.
Si tel est le cas, ces textes sont sous forme d'images et le critère n'est pas respecté.
Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Ce critère n'est pas évaluable par le lecteur d'écran Jaws.
Le développeur, en concertation avec le graphiste, doivent veiller au respect de ce critère.
Implémentation
Implémentation pour la fiche 1.9
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.
Cette capture d'écran présente une page sur laquelle figure un texte sous forme d'image. Le texte est "calendrier des manifestations" et est en vert sur fond jaune.
Cette capture d'écran présente le même texte que l'image précédente, mais dont la mise en forme a été faite par l'intermédiaire d'une feuille de sytle.