Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung
Accessibilité
Pourquoi les messages d'erreur et les liens ont-ils besoin de plus qu'une seule couleur ?
Les messages d'erreur et les liens ont besoin de plus qu'une couleur, car beaucoup de gens ne distinguent les couleurs que partiellement — le daltonisme rouge-vert est la forme la plus fréquente. Un champ obligatoire entouré de rouge sans texte explicatif reste marqué de façon invisible pour ces visiteurs. L'information doit donc être portée doublement : couleur plus texte, symbole ou soulignement.
La couleur comme complément, jamais comme seul porteur
Trois cas quotidiens montrent le problème. Premièrement les formulaires : si un champ mal rempli n'est entouré que de rouge, un visiteur atteint de daltonisme rouge-vert ne trouvera pas l'erreur — complétez par un message textuel comme « Veuillez entrer une adresse e-mail valide ». Deuxièmement les liens dans le texte courant : si un lien se distingue du texte voisin uniquement par sa couleur, beaucoup ne le reconnaissent pas comme lien — le soulignement résout cela. Troisièmement les diagrammes et les indicateurs d'état : « Vert signifie disponible, rouge signifie complet » fonctionne uniquement avec des légendes ou des symboles différents supplémentaires. La couleur reste explicitement permise et utile — elle ne doit jamais être la seule source d'information.
Comment notre noyau de mesure vérifie l'utilisation de la couleur
La vérification automatique avec axe-core détecte un cas partiel typique : les liens dans le texte courant qui se distinguent du texte voisin uniquement par la couleur — sans soulignement ou contraste suffisant. Ces cas s'introduisent comme constat dans le rapport. La plus grande partie du critère échappe à la machine : si un diagramme est expliqué uniquement par les couleurs ou si un message d'erreur a, en plus de la bordure rouge, aussi un texte, cela exige la compréhension du contenu. Selon notre principe, un passage inaperçu ne prouve donc jamais automatiquement — au standard or un vérificateur parcourt les formulaires, les diagrammes et les indicateurs d'état et porte un jugement.
Exemples
Erreur marquée uniquement en rouge
<label>E-Mail <input class="fehler" style="border-color:red"></label><label for="email">E-Mail</label>
<input id="email" aria-describedby="email-fehler" aria-invalid="true">
<p id="email-fehler">Bitte eine E-Mail-Adresse mit @ eingeben.</p>Le rouge seul ne voit pas les personnes avec des défauts de couleur et des programmes de lecture. Le texte mentionne l'erreur.
Lien dans le texte de flux seulement reconnaissable par la couleur
a { color: #2a6bd6; text-decoration: none; }a { color: #2a6bd6; text-decoration: underline; }Le soulignement rend le lien reconnaissable même sans perception de couleur.
- Vérifiez vos formulaires : chaque marquage d'erreur a besoin, à côté de la couleur, d'un texte explicatif sur le champ concerné.
- Laissez les liens dans le texte courant soulignés — la couleur seule les rend invisibles pour beaucoup de visiteurs.
- Adjoignez aux diagrammes et aux indicateurs d'état des légendes ou des symboles en plus du codage par couleur.
- Regardez votre page une fois en niveaux de gris — chaque écran et beaucoup de téléphones peuvent le faire — et vérifiez que toute l'information reste.
- Marquez les champs obligatoires avec le mot « Champ obligatoire » ou un astérisque expliqué, jamais uniquement par la couleur.
