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.
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.
Vérifier que la suppression des couleurs de texte et d'arrière-plan n'entraîne pas une perte information.
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) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "3. Couleurs" de la Barre AccessiWeb, activer le critère 3.1.
La fenêtre Accessibilité de Internet Explorer s’ouvre.
Cocher l’option "Ignorer les couleurs spécifiées sur les pages Web" et cliquer sur le bouton OK.
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) :
Cliquer sur l'option "Boîte de dialogue Accessibilité" du menu "Options IE".
Cocher la case "Ignorer les couleurs spécifiées sur les pages Web" et valider par le bouton OK.
Recharger la page en appuyant sur la touche F5.
Vérifier qu'il n'y a aucune perte d'information.
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) :
Cliquer sur l'option "Désactiver les couleurs de la page" du menu "Désactiver".
Vérifier qu'il n'y a aucune perte d'information.
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.
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 :
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>
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.