- Introduction - cas utilisateur
- Synthèse
- Informations par la couleur
- Informations par la forme, taille ou position
- Voir ailleurs / Ressources
- Critères RGAA
Les informations données par la forme et les informations données par la couleur impactent de nombreux utilisateurs. En premier lieu, les personnes aveugles qui ne peuvent pas voir les couleurs ou les formes, mais également les utilisateurs qui ne voient pas ou ne distinguent pas certaines couleurs ou combinaisons de couleurs. Pour tous ces utilisateurs, une information donnée uniquement par la forme ou la couleur sera ignorée.
- Ne pas donner d'informations uniquement par la couleur.
- Ne pas donner d'informations uniquement par la forme.
- Implémenter des alternatives à la couleur et à la forme qui soient pertinentes.
Le cas le plus courant d'information par la couleur est l'indication de la page active dans le menu de navigation. Dans ce cas, une réparation simple consiste à fournir l'information sous forme textuelle afin qu'un utilisateur qui ne perçoit pas les couleurs (aveugle ou utilisateur ne percevant pas les contrastes) puisse accéder à la même information. Dans le cas du lien actif, on pourra tout simplement ajouter dans le titre du lien une mention sur le modèle : « Accueil - page active ».
Le principe à garder en tête est que toute couleur qui véhicule une information doit être accessible par un autre moyen, notamment un élément textuel.
À noter que l'utilisation d'une information donnée par la forme comme alternative à une information donnée par la couleur sera insuffisante, les utilisateurs aveugles ne voyant ni forme ni couleur.
Les informations données par la forme, la taille ou la position regroupent une grande variété de cas. Il peut s'agir d'indiquer par un effet CSS qu'un contenu est « affiché » ou « masqué », d'indiquer dans un nuage de tags le score de pertinence par la taille des caractères, d'indiquer l'élément actif d'un contenu par un effet CSS comme un triangle inséré en propriété de fond.
Dans ces cas, la réparation la plus simple est pratiquement identique à celle pour les informations données par la couleur : mettre à disposition un équivalent soit avec une image avec une alternative (attribut alt) pertinente, soit à l’aide d’une icône doublée d'un texte alternatif positionné hors écran.
Dans l'extrait de code suivant, la période sélectionnée indiquée par un triangle noir utilise une image (balise <img>) avec une alternative pertinente.
<button><img src="monimage.png" alt="période sélectionnée" />12h à 14h</button>
À noter que l'utilisation d'une information donnée par la couleur comme seule alternative à une information donnée par la forme serait insuffisante. Les utilisateurs aveugles ne voyant ni forme ni couleur.
- 3.1 [A]
- 3.2 [A]
- 10.14 [A]
- 10.15 [A]
- Introduction
- Fiche 1 : Gabarit général
- Fiche 2 : Navigation
- Fiche 3 : Contenus
- Fiche 4 : Tableaux
- Fiche 5 : Liens
- Fiche 6 : Formulaires
- Fiche 7 : Prise de focus
- Fiche 8 : Respecter la distinction fond et forme
- Fiche 9 : Images
- Fiche 10 : Informations par la couleur et la forme
- Fiche 11 : Agrandissement des caractères
- Fiche 12 : Multimédia