Les champs de vos formulaires sont-ils configurés pour que le navigateur puisse proposer de les remplir automatiquement — nom, email, adresse, date de naissance ?
Critère officiel 11.13 — La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ?
Pourquoi c'est important
Les personnes âgées, les personnes avec des troubles moteurs ou cognitifs bénéficient énormément de la complétion automatique des formulaires par leur navigateur. Si les champs ne sont pas correctement déclarés, le navigateur ne reconnaît pas ce qu'il doit proposer — et l'utilisateur doit tout saisir manuellement à chaque démarche.
Exemples concrets
Ce qui est conforme
Le formulaire de demande d'acte d'état civil a ses champs nom, prénom, date de naissance et adresse configurés pour l'autocomplétion. Le navigateur propose de les remplir automatiquement à partir des informations enregistrées. L'usager valide en un clic — particulièrement précieux pour une personne aux doigts moins agiles.
Ce qui pose problème
Le même formulaire désactive volontairement l'autocomplétion « pour des raisons de sécurité ». L'usager doit saisir laborieusement ses informations à chaque nouvelle demande d'acte, même s'il les a déjà saisies la semaine précédente sur le même site.
Comment agir
Demandez à votre prestataire d'activer l'autocomplétion sur tous les champs qui concernent les informations personnelles : prénom, nom, email, téléphone, adresse, date de naissance. Les attributs techniques correspondants (`autocomplete="given-name"`, `autocomplete="email"`, etc.) sont standardisés et simples à implémenter. Évitez de désactiver l'autocomplétion — sauf pour les champs réellement sensibles comme les mots de passe à usage unique.
Règles clés
- L'attribut autocomplete est requis sur tous les champs collectant des informations personnelles.
- Utiliser les valeurs de la liste WCAG — pas des valeurs inventées.
- Ne jamais mettre autocomplete='off' sur des champs personnels sauf raison sécuritaire documentée.
- Les champs de mot de passe doivent avoir autocomplete='current-password' ou 'new-password' selon le contexte.
- Un champ 'Nom complet' peut avoir autocomplete='name'. Si séparé : 'given-name' + 'family-name'.
Erreurs fréquentes
- autocomplete='off' sur des champs personnels — désactive délibérément la complétion automatique
- autocomplete='on' sans valeur sémantique — le navigateur devine, parfois incorrectement
- Absence totale d'attribut autocomplete sur les champs d'identité, d'adresse, de paiement
- Valeurs incorrectes : autocomplete='firstname' au lieu de 'given-name'
- Champs de nom en un seul champ 'Nom complet' sans autocomplete='name'
Exemples de code
formulaire sans autocomplete sémantique
✗ Non conforme<form>
<label for="prenom">Prénom</label>
<input type="text" id="prenom" name="prenom">
<label for="nom">Nom</label>
<input type="text" id="nom" name="nom">
<label for="email">E-mail</label>
<input type="email" id="email" name="email">
<label for="tel">Téléphone</label>
<input type="tel" id="tel" name="tel">
</form>Aucun attribut autocomplete. Le navigateur peut deviner mais les valeurs proposées seront incorrectes ou absentes selon les navigateurs et gestionnaires de mots de passe.
formulaire avec autocomplete sémantique
✓ Conforme<form>
<label for="prenom">Prénom</label>
<input type="text" id="prenom" name="prenom"
autocomplete="given-name">
<label for="nom">Nom</label>
<input type="text" id="nom" name="nom"
autocomplete="family-name">
<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email"
autocomplete="email">
<label for="tel">Téléphone</label>
<input type="tel" id="tel" name="tel"
autocomplete="tel">
</form>Chaque champ a sa valeur autocomplete sémantique. Le navigateur peut pré-remplir avec les données stockées dans les préférences utilisateur ou le gestionnaire de mots de passe.
formulaire d'adresse complet
✓ Conforme<fieldset>
<legend>Adresse de livraison</legend>
<label for="adresse">Adresse</label>
<input type="text" id="adresse"
autocomplete="street-address">
<label for="ville">Ville</label>
<input type="text" id="ville"
autocomplete="address-level2">
<label for="cp">Code postal</label>
<input type="text" id="cp"
autocomplete="postal-code">
<label for="pays">Pays</label>
<select id="pays" autocomplete="country-name">
<option value="FR">France</option>
<option value="BE">Belgique</option>
</select>
</fieldset>Valeurs autocomplete pour une adresse complète. Le navigateur peut pré-remplir l'intégralité du formulaire d'adresse depuis les données stockées.
Référence WCAG : 1.3.5