Autocomplete et saisie facilitée

L’attribut autocomplete est l’un des critères RGAA les plus faciles à corriger, une ligne de code suffit, et l’un de ceux dont le bénéfice est le plus immédiatement visible pour tous les utilisateurs, pas seulement les personnes en situation de handicap.

Ce que fait autocomplete

autocomplete indique au navigateur la nature des données attendues dans un champ. Avec cette information, le navigateur peut proposer automatiquement les données déjà connues de l’utilisateur (nom, adresse, email, numéro de téléphone) sans qu’il ait à les ressaisir.

<input type="text" name="prenom"
       autocomplete="given-name">

Avec cette valeur, le navigateur sait que ce champ attend le prénom de l’utilisateur et peut le pré-remplir depuis son profil ou son historique.

Ce n’est pas la même chose que l’autocomplétion des navigateurs basée sur l’historique de saisie. L’autocomplétion classique propose des valeurs déjà saisies dans ce champ spécifique. autocomplete avec des valeurs normatives propose des données personnelles de l’utilisateur, quel que soit le site.

Qui bénéficie de autocomplete

Les utilisateurs avec des limitations motrices : saisir un formulaire complet avec une mobilité réduite prend plus de temps qu’avec une mobilité normale. Chaque champ pré-rempli est une réduction de charge physique et cognitive significative.

Les utilisateurs avec des troubles cognitifs : mémoriser son IBAN, son numéro de sécurité sociale, son code postal sont autant d’informations que certains utilisateurs ne peuvent pas retenir facilement. autocomplete leur permet de se concentrer sur la démarche, pas sur la mémorisation.

Les utilisateurs de lecteurs d’écran : naviguer dans un long formulaire pour saisir des informations déjà disponibles est fastidieux. autocomplete réduit cette charge.

Tout le monde : le gain de temps et de confort s’applique à tous. C’est l’une des rares corrections d’accessibilité qui améliore l’expérience de tous les utilisateurs sans exception.

Les valeurs normatives WCAG

WCAG 1.3.5 liste les valeurs autocomplete reconnues, organisées par catégorie. Ce sont ces valeurs que le critère 11.13 du RGAA exige. Pas des valeurs inventées, mais celles de la liste normative.

Identité

Contact

Adresse

Authentification

Paiement

Dates et naissance

Application pratique

Formulaire de contact

<form method="post" autocomplete="on">
  <label for="prenom">Prénom</label>
  <input type="text" id="prenom" name="prenom"
         autocomplete="given-name" required>

  <label for="nom">Nom</label>
  <input type="text" id="nom" name="nom"
         autocomplete="family-name" required>

  <label for="email">Adresse email</label>
  <input type="email" id="email" name="email"
         autocomplete="email" required>

  <label for="tel">Téléphone</label>
  <input type="tel" id="tel" name="tel"
         autocomplete="tel">

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Envoyer le message</button>
</form>

Formulaire d’inscription à un événement

<form method="post">

  <fieldset>
    <legend>Vos coordonnées</legend>

    <label for="civilite">Civilité</label>
    <select id="civilite" name="civilite" autocomplete="honorific-prefix">
      <option value="">-- Choisir --</option>
      <option value="M">M.</option>
      <option value="Mme">Mme</option>
    </select>

    <label for="nom-complet">Nom et prénom</label>
    <input type="text" id="nom-complet" name="nom-complet"
           autocomplete="name" required>

    <label for="email-inscription">Email de confirmation</label>
    <input type="email" id="email-inscription" name="email"
           autocomplete="email" required>
  </fieldset>

  <fieldset>
    <legend>Adresse postale pour l'envoi du badge</legend>

    <label for="adresse">Rue</label>
    <input type="text" id="adresse" name="adresse"
           autocomplete="street-address">

    <label for="code-postal">Code postal</label>
    <input type="text" id="code-postal" name="cp"
           autocomplete="postal-code" inputmode="numeric">

    <label for="ville">Ville</label>
    <input type="text" id="ville" name="ville"
           autocomplete="address-level2">
  </fieldset>

</form>

Formulaire de connexion

<label for="identifiant">Identifiant</label>
<input type="text" id="identifiant" name="identifiant"
       autocomplete="username">

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

autocomplete="current-password" déclenche l’affichage du trousseau de mots de passe sur iOS et Android, une aide directe pour tous les utilisateurs, et particulièrement pour ceux qui ne peuvent pas taper facilement des mots de passe complexes.

autocomplete="off" : quand le désactiver

Il est tentant de mettre autocomplete="off" sur les champs sensibles pour des raisons de sécurité, notamment les champs de mot de passe ou de numéro de carte bancaire.

C’est une mauvaise pratique pour deux raisons :

1. Les navigateurs modernes ignorent autocomplete="off" sur les champs de mot de passe, ils proposent le gestionnaire de mots de passe de toute façon.

2. Désactiver l’autocomplete pénalise les utilisateurs qui en ont le plus besoin, ceux qui ne peuvent pas retaper facilement leur mot de passe complexe ou leur numéro de carte.

La seule situation légitime pour autocomplete="off" : des champs dont la valeur ne doit jamais être mémorisée parce qu’elle change à chaque usage, comme un un OTP (code à usage unique), un code de vérification, un CAPTCHA.

<!-- ✓ autocomplete="off" justifié -->
<input type="text" name="otp"
       autocomplete="off"
       inputmode="numeric">

Ce que le RGAA exige

Critère 11.13 : Dans chaque formulaire, chaque champ dont la nature est définie dans la liste des types d’entrées autorisés par les WCAG dispose-t-il d’un attribut autocomplete approprié ?

La liste de référence est celle de WCAG SC 1.3.5 Input Purpose. Si un champ collecte un type d’information listé (nom, email, adresse, téléphone, mot de passe…), il doit avoir la valeur autocomplete correspondante.

Ce critère est en NC sur la majorité des formulaires non configurés. Sur WordPress,Contact Form 7, WPForms et Ninja Forms par exemple, génèrent des champs sans autocomplete par défaut. C’est une correction systématique à appliquer.