Les informations transmises par la couleur, la forme ou la position sont-elles aussi exprimées par un texte explicite ?
Critère officiel 10.9 — Dans chaque page web, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?
Pourquoi c'est important
Les personnes daltoniennes, aveugles ou utilisant un affichage en niveaux de gris ne perçoivent pas les indications purement visuelles. Une instruction comme « les documents en rouge sont obligatoires » est totalement opaque pour elles : elles voient tous les documents identiques et ne peuvent pas savoir lesquels sont requis.
Exemples concrets
Ce qui est conforme
Le tableau des pièces à fournir pour une carte d'identité signale les documents obligatoires avec le texte « (obligatoire) » à côté de chaque item — pas uniquement une couleur rouge. Un utilisateur daltonien ou aveugle reçoit l'information sans ambiguïté.
Ce qui pose problème
La notice d'instruction précise : « Les documents marqués en rouge sont obligatoires. » Une personne daltonienne voit tous les documents dans la même teinte et ne peut pas distinguer les obligatoires des optionnels. Une personne aveugle n'entend pas de distinction.
Comment agir
Vérifiez chaque tableau, formulaire ou instruction qui utilise la couleur, la position (« le bouton à droite ») ou la forme pour transmettre une information essentielle. Ajoutez toujours un texte explicite en complément : « (obligatoire) », « (nouveau) », « (étape 2 sur 4) ». L'information doit être compréhensible même si la mise en forme est invisible.
Règles clés
- Identifier les éléments par leur intitulé ou fonction, pas leur apparence.
- Utiliser des noms d'éléments : 'le bouton Valider', 'le champ Adresse e-mail'.
- Les instructions doivent être compréhensibles sans voir la page.
Erreurs fréquentes
- Instructions : 'Cliquez sur le bouton rond' ou 'Appuyez sur le grand bouton vert'
- Erreurs de formulaire identifiées uniquement par 'les champs encadrés en rouge'
Exemples de code
instruction par forme
✗ Non conforme<p>Pour soumettre, cliquez sur
le grand bouton bleu en bas de page.</p>'Grand bouton bleu en bas' est une instruction purement visuelle — inutile pour un utilisateur aveugle.
instruction par intitulé
✓ Conforme<p>Pour soumettre, cliquez sur
le bouton « Envoyer ma demande ».</p>L'intitulé identifie le bouton indépendamment de son apparence ou sa position.
Référence WCAG : 1.3.3, 1.4.1