Mauvaises pratiques de formulaires à oublier


Cet article est une traduction a posteriori d'un billet d'abord publié en anglais, parfois des mois en arrière, mais que je tiens à traduire.

C’est assez choquant de voir à quel point certains formulaires sont inaccessibles, que l’on ait des handicaps ou non.

Permalien pour la section Mais où est passé l’attribut for ? Mais où est passé l’attribut for ?

Les libellés (labels) permettent aux lecteurs d’écran de lire à voix haute ce que les champs (inputs) demandent aux utilisateurs.

Malheureusement, certains sites se cantonnent aux placeholders qui n’ont qu’un intérêt visuel. Les lecteurs d’écran pourraient même dans certains cas s’y perdre en associant automatiquement les textes qui suivent ou précèdent même s’ils n’ont rien à voir.

De plus, les placeholders sont ignorés dès que l’input est dans un état focus.

Ne faites pas ça :

<input placeholder="Entrez votre email" name="email" type="email">

Mais plutôt :

<label for="email">Votre Email</label>
<input id="email" name="email" type="email" required>

Si vous devez absolument cacher les libellés, vous pouvez très bien utiliser une pincée d’HTML et de CSS supplémentaires :

<label for="email"><span class="screen-reader-text">Votre Email</span></label>
<input id="email" placeholder="Entrez votre email" name="email" type="email" required>

Permalien pour la section Oubliez les règles de validation extravagantes Oubliez les règles de validation extravagantes

Certains sites croient la jouer fine avec des modèles (patterns) et des règles de validations directement intégrés dans le HTML :

<label for="last-name">Votre nom</label>
<input id="last-name" name="last_name" type="text" pattern="[a-zA-Z]{4,20}">

Le problème est que certains utilisateurs ne peuvent tout simplement pas utiliser le formulaire avec cette règle.

[a-zA-Z]{4,20} signifie “uniquement des lettres, au moins 4 et maximum 20”. certains utilisateurs devront éditer le HTML dans le navigateur pour valider le formulaire !

Le fait que le HTML soit éditable côté client annule toute sécurité. Les hackers pourront toujours agir dessus et les utilisateurs de bonne foi seront pénalisés.

Il faut absolument éviter ce genre de règles de validation extravagante, que ce soit côté client comme ici, mais aussi côté serveur (ex : dans le PHP).

Permalien pour la section Virez-moi cette CAPTCHA ! Virez-moi cette CAPTCHA !

CAPTCHA signifie “Completely Automated Public Turing test to tell Computers and Humans Apart”. Le test est censé déterminer si l’utlisateur qui envoie le formulaire est un robot spammeur ou un humain.

Il y a divers types de CAPTCHA: des lettres et des chiffres au hasard à recopier, des puzzles simples à résoudre, des opérations arithmétiques de base, et bien d’autres formats.

Cependant, le CAPTCHA c’est tout caca!

C’est vraiment pénible pour l’utlisateur lambda et un calvaire pour l’accessibilité, en particulier les personnes aveugles (même avec une version audio).

Avec les progrès du Machine Learning, ce n’est même plus aussi efficace qu’avant pour stopper les robots spammeurs qui contournent ça en un claquement de doigts.

Permalien pour la section Ne désactivez pas le copier-coller Ne désactivez pas le copier-coller

Beaucoup de sites désactivent le copier-coller dans les champs mot de passe pensant améliorer la protection, mais cela ne fait que diminuer la sécurité des formulaires.

Habituellement, copier des mots de passe est certe souvent autorisé dans le premier champ mot de passe mais pas dans le deuxième champ de confirmation (ex : “confirmez votre mot de passe”).

Il y a pourtant de très bonnes raisons de permettre le copier-coller, par exemple pour l’auto-complétion qui plus sécurisée que taper manuellement. Le désactiver, au contraire, amène les utilisateurs à entrer des mots de passes trop simples, faciles à mémoriser.

De plus, cela empêche les gestionnaires de mots de passe de fonctionner correctement.

Ne faites pas ça SVP.

Permalien pour la section Conclusion Conclusion

La plupart des mauvaises habitudes dans la conception des formulaires semblent assez simples à corriger. Bien souvent, ne pas faire de zèle permet d’éviter les erreurs d’accessibilité grossières.

Les formulaires sont très utiles dès lors qu’ils ne cassent pas les comportements standards et l’accessibilité.

Cette page est aussi disponible dans d'autres langues :