retour vers le site AccessiWeb

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 ?

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

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 :

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

L'information n'est données que par la couleur

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.

Les couleurs sont désactivées, l'information disparaît

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

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 2.10 Fiche suivante : fiche 3.2

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