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 aussi simples qu'un champ unique ou aussi complexes un élément de formulaire en plusieurs étapes avec plusieurs champs par page, la validation des entrées et parfois un CAPTCHA.
Les formulaires sont considérés comme l'un des éléments les plus difficiles à obtenir du point de vue de l'accessibilité, car ils nécessitent la connaissance de tous les éléments déjà couverts, ainsi que des règles supplémentaires spécifiques aux formulaires. Avec certains et du temps, vous pouvez créer un formulaire accessible à tous utilisateurs.
Forms est le dernier module de ce cours dédié aux composants. Ce module aborde les points suivants : vous concentrer sur les consignes spécifiques au formulaire, mais toutes les autres recommandations dans les modules précédents, comme structure du contenu, Sélection au clavier contraste des couleurs, s'appliquent aussi à éléments.
Champs
Les champs s'appuient sur les champs. Les champs sont de petits modèles interactifs, tels que un élément d'entrée ou de cases d'option permettant aux utilisateurs d'entrer du contenu ou d'effectuer une de votre choix. Il existe une grande variété de champs de formulaire à votre disposition pour parmi lesquelles choisir.
Par défaut, il est recommandé d'utiliser des formats HTML établis au lieu de créer quelque chose de personnalisé avec ARIA, car certaines fonctionnalités fonctionnalités, comme les états de champs, les propriétés et les valeurs, sont intrinsèquement dans les éléments HTML, tandis que vous devez ajouter manuellement des valeurs ARIA personnalisées.
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
En plus de choisir les modèles de champ de formulaire les plus accessibles, où applicables, vous devez également ajouter Attributs de saisie semi-automatique HTML dans vos domaines. L'ajout d'attributs de saisie semi-automatique permet d'obtenir définition ou identification de l'objectif aux user-agents et aux technologies d'assistance (TA).
Les attributs de saisie semi-automatique permettent aux utilisateurs de personnaliser les présentations visuelles,
comme afficher une icône de gâteau d'anniversaire dans un champ avec la saisie semi-automatique
attribut (bday) qui lui est attribué. Plus généralement, les attributs
de saisie semi-automatique rendent
remplir des formulaires
plus facilement et plus rapidement. C'est particulièrement
utile pour les personnes
souffrant de troubles cognitifs ou de lecture, et de personnes souffrant de TA, telles qu'un écran
lecteurs.
<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 générer de modifications contextuelles lorsqu'ils reçoivent ou entrée utilisateur, sauf si l'utilisateur a été averti du comportement à l'aide du composant. Par exemple, un formulaire ne doit pas être envoyé automatiquement lorsqu'un champ est sélectionné ou lorsqu'un utilisateur y ajoute du contenu.
Libellés
Les étiquettes informent un utilisateur de l'objectif d'un champ. Si le champ est obligatoire, Il peut aussi fournir des informations sur les exigences du champ, comme la saisie . Les libellés doivent être visibles en permanence et décrire le formulaire avec précision pour les utilisateurs.
L'un des principes fondamentaux des formes d'accessibilité est d'établir une un lien précis entre un champ et son étiquette. C'est vrai aussi bien visuellement et de manière programmatique. Sans ce contexte, un utilisateur peut ne pas comprendre comment remplissez 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>
De plus, les champs de formulaire associés, tels qu'une adresse postale, doivent être de manière programmatique et visuellement. Une méthode consiste à utiliser le jeu de champs/légende pour regrouper les éléments similaires.
Descriptions
Les descriptions de champ sont similaires aux étiquettes dans la mesure où elles sont utilisées pour plus de contexte sur le domaine et les exigences. Les descriptions des champs ne sont pas requises pour l'accessibilité si les étiquettes ou les instructions du formulaire sont descriptives cela suffit.
Toutefois, il peut parfois être utile d'ajouter des informations pour éviter les erreurs de formulaire, telles que la transmission d'informations sur la longueur minimale la saisie d'un champ de mot de passe ou indiquer à l'utilisateur le format d'agenda à utiliser (par exemple, au format MM-JJ-AAAA).
Il existe de nombreuses méthodes différentes pour ajouter des descriptions de champs à vos
formulaires. L'une des meilleures méthodes consiste à ajouter
aria-décrite
à l'élément du formulaire, en plus de l'élément <label>. L'écran
le lecteur lit à la fois
la description et l'étiquette.
Si vous ajoutez le paramètre
aria-labelledby
à votre élément, la valeur de l'attribut remplace le texte contenu dans votre
<label> Comme toujours, assurez-vous de tester le code final avec toutes les TA que vous
prévoir de soutenir.
Erreurs
Lorsque vous créez des formulaires accessibles, il y a beaucoup de choses que vous pouvez faire pour empêcher les utilisateurs de à cause d'erreurs dans le formulaire. Précédemment dans ce module, nous avons abordé le balisage ce qui crée des libellés d'identification et ajoute des descriptions détaillées possible. Mais même si vous pensez que votre formulaire est clair, fera une erreur.
Lorsqu'un utilisateur rencontre une erreur dans le formulaire, la première étape consiste à faire part de l'erreur. Le champ dans lequel l'erreur s'est produite doit être clairement identifié, et l'erreur doit être décrite à l'utilisateur sous forme de texte.
Il existe différentes méthodes pour afficher les erreurs messages, par exemple:
- Fenêtre pop-up intégrée à proximité de l'endroit où l'erreur s'est produite
- Ensemble d'erreurs regroupées dans un message plus grand en haut de la page
Faites attention à la sélection au clavier et options de régions en temps réel ARIA lors de l'annonce d'erreurs.
Dans la mesure du possible, proposez à l'utilisateur une suggestion détaillée sur la façon de corriger le . Deux attributs sont disponibles pour avertir les utilisateurs en cas d'erreur.
- Vous pouvez utiliser l'attribut HTML required. Le navigateur affichera un message d'erreur générique en fonction des paramètres de validation enregistrés.
- Vous pouvez également utiliser l'attribut aria-required pour partager un message d'erreur personnalisé avec les partenaires de confiance. Seuls les TA recevront le message, sauf si vous ajoutez un code supplémentaire pour le rendre visible à tous les utilisateurs.
Lorsqu'un utilisateur pense que toutes les erreurs ont été résolues, autorisez-le à le renvoyer le formulaire et de fournir des commentaires sur les résultats de son envoi. Erreur un message indique à l'utilisateur qu'il a d'autres mises à jour à effectuer, tandis qu'un message de réussite confirme qu'il a corrigé toutes les erreurs et qu'il a bien envoyé le formulaire.
Testez vos connaissances
Testez vos connaissances sur les formulaires accessibles
Laquelle des réponses ci-dessous est la saisie de formulaire la plus accessible ?
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>