Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →

Barrierefreiheit

Comment un site web affiche-t-il correctement les erreurs de formulaire ?

Un site web affiche correctement les erreurs de formulaire en nommant le champ affecté et en décrivant l'erreur en mots : « Veuillez entrer votre adresse e-mail. » Un cadre rouge seul ne suffit pas — les visiteurs aveugles ne le voient pas, les visiteurs daltoniens l'oublient. Le critère WCAG 3.3.1 exige que les erreurs d'entrée détectées soient automatiquement découvertes et communiquées au visiteur sous forme de texte.

Un cadre rouge seul laisse les visiteurs deviner

Imaginez un formulaire de contact qui revient avec le message « Veuillez vérifier vos entrées » — c'est tout ce qui est écrit. Un visiteur qui voit va chercher des cadres rouges. Un visiteur aveugle n'a même pas cette chance : son lecteur d'écran lit les textes à haute voix, pas les couleurs. Il parcourt chaque champ à nouveau et devine où est le problème. Beaucoup abandonnent à ce moment — et vous perdez une demande ou une commande. Un bon message d'erreur dit trois choses : quel champ est affecté, ce qui est erroné, et idéalement comment c'est correct. De plus, le message doit être techniquement lié au champ, de sorte que les lecteurs d'écran l'annoncent au champ lui-même.

Comment le service de contrôle mesure la détection des erreurs

Le service de contrôle teste votre formulaire dans un vrai navigateur avec une tentative contrôlée : il trouve un formulaire avec des champs obligatoires et l'envoie intentionnellement vide. Ensuite, il observe la réaction. Si les champs obligatoires sont marqués comme erronés et si la description d'erreur est techniquement liée aux champs, le critère est considéré comme respecté — le rapport indique le nombre de champs correctement nommés. Les barres de recherche pures et les formulaires sans champs obligatoires sont intentionnellement omis de la mesure pour ne rien déclencher involontairement sur votre site ; de tels cas sont listés comme points de vérification manuels dans le rapport. Au standard Or, une personne vérifie en plus si les textes d'erreur sont clairement formulés.

Beispiele

Fehler ohne Ort und Text

Verstoß

<p class="rot">Bitte Eingaben prüfen.</p>
<input name="iban">

Erfüllt

<label for="iban">IBAN</label>
<input id="iban" name="iban" aria-invalid="true" aria-describedby="iban-fehler">
<p id="iban-fehler">IBAN: 20 Zeichen erwartet, 18 eingegeben.</p>

Die Meldung nennt das Feld und den Fehler und ist mit dem Feld verbunden, damit das Vorleseprogramm sie beim Feld ansagt.

Envoyez intentionnellement votre formulaire de contact vide et lisez le message d'erreur avec les yeux d'un étranger.
Formulez chaque message d'erreur selon le modèle : nom du champ, problème, solution — « Adresse e-mail : Veuillez entrer une adresse avec un symbole @. »
Demandez à votre agence de lier techniquement les messages d'erreur au champ respectif, de sorte que les lecteurs d'écran les annoncent.
Ne vous fiez jamais à la seule couleur — chaque cadre rouge a besoin d'un texte explicatif à côté.

Deutsche Fassung dieser Seite

FAQ

Qu'est-ce qu'un message d'erreur accessible dans un formulaire ?

Un message d'erreur accessible nomme en texte le champ affecté et le problème, par exemple « Numéro de téléphone : Veuillez entrer uniquement des chiffres ». Il est techniquement lié au champ, de sorte que les lecteurs d'écran l'annoncent directement au champ. La couleur peut marquer en plus, mais elle ne transporte jamais seule les informations — un cadre rouge sans texte reste invisible pour les visiteurs aveugles.

Un cadre rouge suffit-il autour du champ erroné ?

Un cadre rouge seul manque le critère 3.3.1. Les visiteurs aveugles ne perçoivent pas du tout les couleurs, et de nombreuses personnes daltoniennes distinguent à peine le rouge du vert ou du gris. Le cadre peut rester comme signal supplémentaire, mais l'information réelle — quel champ, quel erreur — doit apparaître sous forme de texte et techniquement attachée au champ.

Comment le service de contrôle teste-t-il automatiquement les erreurs de formulaire ?

Le noyau de mesure envoie un formulaire avec des champs obligatoires intentionnellement vides dans un vrai navigateur et vérifie si les champs sont marqués comme erronés et accompagnés d'une description d'erreur. Les barres de recherche et les formulaires sans champs obligatoires sont intentionnellement laissés seuls et signalés comme un point de vérification manuel — la mesure ne déclenche rien involontairement sur votre site.