Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →
Barrierefreiheit
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.
Beispiele
Fehler nur rot markiert
<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>Rot allein sehen Menschen mit Farbfehlsichtigkeit und Vorleseprogramme nicht. Der Text nennt den Fehler.
Link im Fließtext nur durch Farbe erkennbar
a { color: #2a6bd6; text-decoration: none; }a { color: #2a6bd6; text-decoration: underline; }Der Unterstrich macht den Link auch ohne Farbwahrnehmung erkennbar.
- 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.