Aller au contenu principal
Mynto
AccessibiliteRGAA 11.13Niveau AAFormulaires

Attribut autocomplete absent sur les champs de formulaire

Les champs qui collectent des informations personnelles identifiables (nom, e-mail, adresse, téléphone, mot de passe) doivent porter un attribut `autocomplete` avec la valeur correspondant à leur finalité. C'est le critère RGAA 11.13, niveau AA. Sans cet attribut, le pré-remplissage automatique ne fonctionne pas et les utilisateurs de technologies d'assistance ne peuvent pas déléguer la saisie à leur gestionnaire de mots de passe ou à leur navigateur.

C'est quoi

L'attribut autocomplete sur un champ de formulaire indique au navigateur et aux technologies d'assistance la finalité du champ : est-ce un champ pour le prénom, l'adresse e-mail, le numéro de téléphone, le mot de passe ? Cette information permet trois choses :

  • Le navigateur propose des valeurs enregistrées pour pré-remplir le champ.
  • Le gestionnaire de mots de passe identifie les champs de connexion et peut remplir automatiquement l'identifiant et le mot de passe.
  • Les technologies d'assistance et les outils d'adaptation personnalisée peuvent adapter la saisie aux besoins de l'utilisateur. Les valeurs d'autocomplete sont définies par la spécification HTML (WHATWG) et référencées par WCAG 1.3.5 dans la liste "Input Purposes for User Interface Components". Les principales : name, given-name, family-name, email, tel, street-address, postal-code, country-name, username, current-password, new-password, bday.

Qui est touché

  • Les personnes avec des troubles moteurs : remplir un formulaire est difficile. Le pré-remplissage automatique leur évite de saisir les mêmes informations à chaque fois.
  • Les personnes dyslexiques ou avec des troubles cognitifs : l'autocomplétion réduit la charge cognitive et les risques d'erreur de saisie.
  • Les personnes aveugles utilisant un lecteur d'écran et un gestionnaire de mots de passe : sans autocomplete, leur outil ne peut pas détecter ni remplir les champs de connexion.

Impact business

Sans autocomplete, l'utilisateur doit saisir manuellement ses informations à chaque fois. Pour une personne avec des troubles moteurs, cela représente une friction significative qui peut l'amener à abandonner le formulaire.

L'attribut autocomplete est aussi une mesure de protection contre certaines attaques de phishing : les navigateurs alertent quand un site désactive l'autocomplétion sur des champs sensibles (mot de passe, numéro de carte).

Sources des chiffres

Comment le détecter

  • Audit Mynto : le scan détecte les champs personnels sans attribut autocomplete ou avec une valeur non reconnue.
  • Manuel : inspecte les champs de formulaire dans le code source. Cherche les <input> de type text, email, tel, password, date qui collectent des données personnelles et vérifie la présence d'autocomplete.
  • Teste en pratique : remplis un formulaire, recharge la page, reviens au formulaire. Si aucune suggestion ne s'affiche pour les champs d'identité, l'autocomplete est peut-être absent ou désactivé.

Comment corriger

Avant - HTML
<!-- Formulaire de connexion sans autocomplete -->
<form>
  <label for="email">E-mail</label>
  <input type="email" id="email" name="email">

  <label for="password">Mot de passe</label>
  <input type="password" id="password" name="password">

  <button type="submit">Se connecter</button>
</form>
Après - HTML
<!-- Formulaire de connexion avec autocomplete approprié -->
<form>
  <label for="email">E-mail</label>
  <input type="email" id="email" name="email" autocomplete="username">

  <label for="password">Mot de passe</label>
  <input type="password" id="password" name="password" autocomplete="current-password">

  <button type="submit">Se connecter</button>
</form>

Ajoute l'attribut autocomplete avec la valeur appropriée sur chaque champ collectant une information personnelle identifiable.

Valeurs courantes :

  • Nom complet : autocomplete="name"
  • Prénom : autocomplete="given-name"
  • Nom de famille : autocomplete="family-name"
  • E-mail : autocomplete="email"
  • Téléphone : autocomplete="tel"
  • Adresse : autocomplete="street-address"
  • Code postal : autocomplete="postal-code"
  • Identifiant de connexion : autocomplete="username"
  • Mot de passe actuel : autocomplete="current-password"
  • Nouveau mot de passe : autocomplete="new-password"

Sur WordPress, les plugins de formulaire (Contact Form 7, Gravity Forms, WPForms) permettent d'ajouter des attributs HTML personnalisés sur chaque champ. Utilise le champ "Attributs supplémentaires" ou "HTML avancé" pour ajouter autocomplete="email" etc.

Questions fréquentes

Doit-on mettre autocomplete sur tous les champs de formulaire ?

Non, seulement sur les champs dont la finalité peut être identifiée parmi la liste des valeurs définies par le W3C (WCAG 1.3.5 Input Purposes). Les champs spécifiques à l'application (numéro de commande, code de promotion) n'ont pas de valeur autocomplete correspondante.

Peut-on utiliser autocomplete="off" pour désactiver l'autocomplétion ?

Évite autocomplete="off" sur les champs d'identité et de mot de passe. Les navigateurs modernes ignorent souvent cette valeur sur les champs de connexion pour protéger les utilisateurs. De plus, cela viole le critère 11.13 si le champ est censé accepter l'autocomplétion. N'utilise off que pour des champs vraiment dynamiques (codes OTP, données sensibles à usage unique).

La valeur autocomplete doit-elle correspondre au type du champ ?

Pas nécessairement. Un <input type="text"> peut avoir autocomplete="email". Ce qui compte c'est la finalité du champ, pas son type HTML. En revanche, le type HTML doit aussi être adapté : utilise type="email" pour un champ e-mail, type="tel" pour un champ téléphone, etc.

À lire aussi

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.