Tout le monde a déjà eu affaire à des formulaires. Autrefois, plutôt sur papier. Aujourd'hui, ce sont de plus en plus des formulaires numériques, car ils servent à l'interaction de l'utilisateur avec un site web. Que ce soit pour communiquer sur Internet ou pour commander un article, on en trouve partout. La recherche sur Internet, par exemple avec Google, est également concernée. Remplir ces formulaires est plus difficile pour les personnes souffrant de handicaps physiques ou même cognitifs, ainsi que pour les personnes aveugles ou malvoyantes. Pour permettre à tous de participer à la vie publique, ces formulaires doivent être conçus de manière à être accessibles à tous. Mais comment créer des éléments de formulaire accessibles ?
Il existe pour cela différentes techniques. Mais avant de s'intéresser à ces techniques, il convient de connaître les éléments du formulaire. Ceux-ci peuvent en effet être classés en différents types. Il existe entre autres les types suivants
- champs de saisie d'une seule ligne
- zones de saisie à plusieurs lignes
- Listes de sélection
- Boutons radio
- Cases à cocher
- Boutons d'envoi/d'annulation
Étiquetage des champs de formulaire
Pour assurer l'accessibilité des formulaires, les différents contrôles doivent être étiquetés. Ces inscriptions permettent aux technologies d'assistance de reconnaître les fonctions des éléments de commande et de les transmettre à l'utilisateur. Il est important que les étiquettes soient clairement associées aux contrôles, sinon les lecteurs d'écran ne seront pas en mesure d'établir un lien avec les éléments. Par conséquent, les utilisateurs ont des difficultés à comprendre le formulaire. Ils ne peuvent pas reconnaître quelles informations doivent être saisies dans quels champs. Ils ne peuvent donc pas remplir le formulaire correctement et font souvent des erreurs. Les descriptions ne sont toutefois pas toutes étiquetées de la même manière. Ce qui est déterminant, c'est de savoir si elles doivent être visibles par tous ou non. C'est pourquoi le langage de programmation HTML fait la distinction entre l'élément label et les attributs aria. L'élément label est utilisé pour les champs de saisie, les listes de sélection, les boutons radio et les cases à cocher et doit être placé en conséquence. Pour les champs de saisie et les listes de sélection, le label se trouve devant les éléments de contrôle. Pour les boutons radio et les cases à cocher en revanche, ils sont placés après le contrôle. Pour que les labels puissent également être reliés à l'élément correspondant, il faut encore ajouter l'attribut for.
L'attribut aria est utilisé en HTML pour les boutons. Les boutons peuvent par exemple représenter l'envoi ou l'annulation dans un formulaire. Grâce aux attributs aria, les descriptions des éléments respectifs ne sont reconnaissables que par les technologies d'assistance. Ils peuvent donc également être utilisés pour les champs de saisie qui ne doivent être visibles que pour le lecteur d'écran. Il existe de nombreux attributs aria qui sont utilisés pour améliorer l'accessibilité sur Internet. Ils se distinguent toutefois par leur type et leur fonction. Pour l'étiquetage d'un élément, on utilise ce que l'on appelle l'aria-label. Il est bien sûr possible d'utiliser le même label pour plusieurs éléments. Cela est rendu possible par un aria-labelledby.
Champs de saisie à une ou plusieurs lignes
Les champs de saisie font partie des éléments les plus fréquemment utilisés dans les formulaires. Ils peuvent comporter une ou plusieurs lignes. Les champs sur une seule ligne sont utilisés pour des requêtes courtes, par exemple pour le nom d'une personne, une adresse e-mail, une rue ou une localité.
Ils sont créés en HTML à l'aide de la balise input et de l'attribut type.
En outre, il est possible d'ajouter d'autres attributs qui définissent par exemple la longueur des lignes.
Les champs multilignes sont généralement utilisés pour les grandes zones de texte, comme les messages textuels. Elles sont alors créées à l'aide de la balise textarea. Ici aussi, le développeur peut définir le nombre de lignes et la longueur des lignes. Toutefois, pour que ces champs soient accessibles sans barrière, il faut encore ajouter la balise label. Il n'est toutefois pas possible d'établir un lien entre le label et les éléments si ceux-ci ne sont pas clairement attribués. Ceux-ci doivent alors être reliés entre eux via l'attribut for et l'attribut id. Dans l'exemple HTML ci-dessous, des labels simples sont implémentés dans de tels champs de saisie.
<label for=“vorname“>Ihr Vorname: </label>
<input type“text“ name=“vorname“ id=“vorname“ />
<br />
<label for=“nachricht“>Ihre Nachricht: </label>
<textarea name=“nachricht“ id=“nachricht“> </textarea>
Ici, on crée d'abord un champ de saisie d'une ligne pour le prénom avec le type "text". La légende "Votre prénom :" est rendue visible pour tous par l'élément label. Celui-ci se trouve devant l'élément input, car il est édité avant le champ de saisie. Ces zones sont reliées entre elles par l'attribut for dans la balise label et l'attribut id dans l'élément input. Il est important que les deux contenus soient identiques, sinon ils ne peuvent pas être reliés. L'attribut name sert alors d'identifiant pour ce champ et est nécessaire pour la transmission des données à une page de serveur.
Ensuite, une zone de saisie de plusieurs lignes est créée avec la balise "textarea". La légende "Votre message :" apparaît ici via l'élément label. Ici aussi, les deux zones avec le même contenu textuel sont reliées entre elles par les attributs for et id.
Remarques générales
En général, les formulaires doivent être clairs et sans ambiguïté. La prévisibilité est également très utile. Les utilisateurs peuvent ainsi comprendre rapidement ce qui leur est demandé. Une structure claire et pertinente est également très importante. Les éléments de contenu apparentés peuvent être regroupés. Les unités logiquement séparées peuvent également être séparées visuellement. Cela facilite l'orientation. De plus, elles peuvent être séparées les unes des autres par des couleurs. Il est important de respecter un contraste minimum de 4,5:1.
Utilisation du clavier
L'une des caractéristiques les plus importantes pour la conception de champs de formulaires accessibles est la possibilité de les utiliser au moyen du clavier. Certaines personnes ne sont pas en mesure d'utiliser une souris en raison de leur handicap. Il est donc d'autant plus important de concevoir les formulaires de manière à ce qu'il soit également possible de naviguer avec le clavier. L'utilisation d'éléments label et d'attributs aria facilite la compréhension et l'utilisation des formulaires. Une autre possibilité de simplifier l'utilisation du clavier est l'utilisation de raccourcis clavier. Ici, des éléments de formulaire peuvent être associés à des raccourcis clavier. Cela peut aider à atteindre plus rapidement certaines zones ou à utiliser des fonctions plus rapidement. Pour cela, on utilise l'attribut accesskey en HTML. Cet attribut est inséré dans l'élément pour lequel il doit être utilisé. Il suffit d'y affecter la touche qui sera ensuite utilisée pour la commande clavier. Ainsi, si l'on attribue par exemple la touche "n" à un champ ou à un bouton, celui-ci peut être utilisé sous Windows à l'aide du raccourci clavier (Alt + n).
Il faut toutefois veiller à ce que ce raccourci clavier ne soit pas déjà utilisé pour une autre commande dans le navigateur.
Réduction au minimum
De même, il est recommandé de réduire l'ensemble à l'essentiel afin de ne pas surcharger inutilement les personnes handicapées. Il convient donc de ne demander que les données absolument nécessaires. Il convient de renoncer à la consultation de données déjà existantes. En outre, la visibilité des champs de formulaire peut être adaptée à la situation. Les champs de saisie optionnels ou les champs liés à des conditions ne doivent pas être visibles. Ils peuvent être affichés lorsqu'ils sont nécessaires. Par exemple, la demande de l'âge des enfants n'a pas de sens s'il a été sélectionné auparavant qu'il n'y avait pas d'enfants.
Aide et messages d'erreur
De plus, une aide à la saisie devrait être proposée. Celle-ci peut prendre la forme d'une boîte de dialogue ou d'une info-bulle. Elle permet d'expliquer plus en détail la saisie. Une autre possibilité serait de créer un lien vers une page d'aide. Cela augmenterait énormément le taux de réussite. Des erreurs se produisent malgré tout. Il est alors important d'afficher des messages d'erreur pertinents. Par exemple, si le mot de passe a été mal saisi lors de la connexion, le message "Le nom d'utilisateur ou le mot de passe est incorrect" ne devrait pas apparaître. Il est préférable de filtrer l'erreur. Ce qui serait correct ici : "Le mot de passe saisi n'est pas correct. Veuillez saisir le mot de passe correct".
Il existe différents types d'erreurs. Tout d'abord, l'erreur de format. Ici, le mot de passe est saisi dans un format incorrect. Par exemple, des lettres sont saisies au lieu de chiffres. Des erreurs de valeur peuvent également se produire. Cela peut se produire lorsqu'une valeur incorrecte a été saisie malgré un format valide. Un exemple serait la saisie de la valeur 34 pour un jour de la date. Le message serait alors par exemple le suivant : "Le mois de mars compte 31 jours. Veuillez saisir à nouveau le jour".
Les entrées non valides constituent un autre type d'erreur. Dans ce cas, le développeur indique des valeurs qui ne sont pas valables. Enfin, il existe encore le type d'erreur où aucune saisie n'a été effectuée dans les champs obligatoires. Cela se produit par exemple lorsque la demande de l'adresse e-mail est un champ obligatoire et que la saisie a été oubliée. Mais cela arrive aussi souvent dans les conditions générales de vente. Sur de nombreux sites web, on ne peut pas aller plus loin sans l'accord de cette déclaration.
Champs obligatoires
Les formulaires contiennent souvent des champs obligatoires. Ceux-ci doivent être signalés comme tels. Un symbole souvent utilisé pour indiquer un champ obligatoire est un "*" qui s'affiche à côté du champ du formulaire. Dans ce cas, il convient toutefois d'indiquer dès le début du formulaire que les champs marqués d'un astérisque sont obligatoires. Une autre possibilité consiste à afficher ces champs obligatoires dans une autre couleur ou une autre nuance. Ceux-ci ne sont toutefois pas accessibles à tous. Pour que les utilisateurs de screenreader puissent également les reconnaître, il convient d'utiliser en plus l'attribut required ou aria-required. Cela permet d'indiquer au lecteur d'écran qu'il s'agit d'un champ obligatoire.
Espace réservé
Une manière de rendre les formulaires encore plus compréhensibles et conviviaux est d'utiliser des espaces réservés dans les champs de formulaire. Les caractères de remplacement sont des textes temporaires qui s'affichent à l'intérieur d'un champ de formulaire afin d'indiquer à l'utilisateur le type d'informations à saisir. Ces textes disparaissent dès que l'on clique sur le champ de formulaire ou que l'on met l'accent sur celui-ci, et peuvent être remplacés par le contenu réel du champ de formulaire. Les caractères de remplacement peuvent être facilement insérés dans l'élément de saisie HTML d'un champ de formulaire en utilisant l'attribut placeholder.
Enregistrer les données
Tous les utilisateurs devraient avoir la possibilité de sauvegarder leurs saisies. Des problèmes surviennent régulièrement avec les formulaires longs. Afin d'éviter toute perte de données, il est possible de les enregistrer. Pour cela, il est possible d'implémenter un bouton qui enregistre l'état actuel. Cela facilite ensuite le remplissage de formulaires complexes. Cela présente également l'avantage de pouvoir compléter ultérieurement les données manquantes. En effet, la répétition de ces saisies conduit certains utilisateurs à ne plus remplir le formulaire. Cela peut être ennuyeux aussi bien pour l'exploitant d'un site web que pour l'utilisateur.
Authentification et limite de temps
L'authentification renforce la sécurité sur Internet. Mais elle est aussi l'une des barrières qui se présentent régulièrement. Elles apparaissent souvent sur les sites web où une connexion est nécessaire. Or, pour que ceux-ci soient accessibles à tous, les formulaires doivent être conçus de manière à être accessibles. En effet, dans de nombreux cas, les procédures d'authentification sont limitées dans le temps. On ne dispose alors que de très peu de temps pour se connecter. Souvent, il ne s'agit que de 30 ou 60 secondes. Pour de nombreuses personnes handicapées, ce temps n'est pas suffisant pour se connecter. Il est donc important de ne pas limiter la saisie par un temps.
Les captchas constituent un autre problème. Ils servent à identifier l'utilisateur comme un être humain et non comme un ordinateur. Ici, l'utilisateur est invité à identifier une image déformée et à saisir le résultat dans un champ de formulaire. Mais souvent, il faut aussi cliquer sur toutes les images sur lesquelles on peut voir une voiture, par exemple. Or, celles-ci ne sont pas toujours accessibles. Les personnes aveugles ou malvoyantes ne peuvent pas reconnaître ces images. Pour contourner cette barrière, il convient de proposer une possibilité audio.
En résumé, la conception de champs de formulaires accessibles est une étape importante sur la voie d'un environnement numérique sans barrières. L'utilisation de désignations correctes, une structure claire et structurée ainsi que l'utilisation du clavier et des messages d'erreur correspondants augmentent la probabilité que les personnes handicapées puissent elles aussi remplir les formulaires de manière autonome.
