Formulaires
Les composants de formulaire sont conçus pour être accessibles et respecter les critères du RGAA. Voici les points clés à prendre en compte pour en garantir l’accessibilité.
Interactions clavier
Aucune interaction spécifique n’est associée au formulaire.
Les interactions clavier du formulaire sont celles liées aux éléments de formulaire qu’il contient :
- champs de saisie ,
- boutons ,
- liste déroulante ,
- cases à cocher ,
- boutons radio ,
- ajout de fichier , etc.
Règles d’accessibilité
Regroupement de champs
-
Utiliser un élément
<fieldset>accompagné d’un élément<legend>pour regrouper un ensemble de champs de formulaire de même nature lorsque les étiquettes des champs ne sont pas suffisamment explicites. - La légende du regroupement doit être pertinente.
Message d’information, d’avertissement ou d’erreur
Il existe différentes méthodes pour gérer les messages d’information, d’avertissement ou d’erreur d’un formulaire de manière accessible selon le contexte.
Il est possible d’indiquer l’information, l’avertissement ou l’erreur :
- dans l’étiquette du champ,
- dans un passage de texte avant le formulaire,
-
dans un passage de texte relié au champ de saisie avec
l’attribut
aria-describedby, -
avec une live region :
role="alert",role="status",aria-live="assertive", aria-live="polite"(dans certains contextes uniquement).
Champs obligatoires
Ajouter une mention visible pour tout le monde au début du
formulaire et utiliser l’attribut
required pour indiquer
que le champ est obligatoire.
Critères RGAA applicables
- Couleurs : 3.2, 3.3
- Présentation de l’information : 10.1, 10.2, 10.3, 10.4, 10.5, 10.7, 10.11, 10.12
- Formulaires : 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8, 11.9, 11.10, 11.11, 11.12, 11.13
- Navigation : 12.8, 12.9
- Consultation : 13.9, 13.11