Tout le monde a déjà eu affaire à des formulaires. Autrefois, ils étaient surtout sur papier. Aujourd’hui, les formulaires numériques sont de plus en plus courants, car ils permettent à l’utilisateur d’interagir avec un site web. Que ce soit pour communiquer sur Internet ou pour commander un article, on les trouve partout. La recherche sur Internet, par exemple avec Google, est également concernée. Remplir ces formulaires est plus difficile pour les personnes présentant des handicaps physiques ou cognitifs, ainsi que pour les personnes aveugles et malvoyantes. Afin de permettre à chacun de participer à la vie publique, ces formulaires doivent être conçus de manière accessible. Mais comment créer concrètement des éléments de formulaire accessibles ?
Il existe différentes techniques pour cela. Avant de se pencher sur ces techniques, il convient toutefois de connaître les éléments de formulaire. Ceux-ci peuvent en effet être classés en différents types. On distingue notamment les types suivants :
- champs de saisie à une ligne
- champs de saisie multilignes
- Listes de sélection
- boutons radio
- cases à cocher
- Boutons « Envoyer » / « Annuler »
Libellé des champs de formulaire
Pour garantir l'accessibilité des formulaires, les différents contrôles doivent être accompagnés d'étiquettes. Ces étiquettes permettent aux technologies d'assistance de reconnaître les fonctions des contrôles et de les communiquer à l'utilisateur. Il est important que les étiquettes soient clairement associées aux contrôles, sans quoi les lecteurs d'écran ne sont pas en mesure d'établir un lien avec ces éléments. Il en résulte que les utilisateurs ont des difficultés à comprendre le formulaire. Ils ne peuvent pas identifier quelles informations doivent être saisies dans quels champs. Ils ne peuvent donc pas remplir correctement le formulaire et commettent souvent des erreurs. Cependant, les descriptions ne sont pas toutes libellées de la même manière. Le critère déterminant est de savoir si elles doivent être visibles de tous ou non. C’est pourquoi, dans le langage de programmation HTML, on distingue l’élément `label` des 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é de manière appropriée. Pour les champs de saisie et les listes de sélection, le `label` précède les éléments de contrôle. En revanche, pour les boutons radio et les cases à cocher, il est placé après l’élément de contrôle. Afin que les `labels` puissent être associés à l’élément correspondant, il faut encore ajouter l’attribut `for`.
L'attribut « aria » est utilisé en HTML pour les boutons. Dans un formulaire, par exemple, les boutons peuvent correspondre aux actions « Envoyer » ou « Annuler ». Grâce aux attributs « aria », les descriptions des éléments concernés 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 par le lecteur d'écran. Il existe de nombreux attributs « aria » utilisés pour améliorer l'accessibilité sur Internet. Ceux-ci diffèrent toutefois par leur nature et leur fonction. Pour l'étiquetage d'un élément, on utilise ce qu'on appelle l'attribut « aria-label ». Il est bien sûr également possible d'utiliser la même étiquette pour plusieurs éléments. C'est ce que permet l'attribut « aria-labelledby ».
Champs de saisie à une ligne et à plusieurs lignes
Les champs de saisie comptent parmi les éléments les plus fréquemment utilisés dans les formulaires. Ils peuvent comporter une ou plusieurs lignes. Les champs à une ligne sont utilisés pour des demandes courtes, par exemple 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`.
Il est également possible d'ajouter d'autres attributs, qui définissent par exemple la longueur de la ligne.
Les champs multilignes sont généralement utilisés pour les blocs de texte plus longs, comme les messages. Ils sont alors créés à l'aide de la balise `textarea`. Là encore, le développeur peut définir le nombre de lignes et la longueur de chaque ligne. Cependant, pour que ces champs soient accessibles aux personnes en situation de handicap, il faut ajouter la balise `label`. Il n’est toutefois pas possible d’établir un lien entre la balise `label` et les éléments si ceux-ci ne sont pas associés de manière univoque. Ils doivent alors être reliés entre eux via les attributs `for` et `id`. L’exemple HTML ci-dessous montre comment implémenter des balises `label` simples 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>
On crée ici tout d'abord un champ de saisie d'une ligne pour le prénom, de type « text ». Le libellé « Votre prénom : » est rendu visible à tous grâce à l'élément `label`. Celui-ci précède l'élément `input`, car il s'affiche avant le champ de saisie. L'attribut `for` de la balise `label` et l'attribut `id` de l'élément `input` permettent de relier ces deux éléments entre eux. Il est important que les deux contenus soient identiques, sinon ils ne peuvent pas être associés. L'attribut `name` sert d'identifiant pour ce champ et est nécessaire au transfert des données vers un serveur.
Ensuite, la balise « textarea » permet de créer une zone de saisie multiligne. Le libellé « Votre message : » s'affiche alors via l'élément « label ». Ici aussi, les deux zones contenant le même texte sont reliées entre elles via les attributs « for » et « id ».
Remarques générales
En règle générale, les formulaires doivent être clairs et sans ambiguïté. La prévisibilité est également très utile. Elle permet aux utilisateurs de comprendre rapidement ce qu'on attend d'eux. Une structure claire et cohérente est également très importante. Les éléments de contenu apparentés peuvent être regroupés. Les unités logiquement distinctes peuvent également être séparées visuellement. Cela facilite l'orientation. De plus, elles peuvent être mises en évidence par des couleurs différentes. Il est important de respecter le contraste minimal de 4,5:1.
Facilité d'utilisation du clavier
L'une des caractéristiques essentielles de la conception accessible des champs de formulaire est la possibilité de les utiliser à l'aide 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 possible de s'y déplacer uniquement à l'aide du clavier. L'utilisation d'éléments `label` et d'attributs `aria` facilite la compréhension et l'utilisation des formulaires. Une autre façon de simplifier l’utilisation du clavier consiste à recourir aux raccourcis clavier. Il est ainsi possible d’associer des combinaisons de touches à des éléments du formulaire. Cela peut aider à accéder plus rapidement à certaines zones ou à utiliser plus rapidement certaines fonctions. Pour cela, on utilise l’attribut `accesskey` en HTML. Cet attribut est ajouté à l’élément auquel il est destiné. Il suffit d’y attribuer la touche qui servira ensuite de raccourci clavier. Ainsi, si l’on attribue par exemple la touche « n » à un champ ou à un bouton, celui-ci pourra être activé 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 se limiter à l'essentiel afin de ne pas imposer de contraintes inutiles aux personnes en situation de handicap. Seules les données absolument nécessaires doivent donc être demandées. Il convient de s'abstenir de demander des données déjà disponibles. De plus, la visibilité des champs du formulaire peut être adaptée à la situation. Les champs facultatifs ou soumis à des conditions ne doivent pas nécessairement être visibles. Ils peuvent s’afficher lorsqu’ils sont nécessaires. Ainsi, il n’est par exemple pas pertinent de demander l’âge des enfants si l’utilisateur a préalablement indiqué qu’il n’en avait pas.
Aides et messages d'erreur
Il convient en outre de proposer une aide à la saisie. Celle-ci peut prendre la forme d’une fenêtre de dialogue ou d’une info-bulle. Elle permet d’expliquer plus en détail la procédure de saisie. Une autre possibilité serait d’ajouter un lien vers une page d’aide dédiée. Cela augmenterait considérablement le taux de réussite. Des erreurs se produisent néanmoins. 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 s’afficher. Il vaut mieux préciser la nature de l’erreur. Dans ce cas, il serait plus correct d’indiquer : « 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. Dans ce cas, le mot de passe est saisi dans un format incorrect. Par exemple, des lettres sont saisies à la place de chiffres. Des erreurs de valeur peuvent également se produire. Cela peut arriver lorsqu’une valeur incorrecte a été saisie malgré un format valide. Un exemple serait la saisie de la valeur 34 pour le jour d’une date. Le message afficherait alors, par exemple : « Le mois de mars compte 31 jours. Veuillez saisir à nouveau le jour ».
Les saisies non valides constituent un autre type d'erreur. Dans ce cas, le développeur spécifie des valeurs qui ne sont pas valides. Enfin, il existe également le cas où aucun renseignement n'a été saisi dans les champs obligatoires. Cela se produit par exemple lorsque le champ « adresse e-mail » est obligatoire et que l'utilisateur a oublié de le remplir. Mais cela arrive aussi souvent avec les conditions générales de vente. Sur de nombreux sites web, il est impossible de poursuivre la navigation sans avoir accepté cette déclaration.
Champs obligatoires
Les formulaires comportent souvent des champs obligatoires. Ceux-ci doivent être signalés comme tels. Un symbole fréquemment utilisé pour indiquer un champ obligatoire est un « * » qui apparaît à côté du champ du formulaire. Dans ce cas, il convient toutefois de préciser 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 couleur ou une nuance différente. Cependant, cette méthode n’est pas accessible à tout le monde. Afin que les utilisateurs de lecteurs d’écran 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é
L'utilisation d'indicateurs de saisie dans les champs de formulaire constitue un moyen de rendre ces derniers encore plus clairs et plus conviviaux. Les indicateurs de saisie sont des textes temporaires qui s'affichent dans un champ de formulaire afin d'indiquer à l'utilisateur le type d'informations qu'il doit saisir. Ces textes disparaissent dès que l'on clique sur le champ du formulaire ou qu'il est sélectionné, et peuvent être remplacés par le contenu réel du champ. Les textes de remplacement peuvent être facilement insérés dans l'élément HTML de saisie d'un champ de formulaire à l'aide de l'attribut « placeholder ».
Enregistrer les données saisies
Tous les utilisateurs devraient avoir la possibilité d'enregistrer leurs saisies. Les formulaires longs posent souvent des problèmes. Pour éviter toute perte de données, celles-ci peuvent être enregistrées. Pour cela, il est possible d’intégrer un bouton permettant d’enregistrer l’état actuel du formulaire. Cela facilite alors le remplissage de formulaires complexes. Cela présente également l’avantage de permettre de compléter ultérieurement les champs manquants. En effet, le fait de devoir saisir à nouveau ces informations conduit certains utilisateurs à ne pas poursuivre le remplissage du formulaire. Cela peut être source de frustration tant pour l’exploitant d’un site web que pour l’utilisateur.
Authentification et délai d'expiration
L'authentification renforce la sécurité sur Internet. Mais elle constitue également l'un des obstacles qui reviennent sans cesse. Ces obstacles apparaissent souvent sur les sites web où une connexion est requise. Or, pour que ces sites soient accessibles à tous, les formulaires doivent être conçus dans le respect des principes d'accessibilité. 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, ce délai n’est que de 30 ou 60 secondes. Pour de nombreuses personnes en situation de handicap, ce délai n’est pas suffisant pour se connecter. Il est donc important de ne pas limiter la saisie par un délai.
Les captchas posent un autre problème. Ils servent à vérifier que l'utilisateur est bien un être humain et non un ordinateur. L'utilisateur est alors invité à identifier une image déformée et à saisir le résultat dans un champ du formulaire. Souvent, il doit également cliquer sur toutes les images sur lesquelles figure, par exemple, une voiture. Or, ces images ne sont pas toujours accessibles aux personnes en situation de handicap. Les personnes aveugles ou malvoyantes ne peuvent pas reconnaître ces images. Pour contourner cet obstacle, une option audio devrait être proposée.
En résumé, on peut affirmer que la conception accessible des champs de formulaire constitue une étape importante vers un environnement numérique accessible. L'utilisation de libellés appropriés, une structure claire et bien organisée, la possibilité de naviguer au clavier ainsi que des messages d'erreur adaptés augmentent les chances que les personnes en situation de handicap puissent elles-mêmes remplir ces formulaires de manière autonome.
