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.

Ecran des départs(non accessible)

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 :

Ecran des départs (accessible)

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.

nuage de tags

Il faut rendre cette information accessible, par exemple en ajoutant un chiffre à côté de chaque tag. Cette information peut éventuellement être cachée grâce 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

nuage de tags avec chiffre à droite de chaque tag

Le placement, la forme et le son

Exemples pratiques incorrectes

  • "Le résumé ainsi que la présentation complète se trouvent à droite sur cette page."
  • "Cliquez 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.

comment tester

  1. Est-ce que le site est compréhensible sans les couleurs?

    Il y a plusieurs manières de visualiser des pages sans les couleurs:

    • Graybit: sur graybit.com vous pouvez donner une adresse web et visualiser la page en nuances de gris.
    • Firefox: visualisez les pages en mode texte avec la Barre d'outil WAVE pour Firefox.
    • Internet Explorer: supprimez les couleurs en sélectionnant "greyscale" dans le menu "couleurs" du Web Accessibility Toolbar .

    Le site reste compréhensible sans les couleurs?

    • Oui: passez au point suivant.
    • Non : Faites les modifications nécessaires.
  2. Est-ce que le texte comporte des instructions qui font référence à des caractéristiques visuelles (telles que 'Cliquez le lien/bouton rouge/bleu/vert à gauche/droite...') ou sonores?

    • Oui: Faites les modifications nécessaires dans le texte
    • Non : Passez au point suivant
  3. Il est recommandé de vérifier la lisibilité du texte. Les contrastes sont-ils suffisants (au-dessus de 4,5:1)?

    Utilisez le Colour Contrast Analyser, sélectionnez la couleur du texte et de l'arrière-plan. Regardez les résultats (luminosity). Le contraste est-il supérieur à 4,5:1?

    • Oui: Modifiez les couleurs pour obtenir un contraste correct.
    • Non : La page/le site est conforme à cette directive.