retour vers le site AccessiWeb

Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Couleurs > Critère 3.2

Critère 3.2 : Dans chaque page Web, l'information ne doit pas être donnée uniquement par la couleur. L'implémentation de cette règle est-elle pertinente ?

revenir en haut de la page

Carte d'identité du critère 3.2 [niveau AccessiWeb : Bronze]

Test(s) AccessiWeb permettant de vérifier le critère 3.2

Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].

  • Test 3.2.a [Bronze] : Dans chaque menu de navigation, l'information ne doit pas être donnée uniquement par la couleur. L'implémentation de cette règle est-elle pertinente ?
  • Test 3.2.b [Bronze] : Dans chaque page Web, pour chaque information véhiculée par la couleur d'un mot ou ensemble de mots, l'information ne doit pas être donnée uniquement par la couleur. L'implémentation de cette règle est-elle pertinente ?
  • Test 3.2.c [Bronze] : Pour chaque image véhiculant une information, l'information ne doit pas être donnée uniquement par la couleur. L'implémentation de cette règle est-elle pertinente ?
  • Test 3.2.d [Bronze] : Pour chaque objet multimédia véhiculant une information, l'information ne doit pas être donnée uniquement par la couleur. L'implémentation de cette règle est-elle pertinente ?

Autre(s) fiche(s) AccessiWeb à consulter en relation avec cette fiche

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

revenir en haut de la page

Comprendre

Comprendre le critère

Aucune information doit être donnée uniquement par la couleur. L'implémentation de cette règle doit être pertinente. Elle doit fournir un moyen alternatif - autre que la couleur - pour accéder à l'information et doit rester présente quel que soit le mode d'accès de l'utilisateur à cette information.

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

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

  1. Sélectionner le(s) élément(s) à tester : Identifier dans un navigateur graphique :

  2. Appliquer le(s) test(s) suivant(s) :
    • Test 3.2.a [Bronze] : Dans chaque menu de navigation, l'information ne doit pas être donnée uniquement par la couleur. L'implémentation de cette règle est-elle pertinente ?
    • Test 3.2.b [Bronze] : Dans chaque page Web, pour chaque information véhiculée par la couleur d'un mot ou ensemble de mots, l'information ne doit pas être donnée uniquement par la couleur. L'implémentation de cette règle est-elle pertinente ?
    • Test 3.2.c [Bronze] : Pour chaque image véhiculant une information, l'information ne doit pas être donnée uniquement par la couleur. L'implémentation de cette règle est-elle pertinente ?
    • Test 3.2.d [Bronze] : Pour chaque objet multimédia véhiculant une information, l'information ne doit pas être donnée uniquement par la couleur. L'implémentation de cette règle est-elle pertinente ?

  3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.


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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

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

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.


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

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.


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.

Information sur la page active dans un menu uniquement donné

Dans cet exemple, avec les couleurs activées, la rubrique active dans le menu ("Accueil" sur fond blanc) est indiquée par de la couleur uniquement (les autres rubriques sont sur un fond bleu). Lorsque les couleurs sont désactivées, l'information sur la rubrique active dans le menu disparaît car l'ensemble des rubriques se trouve désormais sur un fond blanc. Il est donc nécessaire d'associer une information complémentaire à cette seule information donnée par de la couleur. Par exemple, désactiver le lien de la rubrique active ou indiquer explicitement dans le lien que celui-ci représente la rubrique active dans la menu.

revenir en haut de la page

Références

revenir en haut de la page

Fiche précédente : fiche du critère 3.1 Fiche suivante : fiche du critère 3.3

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.