Un petit billet technique sur une problématique qui a tendance à m’agacer, quand elle est mal pensée (bonjour le PMU), les champs “date de naissance” des formulaires.
En gros, il existe 4 manières pour demander à quelqu’un sa date de naissance :
Je me propose d’essayer d’évaluer ces 4 manières de faire, dans un contexte à la fois desktop et mobile, sur des sites ou dans des apps.
Si vous êtes pressé, vous pouvez directement consulter ma conclusion !
Un champs de texte libre
C’est la méthode la plus simple et la plus basique :
<label for="DateDeNaissance">Date de naissance</label>
<input type="text" id="DateDeNaissance">Pour être le plus complet, on peut ajouter une aide éventuelle pour expliciter le format de date attendu :
<label for="DateDeNaissance">Date de naissance</label>
<input type="text" id="DateDeNaissance" aria-describedby="DateDeNaissance_Aide">
<span class="aide" id="DateDeNaissance_Aide">JJ/MM/AAAA</span>On peut aussi profiter des nouvelles propriétés HTML5 pour contrôler le format :
<label for="DateDeNaissance">Date de naissance</label>
<input type="text" id="DateDeNaissance" aria-describedby="DateDeNaissance_Aide" pattern="\d{1,2}/\d{1,2}/\d{4}">
<span id="DateDeNaissance_Aide">JJ/MM/AAAA</span>Résultat :
Exemple d’implémentation :
Pas de soucis particuliers avec cette méthode, très classique, facile à rendre accessible mais aussi à utiliser, sur desktop comme sur mobile. Seul bémol : sur mobile, il faut opérer à de multiples changements de type de clavier pour saisir nombres et séparateurs.
Un champs de type date
<label for="DateDeNaissance">Date de naissance</label>
<input type="date" name="DateDeNaissance">Rien de particulier à rajouter pour être accessible, ça marche “Out of the box”. C’est d’ailleurs l’exemple choisi par moult blogs pour illustrer le nouveau type de champs date (notamment Alsacreation).
Résultat :
Exemple d’implémentation :
C'est clairement, à mon sens, une solution peu ergonomique car, quand j'essaie de m'authentifier sur un site web, c'est bien plus compliqué de choisir ma date de naissance dans un sélecteur de date que de la saisir dans un champs texte, notamment sur téléphone et sur tablette.
3 champs de texte libres
Pas forcément la plus simple à manipuler pour être accessible ET ergonomique (3 champs = 3 labels) mais on peut s’en sortir :
- avec quelques textes cachés mais restitués aux aides techniques
- avec un peu d'ARIA pour expliciter les relations entre champs
<span id="DateDeNaissance">Date de naissance</span>
<label for="JourDeNaissance" id="JourDeNaissance_label" class="text-hide">Jour</label>
<input type="number" id="JourDeNaissance" aria-labeledby="DateDeNaissance JourDeNaissance_label" placeholder="JJ">
<label for="MoisDeNaissance" id="MoisDeNaissance_label" class="text-hide">Mois</label>
<input type="number" id="MoisDeNaissance" aria-labeledby="DateDeNaissance MoisDeNaissance_label" placeholder="MM">
<label for="AnneeDeNaissance" id="AnneeDeNaissance_label" class="text-hide">Année</label>
<input type="number" id="AnneeDeNaissance" aria-labeledby="DateDeNaissance AnneeDeNaissance_label" placeholder="AAAA">Résultat :
</a>
Exemples d’implémentation :
<
Pas de soucis particuliers avec cette méthode, un peu plus complexe cependant à mettre en œuvre que la méthode du champs de texte unique. Un avantage cependant lors d'une saisie avec un téléphone puisque on passera facilement d'un champs à l'autre sans se poser la question du séparateur à utiliser.
3 listes déroulantes
La mise en œuvre est assez similaire à celle de la solution précédente :
<span id="DateDeNaissance">Date de naissance</span>
<div class="Selects">
<label class="text-hide" id="JourDeNaissance_label" for="JourDeNaissance">Jour</label>
<select id="JourDeNaissance"><option>1</option>...<option>31</option></select>
<label class="text-hide" id="MoisDeNaissance_label" for="MoisDeNaissance">Mois</label>
<select id="MoisDeNaissance"><option>1</option>...<option>12</option></select>
<label class="text-hide" id="AnneeDeNaissance_label" for="AnneeDeNaissance">Année</label>
<select id="AnneeDeNaissance"><option>1940</option>...<option>1994</option></select>
</div>Résultat :
Exemples d’implémentation :
C'est une solution que ne parait pas plus adaptée que la solution du champs date. Pire, elle n'est adaptée ni à la saisie au clavier, ni à la saisie sur téléphone ou sur tablette.
Mise à jour du 3 août 2014 : le PMU vient de mettre à jour son app, notamment pour modifier ces champs de saisie de la date de naissance ! Je ne devais pas être le seul à pester ;) Maintenant, ce sont 3 champs de texte libres qui s'enchaînent et c'est bien mieux. Merci le PMU !</div>
En conclusion : Restons simple
- Champs texte unique : simple à mettre en œuvre, accessible, ergonomique
- Champs date : simple à mettre en œuvre, accessible, peu ergonomique avec un clavier, pas ergonomique du tout avec un téléphone ou une tablette
- 3 champs textes : un peu plus complexe à mettre en œuvre et à rendre accessible, ergonomique sur ordinateur et sur mobile
- 3 listes déroulantes : également plus complexe à mettre en œuvre et à rendre accessible, pas ergonomique, quelque que soit le contexte
Les méthodes les plus ergonomiques, un champs texte unique et 3 champs textes, sont aussi les méthodes les plus simple à mettre en œuvre et à rendre accessible... alors pourquoi faire compliqué ? Globalement, je privilégierai la solution des 3 champs textes, visiblement la plus universelle.
Si quelqu'un du PMU passe par ici... sachez que je vous maudit tous les dimanches de vos choix ergonomiques hasardeux !
Pour finir, un petit lien vers un site du gouvernement britannique qui s'est posé la même question (et qui réponds sensiblement de la même manière) : Asking for a date of birth