Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • 1) Images
   • 2) Cadres
   • 3) Couleurs
   • 4) Multimédia
   • 5) Tableaux
   • 6) Liens
   • 7) Code exécutable
   • 8) Eléments obligatoires
   • 9) Structuration de l'information
   • 10) Présentation de l'information
   • 11) Formulaires
   • 12) Navigation
   • 13) Consultation
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

Critère 3.1 : Dans chaque page Web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?

revenir en haut de la page

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

revenir en haut de la page

Comprendre

Comprendre le critère

Aucune information ne doit être donnée uniquement par la couleur.

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 monochromes.
  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 leurs propres feuilles de style pour obtenir un jeu de couleurs 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

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 :
   • tous les menus de navigation
   • tous les mots mis en couleur
   • Toutes les images véhiculant une information donnée par la couleur
   • tous les objets multimédia véhiculant une information donnée par la couleur
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 3.1.a [Bronze] : Dans chaque menu de navigation, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
   • Test 3.1.b [Bronze] : Dans chaque page Web, pour chaque mot ou ensemble de mots mis en couleur, l'information ne doit pas être donnée uniquement par celle-ci. Cette règle est-elle respectée ?
   • Test 3.1.c [Bronze] : Pour chaque image véhiculant une information, cette information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
   • Test 3.1.d [Bronze] : Pour chaque objet multimédia véhiculant une information, cette information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
   
   
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) :

• Pour le test 3.1.a [Bronze] et le test 3.1.b [Bronze] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Relever sur la page les informations données par la couleur.
  3. Sélectionner les objets.
  4. Dans le menu "Code source" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir le code source".
  5. Pour chaque menu de navigation et pour chaque mot ou ensemble de mots mis en couleur, vérifier que l'information est donnée par un autre moyen, en complément de la couleur.
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 3.1.c [Bronze] :
  1. Ce test n'est pas évaluable par la Barre d'outils Accessibilité du Web (version 2.0 beta).
  
  
• Pour le test 3.1.d [Bronze] :
  1. Ce test n'est pas évaluable par la Barre d'outils Accessibilité du Web (version 2.0 beta).

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

• Pour le test 3.1.a [Bronze] et le test 3.1.b [Bronze] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Relever sur la page les informations données par la couleur.
  3. Sélectionner les objets.
  4. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  5. Une nouvelle fenêtre apparaît contenant le code source de la page.
  6. Pour chaque menu de navigation et pour chaque mot ou ensemble de mots mis en couleur, vérifier que l'information est donnée par un autre moyen, en complément de la couleur.
  7. Si c'est le cas, le test est validé.
  
  
• Pour le test 3.1.c [Bronze] :
  1. Ce test n'est pas évaluable par la Barre d'Outils Web Developper (version 1.1.4).
  
  
• Pour le test 3.1.d [Bronze] :
  1. Ce test n'est pas évaluable par la Barre d'Outils Web Developper (version 1.1.4).

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 :

• dans un menu de navigation, lorsque le lien de la page active est spécifié avec de la couleur, indiquer cette page active en désactivant le lien ou en lui associant un attribut title "Page active : nom de la rubrique.
• 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

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

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 2.1) : Don't rely on color alone
• WAI 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 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.