# Guide AccessiWeb

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

## Fiche 1.9 : Il convient de remplacer un texte sous forme d'image par un texte mis en forme. Cette règle est-elle respectée ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### Carte d'identité

- Critère AccessiWeb : 1.9
- Niveau AccessiWeb : argent
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 3.1

revenir en haut de la page

### Comprendre

#### Bénéfices pour les utilisateurs

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

revenir en haut de la page

### Comment évaluer

#### Par le code source

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) :

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.9.
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. Repérer les images contenant du texte avec des polices standards.
5. 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) :

1. Cliquer sur le menu "Images", puis l'option "Liste des images [Nouvelle fenêtre]".
2. Repérer les images contenant du texte avec des polices standards.
3. 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) :

1. Dans le menu "Images", activer le sous-menu "Entourer les images" puis l'option "Toutes les images".
2. Tous les éléments graphiques de la page sont entourés d'un liseret rouge.
3. Repérer les images contenant du texte avec des polices standards.
4. 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.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

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.

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

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.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 1.4 : Pour chacune des images de la page, les textes dans l'attribut ALT font-ils moins de 60 caractères ?
- 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.10 : Quand une image nécessite une description détaillée, un commentaire texte lui est-il associé ?
- Fiche 10.1 : Le contenu de la page est-il séparé de sa présentation ?
- Fiche 12.8 : La page fait-elle moins de 70 Ko ?
- Fiche 13.7 : Est-ce que la présentation spécifique d'une information n'entrave pas l'accès à son contenu ?

#### Autres ressources

- html techniques (section 3.4) Markup and style sheets rather than images: The example of math
- Web content Accessibility Curriculum (Slide 5 of 120) a text equivalent for graphical representations of text (including symbols)
- Plongez dans l'accessibilité (jour 23) Fournir des équivalents texte pour les images

revenir au sommaire de la fiche

revenir en haut de la page

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact