28 nov. 20234 min de lecture

📃 “Optimisation des Formulaires pour une Accessibilité Numérique Améliorée” 📃

Dernière mise à jour : 2 janv.

Les formulaires sont essentiels à l'interaction entre les utilisateurs et les propriétaires de sites Web. Ils permettent la collecte d'informations, la communication, la participation des utilisateurs et diverses transactions.

Bien qu’ils soient essentiels sur de nombreux sites, ils peuvent être difficiles à accéder. Cet article examinera des méthodes utiles pour rendre les formulaires plus faciles à utiliser et améliorer l'expérience utilisateur pour tous.

Fonctionnalités des formulaires

Dans un premier temps, lorsque nous allons sur un site, il est principalement demandé si nous possédons déjà un compte ou non. Pour cela, nous pouvons soit nous inscrire en créant un compte, ou alors, nous pouvons nous connecter en s’authentifiant.

Cela permet de collecter des informations à propos des utilisateurs, en recueillant ces informations personnelles avec le nom, prénom, adresse-mail… Mais aussi, de collecter des données servant à créer des profils utilisateurs pour personnaliser l’expérience de l’utilisateur, et de communiquer ultérieurement avec eux. Les sondages et enquêtes sont aussi utiles dans le recueil des données, puisque cela permet de comprendre les besoins des utilisateurs.

En général, il est aussi demandé si nous voulons nous abonner à la newsletter du site web, qui permet de maintenir la communication avec les clients, utilisateurs.

De plus, sur certains sites web, il est possible de passer des commandes en ajoutant des articles au panier, et en remplissant les informations de paiement afin de recevoir l’article que nous souhaitons avoir.

En somme, nous pouvons aussi laisser des commentaires et avis sur différents produits / services, ce qui permet d’améliorer l’expérience utilisateur.

Enfin, des formulaires pour les contacts et communiquer avec le support sont également présent sur les sites, car ils sont utiles pour les utilisateurs qui souhaitent poser des questions, ou demander de l’aide au support technique.

Accessibilité des formulaires

Lorsqu'il s'agit d'accessibilité numérique des formulaires de sites web, il est important de créer des libellés clairs et concis pour assurer une expérience utilisateur inclusive. Pour cela, il faut opter pour des libellés décrivant clairement le but du champ, tout en évitant d’utiliser des termes vagues.

Les utilisateurs doivent aussi pouvoir naviguer au clavier, même dans les différents formulaires que propose le site. C’est pourquoi, chaque élément du formulaire doit être accessible via la touche Tab, et l'ordre de tabulation doit être logique.

Au niveau HTML

L'accessibilité numérique des formulaires sur les sites web implique également de rendre les contrôles des formulaires accessibles à tous les utilisateurs, y compris ceux qui dépendent de technologies d'assistance.

Pour cela, il existe différentes balises à utiliser lors du code d’un site web.

En associant un libellé à un élément de formulaire, la balise <label> en HTML est essentielle à l'accessibilité numérique. En créant une connexion claire entre le libellé et le contrôle correspondant, la balise <label> facilite la compréhension et l'utilisation du formulaire pour tous les utilisateurs, y compris ceux qui dépendent de technologies d'assistance. Celle-ci est aussi utile pour améliorer l’expérience utilisateur, notamment pour les personnes utilisant un lecteur d’écran, car cet élément permet de lire à voix haute les éléments du site web. D'un autre côté, elle facilite la navigation sur un site Web pour les internautes qui ont du mal à naviguer sur des surfaces plus petites. Il est plus facile de cliquer à mesure que la zone cliquable s'agrandit. La balise <label> est un outil puissant pour créer des formulaires web accessibles, en rendant les informations claires et en améliorant l'expérience utilisateur pour un public diversifié, y compris ceux qui dépendent de technologies d'assistance.

En HTML, la balise <fieldset> est utilisée pour organiser les éléments du formulaire qui sont liés les uns aux autres et est généralement associée à la balise <legend>. Ces balises peuvent être utilisées ensemble pour créer des groupes de champs de formulaire dans le but de rendre le formulaire plus compréhensible, facile à utiliser et accessible.

Les applications internet riches et accessibles, “ARIA” sont un ensemble de rôles et de fonctionnalités qui définissent comment rendre le contenu et les applications web accessibles (notamment celles développées avec JavaScript) pour les personnes handicapées. ARIA complète le HTML pour que les outils d'assistance puissent utiliser les éléments interactifs et les widgets quand les fonctionnalités standard ne le permettent pas. En conséquence, ARIA permet l'accès aux widgets JavaScript, aux instructions dans les formulaires, aux messages d'erreur et aux mises à jour dynamiques du contenu.

Conseils d’UX

L’UX Design joue un rôle crucial dans le domaine de l’accessibilité numérique. Il existe donc quelques conseils pour optimiser l’accessibilité des formulaires des sites web, notamment liés aux contrastes des couleurs, devant être au minimum de 4,5, comme vu dans l’article des extensions, avec WCAG Color Checker comme outil. En somme, la taille de la police doit être d’au moins 14 px, en évitant la typographie “light”, car elle est trop fine et donc illisible pour les personnes atteintes de déficiences visuelles et dyslexiques.

De plus, le champ de formulaire doit comporter une étiquette <label> pour le rendre accessible. Le champ doit aussi utiliser un texte de remplacement, appelé “placeholder”, étant un attribut permettant d'afficher du texte par défaut dans certains champs de formulaire.

Enfin, il ne faut pas oublier, lors du développement du site internet, d’insérer les balises <alt> aux images, car elle permet de proposer un texte alternatif, donnant une description de l’image ou du visuel, si ce dernier n’apparaît pas à l’écran, ou si une personne utilise un lecteur d’écran.

En résumé…

… L'optimisation des formulaires pour une accessibilité numérique améliorée est une démarche éthique qui vise à garantir que l'expérience en ligne soit équitable et inclusive pour tous les utilisateurs, indépendamment de leurs capacités.

On se retrouve JEUDI, dans le prochain article, disponible vers 13h !

Références :

A11Y et RSN