3.4.1 Le contenu est compréhensible pour quelqu'un qui ne peut distinguer les couleurs
La compréhension du contenu de la page ne peut dépendre uniquement d’un code couleur, de la taille du texte, de sa position ou d'un son.
Pourquoi?
Une personne qui ne peut percevoir les couleurs doit pouvoir comprendre l’information sans difficulté. Il en va de même pour quelqu'un qui ne peut distinguer les formes ou la position des éléments sur la page ou qui n'entend pas.
En pratique
Les couleurs et les formes sont souvent utilisées de manière décorative, mais parfois elles jouent un rôle essentiel dans la compréhension de la page. Cette directive a trait aux couleurs, formes, positions ou sons qui communiquent une information. Pensez par exemple à des messages d'erreur, de confirmation ou de disponibilité.
Une bonne solution est de s'assurer que l'information est également communiquée sous forme de texte.
Vous pouvez continuer à utiliser des codes couleurs parce qu'ils sont utiles à une grande partie des visiteurs. Cette directive demande d'y ajouter une autre forme de distinction pas uniquement basée sur la couleur.
Remarque: bien que l'utilisation de la couleur dans un but décoratif n'influence pas la compréhension du contenu, elle peut dans certains cas en diminuer la lisibilité.
Les couleurs
Ci-dessous, vous voyez un morceau de la page web contenant l'ancien tableau des départs de l'aéroport de Bruxelles national. Les avions qui ont décollé sont indiqués en vert. Les vols retardés sont indiqués par un carré rouge.
Un homme sur huit est atteint de daltonisme et l'incapacité de distinguer le vert du rouge en est la forme la plus courante. Pour quelqu'un qui ne peut pas distinguer les couleurs ou qui est aveugle, les carrés colorés ne sont d'aucune utilité . Le webmaster a adapté le tableau de la manière suivante :
Ce qui a changé:
- Les carrés rouges et verts ont été remplacés par des rectangles de couleur auxquels sont superposés les textes ‘En vol’ ou ‘Retardé’.
- Grâce à la variante textuelle (attribut
alt), cette information est aussi disponible pour les personnes aveugles.
La taille du texte et la couleur
Dans un nuage de tags, la fréquence des tags est souvent visualisée au moyen de la taille des caractères ou de leur couleur.
Ces informations sont perdues pour ceux qui parcourent la page en braille ou au moyen d'une synthèse vocale. Ils ne pourront donc pas distinguer les termes les plus importants de ceux qui le sont moins.
Il faut rendre cette information accessible, par exemple en ajoutant un chiffre à côté de chaque tag. Cette information peut éventuellement être cachée grace aux CSS. Une autre solution serait de proposer un lien pour trier les tags par ordre d'importance.
Exemple de nuage de tags avec indication de la fréquence
Le placement, la forme et le son
Exemples pratiques incorrectes
- "Le résumé ainsi que la présentation complètes se trouvent à droite sur cette page."
- "Clickez sur le triangle pour voir plus de véhicules"
- "Vous pouvez laisser un message après le bip."
Exemples de pratiques correctes
- "Le résumé ainsi que la présentation complètes se trouvent sous le titre "Documents" à droite sur cette page."
- "Plus de véhicules"
- "Vous pouvez laisser un message après le bip lorsque le mot "Enregistrer" s'allume."
Autres exemples
- Pour indiquer qu'un formulaire rempli contient des erreurs, il ne suffit pas de les indiquer en rouge. Indiquez sous forme textuelle quels champs n'ont pas été remplis correctement.
- Dans un calendrier de ramassage des déchets, la distinction entre les différentes sortes de déchets se fait souvent par des couleurs. Cela ne suffit pas. On peut utiliser des abréviations ou des pictogrammes avec variante textuelle pour résoudre ce problème.
- Un diagramme peut être rendu plus accessible en utilisant des hachures différentes ou en associant des symboles différents aux couleurs.