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

Tout le monde a été confronté un jour ou l'autre à des formulaires. Dans le passé, plutôt sur papier. Aujourd'hui, il s'agit de plus en plus de formulaires numériques, car ils servent à l'interaction de l'utilisateur avec un site web. Qu'il s'agisse de communiquer sur l'internet ou de commander un article, on en trouve partout. La recherche sur l'internet, par exemple avec Google, est également concernée. Remplir ces formulaires est plus difficile pour les personnes souffrant de déficiences physiques ou même cognitives, ainsi que pour les aveugles et les malvoyants. Afin de permettre à tous de participer à la vie publique, ces formulaires doivent être conçus de manière à ne pas présenter d'obstacles. Mais.. : Comment créer des éléments de formulaires accessibles ?

Il existe plusieurs techniques pour y parvenir. Toutefois, avant d'aborder les techniques, il convient de connaître les éléments du formulaire. Ils peuvent être divisés en différents types. Il existe notamment les types suivants

• champs de saisie à une ligne

• zones de saisie multilignes

• Listes de sélection

• Boutons radio

• Cases à cocher

• Boutons de soumission/annulation

Étiquetage des champs de formulaire

Pour assurer 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 se connecter aux éléments. Par conséquent, les utilisateurs ont des difficultés à comprendre le formulaire. Ils ne peuvent pas identifier les informations à saisir dans les différents champs. Ils sont donc incapables de remplir le formulaire correctement et font souvent des erreurs. Cependant, les descriptions ne sont pas toutes étiquetées de la même manière. Le facteur décisif est de savoir si elles doivent être visibles par tous ou non. Dans le langage de programmation 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 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, l'étiquette est placée devant les contrôles. En revanche, pour les boutons radio et les cases à cocher, elle est placée après l'élément de contrôle. 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. 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 le lecteur d'écran. De nombreux attributs aria sont utilisés pour améliorer l'accessibilité du web. Ils diffèrent toutefois par leur type et leur fonction. L'attribut aria-label est utilisé pour étiqueter un élément. Bien entendu, il est également possible d'utiliser la même étiquette pour plusieurs éléments. Cela est possible grâce à l'attribut aria-labelledby.

Champs de saisie à une ou plusieurs lignes

Les champs de saisie sont l'un des éléments les plus fréquemment utilisés dans les formulaires. Ils peuvent être à une ou plusieurs lignes. Les champs d'une seule ligne sont utilisés pour des requêtes courtes, telles que le nom d'une personne, une adresse électronique, une adresse postale ou une ville.

Ils sont créés en HTML avec la balise input et l'attribut type.

En outre, 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 zones de texte plus grandes, comme les messages textuels. Ils sont créés à l'aide de l'étiquette textarea . Là encore, le développeur peut spécifier le nombre de lignes et la longueur des lignes. Toutefois, pour que ces champs soient accessibles, l'étiquette label doit encore être ajoutée. Cependant, il n'est pas possible de créer un lien entre l'étiquette et les éléments s'ils ne sont pas attribués de manière unique. Ils doivent donc être liés par l'attribut for et l'attribut id. Dans l'exemple HTML suivant, des étiquettes simples sont implémentées 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, un champ de saisie d'une seule ligne pour le prénom de type "text" est d'abord créé. L'étiquette "Votre prénom :" est rendue visible à tous par l'élément label. Celui-ci est placé devant l'élément input, puisqu'il est édité avant le champ de saisie. L'attribut for de l'étiquette label et l'attribut id de l'élément input relient ces zones. Il est important que les deux contenus soient identiques, sinon ils ne peuvent pas être liés. L'attribut name sert d'identifiant pour ce champ et est nécessaire pour transférer les données vers une page serveur.

Ensuite, une zone de saisie multiligne est créée avec l'étiquette "textarea". L'étiquette "Votre message :" apparaît alors dans cette zone via l'élément "label". Ici aussi, les deux zones ayant le même contenu textuel 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 très utile. Elle permet aux utilisateurs de savoir rapidement ce qu'on attend d'eux. Une structure claire et sensée 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. En outre, elles peuvent être séparées les unes des autres par des couleurs. Il est important de respecter le contraste minimum de 4,5:1.

Fonctionnement du clavier

L'une des caractéristiques les plus importantes pour la conception accessible des champs de formulaire est la possibilité d'utiliser le clavier. Certaines personnes sont incapables 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'ils puissent également être parcourus à l'aide du clavier. L'utilisation d'éléments label et d'attributs aria facilite la compréhension et l'utilisation des formulaires. L'utilisation de raccourcis clavier est un autre moyen de simplifier l'utilisation du clavier. Ici, les éléments du formulaire peuvent être stockés avec des raccourcis clavier. Cela permet d'accéder plus rapidement à certaines zones ou d'utiliser des fonctions plus rapidement. L'attribut accesskey en HTML est utilisé à cette fin. Cet attribut est inséré dans l'élément pour lequel il doit être utilisé. Il suffit alors d'attribuer la touche qui sera utilisée pour la commande clavier. Par exemple, si vous attribuez la touche "n" à un champ ou à un bouton, vous pouvez l'utiliser dans 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 réduire l'ensemble à l'essentiel afin de ne pas imposer une charge inutile aux personnes handicapées. Par conséquent, seules les données absolument nécessaires doivent être demandées. L'interrogation de données déjà existantes devrait être supprimée. En outre, la visibilité des champs du formulaire peut être adaptée à la situation. Les champs de saisie facultatifs ou les champs liés à des conditions ne doivent pas nécessairement être visibles. Ils peuvent être affichés lorsqu'ils sont nécessaires. Par exemple, l'interrogation sur l'âge des enfants n'a pas de sens si l'on a sélectionné au préalable qu'il n'y a pas d'enfants.

Aide et messages d'erreur

En outre, une aide à la saisie doit être proposée. Elle 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 créer un lien vers une page d'aide distincte. Cela permettrait d'augmenter considérablement le taux de réussite. Des erreurs peuvent toujours se produire. Il est important que les messages d'erreur soient significatifs. Par exemple, si le mot de passe a été saisi de manière incorrecte lors de la connexion, le message "Le nom d'utilisateur ou le mot de passe est incorrect" ne doit pas apparaître. Il est préférable de filtrer l'erreur. Le message correct serait le suivant : "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 introduit dans un format incorrect. Par exemple, des lettres sont introduites à la place des chiffres. Des erreurs de valeur peuvent également se produire. Cela peut se produire lorsqu'une valeur incorrecte est introduite malgré un format valide. Un exemple serait l'introduction de la valeur 34 pour une étiquette de la date. Le message serait alors le suivant, par exemple "Le mois de mars compte 31 jours. Veuillez saisir à nouveau l'étiquette".

Un autre type d'erreur est la saisie non valide. Dans ce cas, le développeur spécifie des valeurs qui ne sont pas valides. Enfin, il existe un type d'erreur lorsque aucune entrée n'a été faite pour les champs obligatoires. Cela se produit, par exemple, si l'adresse électronique est un champ obligatoire et que la saisie a été oubliée. Cela se produit souvent avec les conditions générales. Sur de nombreux sites web, vous ne pourrez pas continuer sans accepter cette déclaration.

Champs obligatoires

Les formulaires contiennent souvent des champs obligatoires. Ceux-ci doivent être signalés comme tels. Un symbole fréquemment utilisé pour indiquer un champ obligatoire est un "*" affiché à 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 des champs 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. Pour que les utilisateurs de lecteurs d'écran puissent également les reconnaître, il convient d'utiliser l'attribut required ou aria-required. Cela indique au lecteur d'écran qu'il s'agit d'un champ obligatoire.

Placeholder

Une façon de rendre les formulaires encore plus compréhensibles et conviviaux est d'utiliser des espaces réservés dans les champs de formulaire. Les espaces réservés sont des textes temporaires qui apparaissent dans un champ de formulaire pour indiquer à l'utilisateur le type d'information à saisir. Ces textes disparaissent lorsque l'utilisateur clique sur le champ du formulaire ou s'y concentre, et peuvent être remplacés par le contenu réel du champ du 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 de caractère de remplacement.

Sauvegarder les entrées

Tous les utilisateurs devraient avoir la possibilité de sauvegarder leurs entrées. Des problèmes surviennent régulièrement avec des formulaires plus longs. Afin d'éviter toute perte de données, il est possible de les sauvegarder. Pour ce faire, il est possible d'implémenter un bouton qui enregistre l'état actuel. Il est ainsi plus facile de remplir des formulaires complexes. Cela présente également l'avantage de pouvoir compléter ultérieurement les entrées manquantes. En effet, la répétition de ces entrées incite certains utilisateurs à cesser de remplir le formulaire, ce qui peut s'avérer gênant tant pour l'utilisateur que pour l'utilisateur. Cette situation peut être gênante tant pour l'exploitant d'un site web que pour l'utilisateur.

Authentification et limite de temps

L'authentification renforce la sécurité sur l'internet. Cependant, c'est aussi l'un des obstacles qui ne cesse d'apparaître. Ces obstacles apparaissent souvent sur les sites web où une connexion est requise. Mais pour que ces derniers soient accessibles à tous, les formulaires doivent être conçus de manière à ne pas présenter d'obstacles. En effet, dans de nombreux cas, les procédures d'authentification sont limitées dans le temps. Les personnes disposent alors 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 est insuffisant pour se connecter. Il est donc important de ne pas limiter la saisie dans le temps.

Les captchas posent un autre problème. Ils sont utilisés pour identifier l'utilisateur en tant qu'être humain et non en tant qu'ordinateur. Ici, 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 sur celle d'une voiture. Cependant, ces images ne sont pas toujours exemptes de barrières. 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é, la conception accessible des champs de formulaire est une étape importante sur la voie d'un environnement numérique accessible. L'utilisation de désignations correctes, une présentation claire et structurée, ainsi que l'utilisation du clavier et les messages d'erreur correspondants augmentent la probabilité que les personnes handicapées puissent également remplir les formulaires de manière autonome.