Attribut HTML autocomplete : quelles valeurs utiliser pour les coordonnées personnelles françaises ?

Quand utiliser l’attribut autocomplete ?

En HTML, l’attribut autocomplete permet d’indiquer les champs de formulaire pour lesquels une donnée personnelle de l’utilisateur ou de l’utilisatrice est attendue.

Mais ça, vous le savez déjà si vous lisez notre blog, grâce à la traduction de l’article « Trois attributs pour des formulaires web plus intuitifs » de Jeremy Keith ou à la transcription de la conférence « Et si on laissait les utilisateurs et les utilisatrices personnaliser l’interface ? ». 😉

En effet, l’attribut autocomplete permet à certaines technologies d’assistance d’ajouter des indications visuelles (comme une icône de téléphone pour un champ autocomplete="tel") ou de reformuler les intitulés des champs de formulaire.

Cela peut simplifier le remplissage du formulaire à des personnes ayant certains handicaps cognitifs (troubles de l’apprentissage, par exemple) ou neurologiques (infirmité motrice cérébrale, par exemple), pour qui des images ou des termes précis sont plus faciles à comprendre ^[1].

Cet attribut permet aussi à l’agent utilisateur de compléter des champs de formulaire à l’aide des données enregistrées dans le navigateur web, une extension ou une application telle qu’un gestionnaire de mot de passe pour aider les personnes qui auraient des difficultés à saisir du contenu en raison d’un handicap moteur ou d’un trouble cognitif.

En somme, l’attribut autocomplete permet d’alléger la charge cognitive nécessaire au remplissage d’un formulaire, en sollicitant moins la mémoire des utilisateurs et utilisatrices.

Quand ne pas utiliser l’attribut autocomplete ?

Il ne serait pas pertinent d’utiliser l’attribut autocomplete quand vous demandez des données qui ne sont pas propres à l’utilisatrice : par exemple, un lieu qu’elle fréquente, ou bien les coordonnées d’un membre de sa famille.

L’attribut autocomplete est utile uniquement lorsque l’utilisatrice doit saisir ses propres données personnelles.

Comprendre les différentes valeurs de l’attribut autocomplete

Découvrons maintenant les valeurs relatives aux coordonnées personnelles de l’utilisatrice, grâce à des exemples basés sur des adresses postales, des numéros de téléphone et des formulaires de connexion.

Adresses postales

Les adresses postales font partie des données personnelles prises en charge par l’attribut autocomplete. Pourtant, elles n’utilisent pas toutes le même format à l’international. Voyons ensemble comment utiliser les valeurs mises à disposition pour les adresses françaises.

Si vous recueillez l’adresse de l’utilisateur (à l’exception de la localité et du code postal) au moyen d’un champ unique, par exemple au moyen d’une balise <textarea>, vous devez utiliser la valeur street-address ^[2].

Si vous recueillez l’adresse de l’utilisateur au moyen de plusieurs champs, vous disposez de plusieurs valeurs : address-line1, address-line2 et address-line3.

address-line1 est a priori utilisé pour le numéro et la voie tandis que address-line2 et address-line3 sont utilisés pour le complément d’adresse, par exemple le nom du bâtiment dans le cas d’un lotissement.

Aussi, on utilisera soit la valeur street-address, soit les trois valeurs pour les lignes d’adresse, mais non une combinaison des deux.

Pour recueillir le code postal de l’utilisateur, vous devez utiliser la valeur postal-code.

Si vous avez besoin du pays de l’utilisateur, ce sera la valeur country-name.

Et pour la ville ?

Si vous cherchiez une valeur telle que « city », elle n’existe pas. La norme WCAG (en anglais) et la documentation de Mozilla nous permettent d’y voir plus clair à ce sujet.

L’attribut autocomplete propose plusieurs valeurs de « niveau administratif » pour les adresses : address-level1, address-level2, address-level3 et address-level4.

Elles ont des utilisations différentes selon le pays de l’adresse que vous souhaitez saisir. On part du niveau le plus général vers le niveau le plus précis.

En France, nos adresses ne disposent que de deux niveaux administratifs :

• address-level1 correspond donc à la région ou au département ;
• et address-level2 à la commune (ville ou village).

A priori, address-level1 n’est pas utilisé lors d’un envoi postal. Vous n’aurez donc pas nécessairement besoin de demander cette information dans vos formulaires.

Exemples de formulaires d’adresse

Adresse en un seul champ

<div>
    <label for="address1_street">Adresse</label> <textarea id="address1_street" autocomplete="street-address"></textarea>
</div>
<div>
    <label for="address1_postal-code">Code postal</label> <input type="text" id="address1_postal-code" autocomplete="postal-code">
    <label for="address1_city">Ville</label> <input type="text" id="address1_city" autocomplete="address-level2">
</div>

Adresse en deux champs

<div>
    <label for="address2_address-line1">Numéro et voie</label> <input type="text" id="address2_address-line1" autocomplete="address-line1">
</div>
<div>
    <label for="address2_address-line2">Complément d'adresse</label> <input type="text" id="address2_address-line2" autocomplete="address-line2">
</div>
<div>
    <label for="address2_postal-code">Code postal</label> <input type="text" id="address2_postal-code" autocomplete="postal-code">
    <label for="address2_city">Ville</label> <input type="text" id="address2_city" autocomplete="address-level2">
</div>

Numéros de téléphone

L’attribut autocomplete propose plusieurs valeurs pour les numéros de téléphone.

C’est très utile, donc, si vous demandez le numéro de téléphone de l’utilisatrice :

• dans un seul champ de saisie : dans ce cas utilisez la valeur tel ;
• ou même en plusieurs champs si vous décidez de séparer l’indicatif national du reste du numéro de téléphone : dans ce cas utilisez respectivement les valeurs tel-country-code et tel-national ^[4].

D’autres valeurs sont disponibles pour l’attribut autocomplete et permettent de séparer la zone géographique (en théorie le 1 des numéros commençant par 01, le 2 des numéros commençant par 02, etc.) de la partie qui permet d’identifier le numéro de téléphone de la personne, qui contient entre autres une indication sur son département.

En France, les numéros de téléphone sont rarement découpés selon ce schéma et il n’y a plus de localisation géographique selon la zone ou l’indicatif du numéro de téléphone. Il y a donc peu de chances que les valeurs tel-area-code, tel-local, tel-local-prefix, tel-local-suffix et tel-extension vous soient utiles.

Exemples

Numéro de téléphone en un champ unique

<label for="tel1">Votre numéro de téléphone</label> <input type="tel" id="tel1" autocomplete="tel">

Numéro de téléphone en deux champs

<fieldset>
    <legend>Votre numéro de téléphone</legend>
    <div>
        <input type="text" id="tel2_country-code" autocomplete="tel-country-code" title="Code-pays">
        <input type="text" id="tel2_tel-number" autocomplete="tel-national" title="Numéro de téléphone sans le code-pays">
    </div>
</fieldset>

L’attribut autocomplete peut également être utilisé sur des balises <select>. Dans ce cas, l’indicatif national devra être présent soit dans le texte contenu dans l’option, soit dans l’attribut value de la balise <option>, comme dans les exemples ci-après.

Indicatif de pays dans le texte contenu dans l’option

<fieldset>
    <legend>Votre numéro de téléphone</legend>
    <div>
        <select id="tel3_country-code" autocomplete="tel-country-code" title="Code-pays">
            <option>+32</option>
            <option>+33</option>
            <option>+34</option>
        </select>    
        <input type="text" id="tel3_tel-number" autocomplete="tel-national" title="Numéro de téléphone sans le code-pays">
    </div>
</fieldset>

Indicatif de pays dans l’attribut value de la balise <option>

<fieldset>
    <legend>Votre numéro de téléphone</legend>
    <div>
        <select id="tel4_country-code" autocomplete="tel-country-code" title="Code-pays">
            <option value="+358">+358 (FINLANDE)</option>
            <option value="+33">+33 (FRANCE)</option>
            <option value="+241">+241 (GABON)</option>
        </select>
        <input type="text" id="tel4_tel-number" autocomplete="tel-national" title="Numéro de téléphone sans le code-pays">
    </div>
</fieldset>

Formulaires de connexion

Quelle valeur d’autocomplete faut-il choisir lorsque l’utilisatrice a le choix entre plusieurs types de données pour se connecter à une interface ? Par exemple : une adresse e-mail, un numéro de téléphone ou un nom d’utilisatrice.

La question se pose aussi pour les formulaires dont l’identifiant est toujours une adresse e-mail.

Dans tous ces cas, il est préférable d’utiliser la valeur username. Celle-ci permet de sauvegarder une donnée indépendamment de son type (adresse e-mail, numéro de téléphone ou simple texte) ^[6].

Elle permet également aux navigateurs et aux gestionnaires de mot de passe de récupérer la donnée correspondante au site de manière plus simple. En effet, une personne peut avoir plusieurs adresses e-mail, mais utiliser une seule adresse e-mail dédiée au site ou à l’application en question.

Exemples

<div>
    <label for="login1_username">Votre identifiant (adresse e-mail, numéro de téléphone ou nom d’utilisateur)</label> 
    <input type="text" id="login1_username" autocomplete="username">
</div>
<div>
    <label for="login1_password">Votre mot de passe</label> 
    <input type="password" id="login1_password" autocomplete="current-password">
</div>

Dans le cas où le nom d’utilisateur est forcément une adresse e-mail, vous pouvez utiliser la propriété autocomplete="username" avec un type de champ email afin de bénéficier de la vérification côté navigateur comme dans l’exemple ci-dessous :

<div>
    <label for="login2_email">Votre adresse e-mail</label> 
    <input type="email" id="login2_email" autocomplete="username">
</div>
<div>
    <label for="login2_password">Votre mot de passe</label> 
    <input type="password" id="login2_password" autocomplete="current-password">
</div>

Conclusion

L’attribut HTML autocomplete offre un avantage de poids pour améliorer l’accessibilité de vos formulaires web en réduisant la charge cognitive qui pèse sur les personnes handicapées. C’est pour cela qu’il est requis par le RGAA.

En effet, l’attribut autocomplete permet aux aides techniques dont se servent de nombreuses personnes en situation de handicap de remplir automatiquement les champs de formulaire dans lesquels une donnée personnelle est attendue, telles qu’une adresse postale ou un numéro de téléphone.

Pour utiliser l’attribut autocomplete à bon escient, il est important d’utiliser la bonne valeur en tenant compte de plusieurs paramètres :

• le type de donnée attendue par le champ, bien sûr ;
• mais aussi la localisation de la personne en train de remplir le formulaire, car cela influe sur le formatage de ses données personnelles (par exemple : l’indicateur téléphone n’est pas le même dans tous les pays).

Si vous travaillez sur des interfaces à destination d’un autre pays que la France, renseignez-vous sur les normes postales du pays concerné, et prévoyez d’adapter les attributs autocomplete en conséquence.

Outre la mise en œuvre technique de l’attribut autocomplete, réaliser des tests utilisateurs avec des personnes handicapées, en amont de la mise en production du projet concerné, peut permettre de vérifier que le remplissage automatique des champs avec un navigateur ou une technologie d’assistance fonctionne bien comme prévu, et que personne n’est bloqué à cause d’un formulaire.

Ressources

• Critère 11.13 [AA] du RGAA 4
• Finalités de saisie des composants d’interface utilisateur dans les WCAG 2.1
• The difference between the field type, the autofill field name, and the input modality dans la spécification HTML