Fournir des étiquettes pour décrire la fonction de commande de formulaire.
Utiliser l’élément <label> pour associer explicitement une commande de formulaire à une étiquette
Associer exactement l’attribut for de l’étiquette à l’attribut id de la commande de formulaire.
Voici les éléments qui utilisent des étiquettes explicitement associées :
<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file"> (champs de sélection de fichier)
<input type="password">
<textarea>
<select> (listes déroulantes)
Ne pas utiliser l’élément <label> pour les éléments suivants.
Boutons Soumettre et Réinitialisation (<input type="submit"> ou <input type="reset">)
Étiquette fournie par l’attribut value
Boutons image (<input type="image">)
Étiquette fournie par l’attribut alt
Champs de saisie masqué (<input type="hidden">)
Boutons (éléments de bouton ou <input type="button">)
Étiquette fournie par le contenu de l’élément lui-même (bouton) ou par l'attribut value, aria-label ou aria-labelledby
Utiliser des étiquettes ARIA (les attributs aria-labelledby ou aria-label) lorsqu’il n’est pas possible d’utiliser <label>
Lorsque vous utilisez des étiquettes ARIA, ajouter tout texte visible dans l’étiquette de commande.
Utiliser l’attribut aria-labelledby pour récupérer une étiquette du contexte ou pour concaténer une étiquette d’un ou de plusieurs éléments du contexte.
Éviter d’utiliser l’attribut title pour identifier les commandes de formulaire. Ce n’est pas largement pris en charge par AT.
Le texte de l’étiquette doit être court et concis.
Utiliser un texte d’étiquette unique sur une page.
Placer les étiquettes visuellement à droite des boutons radio et des cases à cocher.
Placer les étiquettes de façon visuelle, directement au-dessus des champs de formulaire (de préférence par la BOEW) ou à gauche, aligné à droite (solution de rechange à la BOEW, lorsqu’il faut conserver un espace vertical).
Regroupement des commandes
Utiliser l’élément <fieldset> pour regrouper les commandes connexes dans un formulaire.
Utiliser l’élément <legend> pour nommer l’élément <fieldset>.
Faire en sorte que la legend soit aussi courte que possible, car certaines technologies d’assistance la déclarent avec l’étiquette chaque fois.
Rendre les étiquettes individuelles explicites, car certaines technologies d’assistance ne déclarent pas la <legend>. Ne pas répéter la legend dans chaque étiquette.
Utiliser l’élément <optgroup> pour les éléments <select> avec groupes d’options.
Utiliser les attributs ARIA role="group" et aria-labelledby pour regrouper et étiqueter les éléments de formulaire lorsque vous ne pouvez pas utiliser des éléments HTML natifs <fieldset> et <legend>.
Utiliser <label> dans la mesure du possible pour prendre en charge le navigateur universel et le lecteur d’écran.
Instruction relative au formulaire
Fournir les instructions générales qui s’appliquent à l’ensemble du formulaire et les fournir avant l’élément <form>. Cela permet aux utilisateurs du lecteur d’écran de consulter l’information avant de passer aux modes formulaires.
Utiliser aria-labelledby ou aria-describedby pour fournir des instructions à l’extérieur des étiquettes.
Indiquer le type de champ de saisie du formulaire (p. ex., type= “email”) afin que les navigateurs et les technologies d’assistance puissent fournir des aides à la saisie comme des claviers personnalisés, des étiquettes de remplissage automatique et des icônes.
Indiquer les saisies, les formats de données et les autres renseignements pertinents requis.
S’assurer que le texte des attributs d’espace réservé respecte un rapport de contraste minimal de 4,5:1.
Validation des saisies
Valider les données utilisateur à l’aide des attributs de validation des éléments de formulaire HTML5.
Les attributs de validation communs comprennent required, type, pattern, et les attributs min et max requis.
Valider les données du côté client et du côté serveur pour assurer la sécurité.
Identifier les champs de formulaire requis à la fois visuellement dans l’étiquette et sémantiquement.
Utiliser les types de données HTML5 pour valider différents types de données, y compris l’adresse courriel, l’adresse URL, le numéro, le numéro de téléphone, la date et la plage.
Valider la saisie structurée en utilisant l’attribut structure pour spécifier une expression régulière pour l’appariement.
Valider la longueur des entrées en utilisant les attributs minlength, maxlength, min et max
Tenir compte autant que possible des différents formats de saisie.
Permettre à vos utilisateurs de vérifier et de corriger leurs saisies afin de réduire les erreurs.
Exiger la confirmation de l’utilisateur pour les actions irréversibles.
Offrir une fonction d’annulation pour s’assurer que les soumissions sont réversibles.
Avis aux utilisateurs
Lorsqu’un utilisateur soumet un formulaire, l’aviser de la réussite ou de toute erreur.
S’assurer que les messages d’erreur sont clairs et concis, et fournissent des instructions simples pour corriger l’erreur.
Fournir une rétroaction dans l’en-tête principal, dans l’élément du titre, sous forme de liste d’erreurs avant le formulaire, ainsi qu’en ligne, associée au programme à la commande du formulaire.
Les erreurs énumérées avant le formulaire devraient :
Faire référence au label de la commande de formulaire correspondant.
Fournir une description concise et facile à comprendre de l’erreur.
Indiquer comment corriger les erreurs et rappeler aux utilisateurs les exigences en matière de format;
Inclure dans la page un lien vers la commande de formulaire correspondant pour faciliter l’accès.
Formulaires en plusieurs étapes
Diviser le formulaire en fonction de ses groupes de commandes logiques (p. ex., coordonnées et questionnaire).
Valider l’étape en cours avant d’exposer la suivante.
Étiqueter les étapes facultatives et permettre aux utilisateurs de les sauter.
S’assurer que la cible du clavier se déplace facilement d’une étape à l’autre, vers l’arrière et vers l’avant. À une nouvelle étape, cibler de préférence le prochain élément de formulaire pertinent, ou l’en-tête ou le conteneur pertinent.
Éviter d’imposer une limite de temps pour remplir le formulaire. Si une limite est requise, permettre à l’utilisateur de la modifier ou de la prolonger.
Si les étapes se trouvent sur plusieurs pages, répéter les instructions générales sur chaque page.
Indiquer la progression dans le formulaire (« Étape x de y »).
Commandes personnalisées
Dans la mesure du possible, utiliser des éléments de formulaire HTML natifs plutôt que des commandes personnalisées.
Modéliser le comportement d’après les éléments de formulaire HTML natifs.
Ajoutez un nom, un rôle et des valeurs ARIA appropriés, au besoin.
Communiquer des mises à jour et des changements d’état par l’entremise de messages ARIA live lorsqu’ils ne peuvent pas être communiqués par l’entremise de méthodes HTML ou ARIA.