Un formulaire est un élément qui permet à un utilisateur de fournir des données dans un champ ou un groupe de champs. Les formulaires peuvent être un champ unique ou un formulaire complexe en plusieurs étapes avec plusieurs champs par page, une validation des entrées et un CAPTCHA.
Les formulaires sont considérés comme l'un des éléments les plus difficiles à maîtriser du point de vue de l'accessibilité, car ils nécessitent une connaissance de tous les éléments que nous avons déjà abordés, ainsi que des règles supplémentaires spécifiques aux formulaires. Avec un peu de compréhension et de temps, vous pouvez créer un formulaire accessible qui vous convient, à vous et à vos utilisateurs.
Les formulaires sont le dernier module spécifique aux composants de ce cours. Ce module se concentre sur les consignes spécifiques aux formulaires. Toutefois, les consignes précédentes des modules précédents, telles que la structure du contenu, le focus clavier et le contraste des couleurs, s'appliquent également aux éléments de formulaire .
Champs
Les champs sont l'épine dorsale des formulaires. Il s'agit de petits modèles interactifs, tels qu'un élément d'entrée ou un bouton d'option, qui permettent aux utilisateurs de saisir du contenu ou de faire un choix. Vous avez le choix entre de nombreux champs de formulaire parmi lesquels choisir.
La recommandation par défaut consiste à utiliser des modèles HTML établis au lieu de créer quelque chose de personnalisé avec ARIA, car certaines fonctionnalités, telles que les états, les propriétés et les valeurs des champs, sont intégrées aux éléments HTML. Les champs personnalisés nécessitent que vous ajoutiez manuellement l'ARIA.
Option déconseillée : HTML personnalisé avec ARIA
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
Option recommandée : HTML standard
<form id="sundae-order-form">
<!-- form content -->
</form>
En plus de choisir les modèles de champs de formulaire les plus accessibles, vous devez également ajouter des attributs de saisie semi-automatique HTML à vos champs, le cas échéant. L'ajout d'attributs de saisie semi-automatique permet une définition ou une identification plus précise de l'objectif pour les agents utilisateurs et les technologies d'assistance.
Les attributs de saisie semi-automatique permettent aux utilisateurs de personnaliser les présentations visuelles, par exemple en affichant une icône de gâteau d'anniversaire dans un champ auquel est attribué l'attribut de saisie semi-automatique d'anniversaire (bday). De manière plus générale, les attributs de saisie semi-automatique facilitent et accélèrent le remplissage des formulaires. Cela est particulièrement utile pour les personnes souffrant de troubles cognitifs et de lecture, ainsi que pour celles qui utilisent des technologies d'assistance, telles que des lecteurs d'écran.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
Enfin, les champs de formulaire ne doivent pas produire de modifications contextuelles lorsqu'ils reçoivent le focus ou une entrée utilisateur, sauf si l'utilisateur a été averti du comportement avant d'utiliser le composant. Par exemple, un formulaire ne doit pas être envoyé automatiquement lorsqu'un champ reçoit le focus ou lorsqu'un utilisateur ajoute du contenu au champ.
Étiquettes
Les étiquettes informent un utilisateur sur l'objectif d'un champ, si le champ est obligatoire et peuvent également fournir des informations sur les exigences du champ, telles que le format d'entrée. Les étiquettes doivent être visibles à tout moment et décrire avec précision le champ de formulaire aux utilisateurs.
L'un des principes fondamentaux des formulaires accessibles consiste à établir une connexion claire et précise entre un champ et son étiquette. Cela est vrai à la fois visuellement et par programmation. Sans ce contexte, un utilisateur peut ne pas comprendre comment remplir les champs du formulaire.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
En outre, les champs de formulaire associés, tels qu'une adresse postale, doivent être regroupés par programmation et visuellement. Une méthode consiste à utiliser le modèle fieldset et légende pour regrouper les éléments similaires.
Descriptions
Les descriptions de champs sont similaires aux étiquettes en ce sens qu'elles sont utilisées pour donner plus de contexte au champ et aux exigences. Les descriptions de champs ne sont pas obligatoires pour l'accessibilité si les étiquettes ou les instructions du formulaire sont suffisamment descriptives.
Toutefois, dans certaines situations, il est utile d'ajouter des informations supplémentaires pour éviter les erreurs de formulaire, par exemple en transmettant des informations sur la longueur minimale de l'entrée pour un champ de mot de passe ou en indiquant à un utilisateur le format de calendrier à utiliser (par exemple, MM-JJ-AAAA).
Vous pouvez utiliser de nombreuses méthodes différentes pour ajouter des descriptions de champs à vos formulaires. L'une des meilleures méthodes consiste à ajouter un
attribut aria-describedby
à l'élément de formulaire, en plus d'un <label> élément. Le lecteur d'écran lira à la fois la description et l'étiquette.
Si vous ajoutez l'
attribut aria-labelledby
à votre élément, la valeur de l'attribut remplace le texte de votre
<label>. Comme toujours, testez le code final avec toutes les technologies d'assistance que vous comptez prendre en charge.
Erreurs
Lorsque vous créez des formulaires accessibles, vous pouvez faire beaucoup de choses pour éviter que les utilisateurs ne commettent des erreurs. Plus haut dans ce module, nous avons vu comment baliser clairement les champs, créer des étiquettes d'identification et ajouter des descriptions détaillées chaque fois que cela est possible. Mais peu importe à quel point vous pensez que votre formulaire est clair, un utilisateur finira par commettre une erreur.
Lorsqu'un utilisateur rencontre une erreur de formulaire, la première étape consiste à la signaler. Le champ dans lequel l'erreur s'est produite doit être clairement identifié, et l'erreur elle-même doit être décrite à l'utilisateur dans le texte.
Il existe différentes méthodes pour afficher les messages d'erreur, par exemple :
- Un modal, intégré à l'endroit où l'erreur s'est produite
- Une collection d'erreurs regroupées dans un message plus grand en haut de la page
Veillez à prêter attention aux focus clavier et aux options de région dynamique ARIA lorsque vous annoncez des erreurs.
Dans la mesure du possible, proposez à l'utilisateur une suggestion détaillée sur la façon de corriger l'erreur. Deux attributs sont disponibles pour informer les utilisateurs des erreurs.
- Vous pouvez utiliser l'attribut HTML required attribute. Le navigateur fournit un message d'erreur générique basé sur les paramètres de validation des fichiers.
- Vous pouvez également utiliser l'aria-required attribut pour partager un message d'erreur personnalisé avec les technologies d'assistance. Seules les technologies d'assistance reçoivent ce message, sauf si vous ajoutez du code pour le rendre visible à tous les utilisateurs.
Une fois qu'un utilisateur pense que toutes les erreurs ont été résolues, autorisez-le à renvoyer le formulaire et à fournir des commentaires sur les résultats de son envoi. Un message d'erreur indique à un utilisateur qu'il doit effectuer d'autres modifications, tandis qu'un message de réussite confirme qu'il a résolu toutes les erreurs et envoyé le formulaire.
Critères de réussite supplémentaires
Les WCAG 2.2 ont introduit les critères de réussite suivants, qui se concentrent sur des expériences de formulaire plus accessibles :