Comment les éléments de formulaire sont-ils conçus pour être accessibles ?

Nous avons tous déjà dû remplir des formulaires. Autrefois, il s'agissait principalement de formulaires papier. Aujourd'hui, ce sont de plus en plus les formulaires numériques qui permettent l'interaction de l'utilisateur avec un site web. Qu'il s'agisse de communiquer sur Internet ou de 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 ayant un handicap physique ou cognitif, ainsi que pour les personnes aveugles ou malvoyantes. Afin de permettre à tous de participer à la vie publique, ces formulaires doivent être conçus pour être accessibles à tous. Mais comment créer concrètement des éléments de formulaire accessibles ?

Il existe plusieurs techniques pour cela. Cependant, avant d'aborder ces techniques, il convient de connaître les éléments de forme. Ceux-ci peuvent être classés en différents types. Parmi ceux-ci, on trouve notamment les types suivants :

• champs de saisie sur une seule ligne

• zones de saisie multilignes

• Listes de sélection

• Boutons radio

• Cases à cocher

• Boutons Soumettre/Annuler

Étiquetage des champs de formulaire

Pour garantir l'accessibilité des formulaires, les différents contrôles doivent être étiquetés. 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, sinon les lecteurs d'écran ne pourront pas les identifier. Par conséquent, les utilisateurs auront des difficultés à comprendre le formulaire et à déterminer quelles informations saisir dans quels champs. Ils ne pourront donc pas le remplir correctement et commettront souvent des erreurs. Cependant, les descriptions ne sont pas toutes étiquetées de la même manière. Le facteur déterminant est de savoir si elles doivent être visibles par tous ou non. En HTML, on distingue donc l'élément `<label>` et les attributs `aria`. L'élément `<label>` est utilisé pour les champs de saisie, les listes déroulantes, les boutons radio et les cases à cocher, et son positionnement doit être adapté. Pour les champs de saisie et les listes déroulantes, l'étiquette se place avant le contrôle. Pour les boutons radio et les cases à cocher, elle se place après l'élément `<control>`. L'attribut `for` doit être ajouté pour que les étiquettes puissent également être liées à l'élément correspondant.

L'attribut aria est utilisé en HTML pour les boutons. Ces boutons peuvent représenter, par exemple, la soumission ou l'annulation d'un formulaire. Les attributs aria rendent les descriptions des éléments respectifs reconnaissables uniquement par les technologies d'assistance. Ils peuvent donc également être utilisés pour les champs de saisie qui ne doivent être visibles que par un lecteur d'écran. De nombreux attributs aria permettent d'améliorer l'accessibilité web. Cependant, ils diffèrent par leur type et leur fonction. L'attribut aria-label sert à étiqueter un élément. Il est possible d'utiliser la même étiquette pour plusieurs éléments grâce à l'attribut aria-labelledby.

champs de saisie monolignes et multilignes

Les champs de saisie sont parmi les éléments les plus fréquemment utilisés dans les formulaires. Ils peuvent être sur une seule ligne ou sur plusieurs lignes. Les champs sur une seule ligne servent aux requêtes courtes, comme le nom d'une personne, une adresse électronique, une adresse postale ou une ville.

Elles sont créées en HTML avec la balise input-Tag et l'attribut type.

De plus, d'autres attributs peuvent être ajoutés pour définir, par exemple, la longueur de la ligne.

Les champs multilignes sont généralement utilisés pour les grandes zones de texte, comme les messages. Ils sont créés à l'aide de la balise `<textarea>`. Le développeur peut alors spécifier le nombre de lignes et leur longueur. Cependant, pour que ces champs soient accessibles, la balise `<label>` doit être ajoutée. Il est impossible de créer un lien entre l'étiquette et les éléments si ces derniers ne sont pas identifiés de manière unique. Ils doivent donc être liés via les attributs `for` et `id`. L'exemple HTML suivant illustre l'utilisation d'étiquettes simples dans ce type de champs de saisie.

<label for="vorname">Ihr Vorname : </label>

<type d'entrée"text" name="vorname" id="vorname" />

<br />

<label for="nachricht">Ihre Nachricht : </label>

<textarea name="nachricht" id="nachricht"> </textarea>

Ici, un champ de saisie de texte sur une seule ligne est créé pour le prénom. L'étiquette « Votre prénom : » est affichée à tous grâce à l'élément `<label>`. Cet élément est placé avant le champ de saisie, car il est affiché avant ce dernier. L'attribut `for` de l'élément `<label>` et l'attribut `id` du champ de saisie permettent de lier ces deux éléments. Il est essentiel que leur contenu soit identique pour que la liaison soit possible. L'attribut `name` sert d'identifiant pour ce champ et est nécessaire pour le transfert des données vers une page serveur.

Ensuite, une zone de saisie multiligne est créée à l'aide de la balise « textarea ». Le libellé « Votre message : » apparaît alors ici grâce à l'élément label. Ici aussi, les deux zones au contenu textuel identique sont liées par les attributs for et id.

Notes générales

En général, les formulaires doivent être clairs et sans ambiguïté. La prévisibilité est également essentielle : elle permet aux utilisateurs de comprendre rapidement ce qui est attendu d’eux. Une structure claire et logique est aussi primordiale. Les éléments de contenu liés peuvent être regroupés. Les unités logiquement distinctes peuvent également être séparées visuellement, ce qui facilite l’orientation. De plus, elles peuvent être différenciées par la couleur. Il est important de maintenir un contraste minimal de 4,5:1.

opérabilité du clavier

L'une des caractéristiques les plus importantes pour la conception accessible des champs de formulaire est leur accessibilité au clavier. Certaines personnes, en raison d'un handicap, ne peuvent pas utiliser de souris. Il est donc primordial de concevoir des formulaires accessibles au clavier. L'utilisation des balises <label> et des attributs aria facilite la compréhension et l'utilisation des formulaires. Une autre façon de simplifier l'utilisation au clavier est d'associer des raccourcis clavier aux éléments du formulaire. Cela permet d'accéder plus rapidement à certaines zones ou d'exécuter des fonctions plus rapidement. L'attribut `accesskey` en HTML est utilisé à cet effet. Cet attribut est inséré dans l'élément auquel il est associé. Il suffit d'y associer la touche qui servira ensuite de raccourci clavier. Par exemple, si vous associez la touche « n » à un champ ou un bouton, celui-ci sera accessible sous Windows avec le raccourci clavier Alt + n.

Toutefois, assurez-vous que ce raccourci clavier n'est pas déjà utilisé pour une autre commande dans le navigateur.

Réduction au minimum

De même, il est conseillé de se limiter à l'essentiel afin de ne pas imposer une charge inutile aux personnes en situation de handicap. Par conséquent, seules les données strictement nécessaires doivent être demandées. Il convient d'éviter de consulter des données déjà existantes. De plus, la visibilité des champs du formulaire peut être adaptée à la situation. Les champs facultatifs ou liés à des conditions n'ont pas besoin d'être affichés. Ils peuvent être présentés uniquement lorsque cela est nécessaire. Par exemple, demander l'âge des enfants n'a aucun sens si l'on a préalablement indiqué qu'aucun enfant n'est présent.

Messages d'aide et 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 infobulle. Grâce à cette aide, la saisie peut être expliquée plus en détail. Une autre possibilité serait de proposer un lien vers une page d'aide dédiée. Cela augmenterait considérablement le taux de réussite. Les erreurs restent possibles. Il est donc important d'afficher des messages d'erreur clairs et pertinents. Par exemple, si le mot de passe saisi est incorrect lors de la connexion, le message « Nom d'utilisateur ou mot de passe incorrect » ne devrait pas s'afficher. Il est préférable de filtrer l'erreur. Le message approprié serait : « Le mot de passe que vous avez saisi est incorrect. Veuillez saisir le mot de passe correct. »

Il existe plusieurs types d'erreurs. Tout d'abord, l'erreur de format. 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 survenir. Cela se produit lorsqu'une valeur incorrecte est saisie malgré un format valide. Par exemple, si vous saisissez la valeur 34 pour le champ « Date », le message affiché sera : « Le mois de mars compte 31 jours. Veuillez saisir à nouveau le champ. »

Un autre type d'erreur est la saisie invalide. Dans ce cas, le développeur spécifie des valeurs incorrectes. Enfin, il existe l'erreur survenant lorsqu'aucun champ obligatoire n'est renseigné. Cela se produit, par exemple, si l'adresse e-mail est obligatoire et qu'elle a été oubliée. Ce problème se pose également fréquemment avec les conditions générales d'utilisation. Sur de nombreux sites web, il est impossible de poursuivre sans les accepter.

Champs obligatoires

Les formulaires contiennent souvent des champs obligatoires. Ces derniers doivent être clairement identifiés. Un astérisque (*) placé à côté du champ est fréquemment utilisé à cette fin. Toutefois, il convient de préciser dès le début du formulaire que les champs marqués d'un astérisque sont obligatoires. Une autre option consiste à afficher ces champs obligatoires dans une couleur ou un dégradé différent. Cependant, ces options ne sont pas accessibles à tous. Afin que les utilisateurs de lecteurs d'écran puissent également les identifier, l'attribut `required` ou `aria-required` doit être utilisé. Cela indique au lecteur d'écran qu'il s'agit d'un champ obligatoire.

Espace réservé

Pour rendre les formulaires plus compréhensibles et conviviaux, l'utilisation d'espaces réservés est une solution. Ces espaces réservés sont des textes temporaires qui s'affichent dans un champ pour indiquer à l'utilisateur le type d'information à saisir. Ils disparaissent dès que l'utilisateur clique sur le champ ou le sélectionne, et peuvent être remplacés par le contenu du formulaire. L'insertion d'espaces réservés dans l'élément HTML `<input>` d'un champ de formulaire est simple grâce à l'attribut `placeholder`.

Enregistrer les entrées

Tous les utilisateurs devraient avoir la possibilité d'enregistrer leurs saisies. Les formulaires longs posent souvent problème. Pour éviter toute perte de données, il est possible de les sauvegarder. Un bouton permettant de sauvegarder la situation actuelle peut ainsi être implémenté. Remplir des formulaires complexes devient alors plus simple. De plus, les champs manquants peuvent être complétés ultérieurement. En effet, la répétition des mêmes informations décourage certains utilisateurs, ce qui peut être agaçant tant pour l'administrateur du site web que pour l'utilisateur.

Authentification et limite de temps

L'authentification renforce la sécurité sur Internet. Cependant, elle constitue également un obstacle récurrent, notamment sur les sites web nécessitant une connexion. Pour que ces sites soient accessibles à tous, les formulaires doivent être conçus de manière à être sans barrière. En effet, dans de nombreux cas, les procédures d'authentification sont limitées dans le temps. Les utilisateurs disposent alors de très peu de temps pour se connecter, souvent seulement 30 ou 60 secondes. Pour de nombreuses personnes en situation de handicap, ce délai est insuffisant. Il est donc important de ne pas limiter la saisie des informations par une durée.

Les captchas posent un autre problème. Ils servent à identifier l'utilisateur comme un être humain et non comme un ordinateur. L'utilisateur est invité à identifier une image déformée et à saisir le résultat dans un champ de formulaire. Souvent, il faut cliquer sur toutes les images, par exemple celles représentant une voiture. Or, ces captchas ne sont pas toujours accessibles à tous. Les personnes aveugles ou malvoyantes ne peuvent pas reconnaître ces images. Pour pallier cet obstacle, une option audio devrait être proposée.

En résumé, la conception accessible des champs de formulaire est une étape importante vers un environnement numérique accessible. L'utilisation de désignations correctes, une mise en page claire et structurée, ainsi que la possibilité de saisir les informations au clavier et l'affichage de messages d'erreur pertinents augmentent les chances que les personnes en situation de handicap puissent remplir les formulaires de manière autonome.