# Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Couleurs > Fiche 3.1

## Fiche 3.1 : L'information donnée par la couleur est-elle aussi lisible lorsque les couleurs sont désactivées ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### Carte d'identité

- Critère AccessiWeb : 3.1
- Niveau AccessiWeb : bronze
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 1 de WAI) : 2.1

revenir en haut de la page

### Comprendre

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

- Bénéfice 1 :
  Lorsqu'une information n'est pas donnée uniquement par la couleur, elle reste accessible aux personnes aveugles ou aux utilisateurs qui ont une déficience de perception des couleurs (daltonisme), ou encore ceux qui utilisent des terminaux monochrômes.
  Ainsi, dans un formulaire, une mention du type "les champs en rouge doivent être obligatoirement remplis" n'est pas suffisante. Il faut associer aux champs en rouge, un signe distinctif, comme par exemple une étoile "*", ou un soulignement, afin que tous les utilisateurs sachent quels sont les champs obligatoires.
- Bénéfice 2 :
  Les utilisateurs qui appliquent leur propres feuilles de styles pour obtenir un jeu de couleur qui leur convient mieux, risquent de perdre des informations si elles sont uniquement données par l'intermédiaire de codes couleurs. Là encore, il faut offrir un moyen alternatif de percevoir l'information.

Remarque : l'usage des couleurs est très important pour les personnes souffrant d'un handicap cognitif, mais il ne doit pas être le seul vecteur de l'information.

#### Valeur ajoutée pour le site

Il n'y a pas d'élément d'information pour cette rubrique.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. Lister l'ensemble des éléments auxquels sont appliquées des couleurs de forme et de fond (en principe par l'intermédiaire des feuilles de style), en relevant notamment l'usage des attributs `bgcolor` et `text`.
2. Vérifier que la suppression des couleurs de texte et d'arrière-plan n'entraîne pas une perte information.
3. Si tel est le cas, s'assurer que cette information est accessible par un autre moyen (utilisation d'un symbole entré au clavier, utilisation de balises de structuration etc...)

#### 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 "3. Couleurs" de la Barre AccessiWeb, activer le critère 3.1.
3. La fenêtre Accessibilité de Internet Explorer s’ouvre.
4. Cocher l’option "Ignorer les couleurs spécifiées sur les pages Web" et cliquer sur le bouton OK.
5. Vérifier alors qu'il n'y a aucune perte d'information avec les couleurs désactivées.
   Note : Pour réactiver les couleurs de la page, cliquer sur le critère 3.1 et décocher l’option, puis cliquer sur le bouton OK.

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

1. Cliquer sur l'option "Boîte de dialogue Accessibilité" du menu "Options IE".
2. Cocher la case "Ignorer les couleurs spécifiées sur les pages Web" et valider par le bouton OK.
3. Recharger la page en appuyant sur la touche F5.
4. Vérifier qu'il n'y a aucune perte d'information.
5. Pour réactiver les couleurs, reprenez les étapes 1 et 2 en décochant la case "Ignorer les couleurs spécifiées sur les pages Web". Puis recharger la page en appuyant sur la touche F5.

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

1. Cliquer sur l'option "Désactiver les couleurs de la page" du menu "Désactiver".
2. Vérifier qu'il n'y a aucune perte d'information.
3. Pour réactiver les couleurs, retourner dans le menu "Désactiver" et décocher l'option "Désactiver les couleurs de la page".

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

Les graphistes et les rédacteurs doivent se concerter afin de fournir une information accessible autrement que par le seul biais des codes couleur.

#### Implémentation

Il faut penser à coupler l'information donnée par la couleur avec autre chose que de la couleur.
Par exemple :

- dans un formulaire, indiquer les champs obligatoires par la couleur et aussi un astérisque.
- ne pas structurer la page avec uniquement des couleurs mais le faire également dans le code avec les balises H.
- Lors de l'utilisation d'un graphique type camembert, proposer, par exemple, des hachures, des points pour différencier chaque portion

#### Exemple de mauvaise pratique

Dans un formulaire, indiquez les champs obligatoires en les colorant en rouge sans ajouter un symbole distinctif (icône ou astérisque) est une utilisation fautive de la couleur, comme l'indique l'exemple ci-dessous.

Dans le code suivant de la feuille de style, la classe "obligatoire" affiche le texte en rouge :

/* feuille de style screen.css */
.obligatoire {color : red; }

Dans l'extrait de code qui suit, les paragraphes "nom" et "prénom", de classe "obligatoire", afficheront le texte en rouge :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>
<body>
<form action=".." method="post">
<p class="obligatoire">Nom * : <input type="text" size="30" /></p>
<p class="obligatoire">Prénom * : <input type="text" size="30" /></p>
téléphone : <input type="text" size 10 />
</form>
</body>
</html>
Les champs en rouge sont obligatoires.

#### Exemple de bonne pratique

La bonne pratique est de placer, au début du formulaire, une mention du type "les champs en rouge et suivis du symbole * sont obligatoires". Le code suivant ne reprend que la partie à modifier, c'est-à-dire, celle concernant le formulaire

Les champs en rouge et marqués du symbole * sont obligatoires<br />
<form action=".." method="post">
<p class="obligatoire">Nom * : <input type="text" size="30" /></p>
<p class="obligatoire">Prénom * : <input type="text" size="30" /></p>
téléphone : <input type="text" size 10>
</form>

revenir en haut de la page

### Illustrations

Cette capture d'écran présente un formulaire. Certains intitulés de champs sont de couleur verte. La mension "les champs en verts sont obligatoires" est inscirte au début du formulaire.

Cette capture d'écran présente le même formulaire que sur la première illustration. Les couleurs ont été désactivées. Ceci a pour conséquences que l'utilisateurs ne peut savoir quels sont les champs obligatoires puisqu'ils n'étaient signalés que par la couleur verte. Il aurait fallu signaler ces champs en les faisant suivre du signe astérisque "*", par exemple.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 3.2 : Les différences de contrastes entre les couleurs sont-elles suffisamment élevées ?
- Fiche 9.2 : La page web est-elle structurée de manière cohérente ?
- Fiche 10.1 : Le contenu de la page est-il séparé de sa présentation ?
- Fiche 10.2 : Avec les feuilles de style désactivées, l'information est-elle toujours présente ?
- Fiche 11.7 : Le contrôle de saisie des champs du formulaire est-il accessible ?

#### Autres ressources

- html Techniques (section 2.1) : Don't rely on color alone
- Web Content Accessibility Curriculum (section 2.1) : Ensure that all information conveyed with color is also available without color

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