Composant accessible · outil gratuit
Champ de formulaire accessible : étiquette, aide, erreur et autocomplete
Un champ accessible a une étiquette visible reliée par <label for>, une aide et un message d'erreur reliés par aria-describedby (donc lus en arrivant sur le champ), une mention « obligatoire » en toutes lettres et, pour une donnée sur la personne, l'attribut autocomplete qui permet le remplissage automatique.
Critères RGAA 4.1.2 : 11.1, 11.2, 11.10, 11.11, 11.13, 3.1 · WCAG 2.2 : 1.3.1, 1.3.5, 3.3.1, 3.3.2, 3.3.3, 4.1.2 · mis à jour le .
Générer et vérifier le composant
Réglez le composant : le code se met à jour, l'aperçu fonctionne pour de vrai, et chaque version est vérifiée en direct par les contrôles du composant, un test de comportement et axe-core. « Introduire une erreur fréquente » montre ce que chaque contrôle détecte ; « Tester mon code » vérifie le vôtre.
Réglages
Obligatoire (critère 11.13) quand le champ demande une donnée sur la personne.
Pour voir le contrôle qui la détecte (les erreurs de comportement apparaissent avec « Tester le comportement »).
<div class="champ champ-erreur">
<label for="adresse-e-mail">Adresse e-mail<span class="obligatoire"> (obligatoire)</span></label>
<p class="aide" id="adresse-e-mail-aide">Exemple : nom@domaine.fr</p>
<input type="email" id="adresse-e-mail" name="adresse-e-mail" autocomplete="email" required aria-describedby="adresse-e-mail-aide adresse-e-mail-erreur" aria-invalid="true">
<p class="erreur" id="adresse-e-mail-erreur">Erreur : l'adresse doit contenir un @, par exemple nom@domaine.fr</p>
</div>Aperçu réel (utilisable à la souris et au clavier)
Vérification en direct
Qui est gêné quand le composant est mal fait
- Personnes aveugles : sans étiquette reliée, elles entendent « zone d'édition » sans savoir quoi saisir ; sans erreur reliée, elles ne savent pas pourquoi le formulaire est refusé.
- Personnes ayant des troubles cognitifs ou de mémoire : un texte indicatif qui disparaît à la saisie leur fait oublier ce qu'on leur demandait ; autocomplete leur évite de retaper leurs données.
- Personnes ayant des troubles moteurs : chaque frappe coûte : le remplissage automatique réduit l'effort.
- Personnes daltoniennes : une erreur signalée par une bordure rouge seule ne se voit pas : le message doit être écrit.
Le comportement attendu
Au clavier
| Touche ou moment | Ce qui doit se passer |
|---|---|
| Tab | Atteint le champ ; le lecteur d'écran annonce l'étiquette, « obligatoire », l'aide et, s'il y en a un, le message d'erreur. |
| Saisie | Avec autocomplete, le navigateur propose les données déjà enregistrées : moins de frappe, moins d'erreurs. |
Avec un lecteur d'écran
- Le lecteur d'écran annonce l'étiquette, le type de champ, « obligatoire » (attribut required) et « invalide » (aria-invalid="true").
- La description reliée par aria-describedby (aide, puis erreur) est lue après, selon les réglages du lecteur.
- Un texte indicatif (placeholder) n'est pas une étiquette : il disparaît à la saisie et n'est pas toujours lu.
Les erreurs les plus fréquentes
- Un placeholder à la place de l'étiquette. Il disparaît dès la saisie, il est souvent peu contrasté et n'est pas une étiquette fiable.
- Une étiquette non reliée. Un <label> sans for, ou un for qui ne correspond à aucun id : le clic sur l'étiquette ne fait rien et le champ n'a pas de nom.
- Une aide ou une erreur non reliée. Visible à l'écran, mais jamais lue en arrivant sur le champ : il manque aria-describedby.
- Une erreur signalée par la couleur. Une bordure rouge sans texte : invisible pour une partie du public (critère 3.1).
- Un autocomplete absent ou inventé. autocomplete="mail" ou "adresse" n'existent pas : le navigateur ne propose rien.
- Un astérisque jamais expliqué. « * » sans phrase « Les champs marqués d'un astérisque sont obligatoires » en tête de formulaire.
Tester soi-même
- Cliquez sur l'étiquette : le curseur doit aller dans le champ.
- Avec un lecteur d'écran, arrivez sur le champ avec Tab : l'étiquette, « obligatoire » et l'aide doivent être annoncées.
- Provoquez une erreur : le message doit apparaître en texte, être annoncé en revenant sur le champ, et dire comment corriger.
- Pour un champ sur la personne, vérifiez que le navigateur propose vos données enregistrées.
- Relisez l'étiquette et le message : ils doivent être compréhensibles hors contexte (jugement humain, critères 11.2 et 11.11).
Ce qu'Accessia détecte dans un audit
Dans un audit, Accessia signale automatiquement les champs sans nom accessible (critère 11.1), en analyse du code comme en rendu navigateur, et relève l'étiquette et l'autocomplete de chaque champ dans les preuves du rapport : la revue express par l'IA juge ensuite la pertinence des étiquettes (11.2). Avec le rendu navigateur, une valeur autocomplete invalide est signalée au critère 11.13 ; la pertinence des messages d'erreur et l'oubli d'autocomplete sur un champ personnel se vérifient à la main.
Auditer une page gratuitement, ou vérifiez ce composant directement dans votre éditeur de code avec le serveur MCP d'Accessia.
Critères RGAA concernés
- Critère 11.1 : Étiquette des champs de formulaire
- Critère 11.2 : Pertinence des étiquettes
- Critère 11.10 : Contrôle de saisie et erreurs
- Critère 11.11 : Suggestions de correction des erreurs
- Critère 11.13 : Remplissage automatique des champs
- Critère 3.1 : Information pas seulement par la couleur
Questions fréquentes
aria-label suffit-il à la place d'un <label> ?
Il donne un nom au champ, mais invisible : les personnes qui voient l'écran n'ont alors aucune étiquette. Préférez un <label> visible.
Faut-il mettre l'aide avant ou après le champ ?
Avant ou juste après, mais toujours reliée par aria-describedby : elle est alors lue en arrivant sur le champ, où qu'elle soit.
required ou aria-required ?
required sur un champ natif : il indique « obligatoire » aux lecteurs d'écran et active la vérification du navigateur. aria-required sert aux composants sur mesure. Dans les deux cas, la mention visible reste nécessaire.
Quand autocomplete est-il obligatoire ?
Le critère 11.13 l'exige pour les champs qui demandent une donnée sur la personne qui remplit le formulaire (nom, e-mail, téléphone, adresse…), avec une valeur de la liste officielle.
Ce code rend-il mon formulaire conforme ?
Il rend ce champ conforme aux contrôles affichés. La pertinence des étiquettes et des messages, et le reste du formulaire, restent à vérifier.