Les champs identiques — comme « Email » ou « Téléphone » — portent-ils le même intitulé sur tous les formulaires de votre site ?
Critère officiel 11.3 — Dans chaque formulaire, chaque étiquette associée à un champ de formulaire ayant la même fonction et répétée plusieurs fois dans une même page ou dans un ensemble de pages est-elle cohérente ?
Pourquoi c'est important
Si le champ d'adresse email s'appelle « Email » sur un formulaire et « Courriel » sur un autre, les logiciels de complétion automatique ne reconnaissent pas le même champ d'une page à l'autre. Les personnes habituées à un intitulé sont désorientées quand elles ne le retrouvent pas.
Exemples concrets
Ce qui est conforme
Sur tout le site, le champ d'adresse email s'appelle systématiquement « Adresse email », le champ de téléphone « Numéro de téléphone ». Les utilisateurs retrouvent leurs repères sur chaque formulaire, et les logiciels d'assistance associent automatiquement les bons champs.
Ce qui pose problème
Le formulaire de contact dit « Votre email ». Le formulaire d'inscription dit « Adresse mail ». Le formulaire de téléservices dit « Courriel ». Un utilisateur qui utilise la complétion automatique de son navigateur ne peut pas remplir les formulaires en un clic — chaque formulaire utilise des noms différents.
Comment agir
Établissez avec votre prestataire une liste des noms de champs standard à utiliser sur tout le site. Un document d'une page suffit : liste les champs communs (email, téléphone, nom, prénom, adresse...) et leur intitulé officiel. La cohérence s'obtient à la conception, pas à la correction.
Règles clés
- Distinguer les libellés : 'Téléphone principal', 'Téléphone secondaire'.
- Utiliser fieldset/legend pour contextualiser des groupes de champs similaires.
- Si le libellé visible est court, compléter avec aria-describedby.
Erreurs fréquentes
- Deux champs 'Téléphone' (principal et secondaire) avec le même label
- Deux champs 'Adresse' dans le même formulaire sans distinction
- Champs groupés par section visuelle sans fieldset/legend
Exemples de code
libellés identiques pour champs distincts
✗ Non conforme<label for="tel1">Téléphone</label>
<input id="tel1" type="tel">
<label for="tel2">Téléphone</label>
<input id="tel2" type="tel">Deux champs 'Téléphone' indiscernables dans la liste des champs du lecteur d'écran.
libellés distincts
✓ Conforme<label for="tel-principal">
Téléphone principal
</label>
<input id="tel-principal" type="tel"
autocomplete="tel">
<label for="tel-secondaire">
Téléphone secondaire (optionnel)
</label>
<input id="tel-secondaire" type="tel">Libellés distincts. L'utilisateur sait quelle donnée saisir dans chaque champ.
Référence WCAG : 3.2.4