La grille « D »

Outil de conception pour rendre les sites Web accessible aux utilisateurs daltoniens

1. Couleur

2. Premier plan / Arrière-plan

3. Navigation

4. Texte de remplacement

5. Son

A.Conception

•Concevoir en N+B puis ajouter la couleur.

•S'assurer d'un contraste suffisant entre les couleurs et leur compatibilité avec le daltonisme.(1)

•Renforcer la couleur avec des éléments et des formes graphiques comme outils de navigation et de signalétique.

•Pour tous les éléments, inclure l'attribut texte de remplacement « alt=text » court et descriptif.

•Utiliser pour signifier un message important ou pour appuyer une indication.

B. Couleur

•Utiliser « La palette 5D», pour sélectionner les couleurs. (Voir annexe 4) •Vérifier avec l'applet de simulations des couleurs.(1)

•Pour un bon contraste, utiliser les couleurs foncées des bouts du spectre en combinaison avec les couleurs lumineuses du centre du spectre chromatique.

•Utiliser les couleurs seulement si l'information est également mise en évidence grâce à des éléments textuels indiquant leurs fonctions.

•Pour tous les éléments, qui utilisent la couleur, inclure un texte de remplacement court et descriptif.

•Utiliser pour signifier et renforcir un message important qui utilise la couleur.

C.Texte Typographie Lisibilité

•Couleurs à éviter pour le texte : bleu, rouge, violet. La couleur bleue est réputée comme la moins perceptible par l'œil humain.

•Porter une attention particulière aux couleurs de caractère.•Éviter la combinaison des couleurs entre texte et contexte de même intensité.

•Liens hypertextes en couleur, utiliser le soulignement et un texte de remplacement. Au besoin penser au texte renversé.

•Si le texte est en format police matricielle (bitmap) ajouter un texte de remplacement.

•Utiliser pour signifier un texte important en survol ou en cliquant.

D. Bouton de navigation Hypertexte Hyperlien

•Utiliser des couleurs contrastées et faciles à repérer. •Étiqueter les boutons.

•S'assurer d'un contraste de couleurs suffisant entre les boutons, les hypertextes et le fond.

•En plus de la couleur utiliser des formes et textures pour les boutons. •Mot clé pour liens.

•Pour chaque bouton inclure un texte de remplacement court et descriptif.

•Utiliser, en plus de la couleur pour appuyer l'utilité ou l'efficacité, des boutons.

E. Images- Fixe- Animation- Interactive

•Choisir des images compatibles avec la dyschro-matopsie (Voir logiciel de simulation de couleur).(2)

•S'assurer d'un contraste de couleurs suffisant entre les images et le fond.

•Pour les images cliquables, utiliser un attribut « alt » avec AERA ou l'élément MAP.

•Pour chaque image fixe, animée ou interactive, inclure un texte de remplacement court et descriptif.

•Utiliser pour signifier une image importante ou pour attirer l'attention sur une partie de l'image.

F Design d'information

•Utiliser des éléments comme les formes, signes, textures, icônes pour compléter ou remplacer la couleur.

•S'assurer d'un contraste de couleurs suffisant entre les éléments du design d'information et le fond.

•En plus de la couleur, utiliser des éléments du design d'information pour faciliter la navigation.

•Pour chaque élément graphique de design d'information, inclure un texte de remplacement court et descriptif.

•Utiliser pour signifier ou appuyer un élément important de design d'information.

G. Ergonomie Utilisabilité

•7 codes de couleur au maximum, par site.•4 codes de couleur à l'écran au maximum, en même temps. •Utiliser un autre indicateur que la couleur.

•Éviter les images en arrière plan, ils apportent de la confusion avec le texte et les éléments. • Identifier les images de premier plan à l'aide de vignette.

•Pour chaque élément de navigation inclure un info-bulle. •Penser aussi à :-utiliser les onglets contrastés ;-changer l'apparence du curseur ;-icônes significatives.

•Pour chaque élément, inclure un texte de remplacement court et descriptif un texte de remplacement. ou un info-bulle.

•Employer judicieusement. •Éviter l'abus. •Doit s'employer en complémentarité d'un indicateur visuel. •Esquiver les ritournelles inutiles.

Divers commentaires

•Ne pas donner d'instructions qui se réfèrent aux objets par la couleur, ex. « Appuyez le bouton rouge », « attendre la lumière verte ». Il faut plutôt dire « presser le bouton marqué 'ON' ».

•Les lecteurs Achromatopes (voie en noir et blanc seulement) peuvent différencier les couleurs semblables qui contrastent entre lumineux et sombres. •Choisir l'option d'affichage 256 tons gris pour faire une vérification.

•Ne pas employer seulement des éléments colorés pour dénoter des secteurs spéciaux, comme des graphiques, des barres,et des barres de navigation. •Considérer l'utilisation de textures, de formes ou de lignes hachurant en plus de cela.

•Fournisser des étiquettes à côté de n'importe quels indicateurs colorés. Par exemple, s'il y a un témoin lumineux rouge et un autre vert, écrire 'ATTENTION' et 'OK' à proximité de chacun, ou employer des nombres ou des symboles.

•Si un élément basé sur la couleur sert de guide pour naviguer, signaler ou signifier, le son demeure un aspect intéressant pour appuyer cet élément.