Critère 11.10
Contrôle de saisie
Le contrôle de saisie doit être utilisé de manière pertinente (champs obligatoires, format).
En Bref : L'essentiel à retenir
- Pour aider l'utilisateur, indiquez clairement les champs obligatoires via une indication visuelle (ex: astérisque) et sémantique.
- En cas d'erreur, utilisez l'attribut `aria-invalid="true"` pour signaler l'erreur sur le champ concerné.
- Associez le message d'erreur au champ de formulaire en utilisant `aria-describedby` pour une meilleure accessibilité.
- Cette approche est en accord avec le critère 11.10 du RGAA concernant l'accessibilité des formulaires.
Objectif
Aider l'utilisateur à remplir correctement le formulaire en indiquant clairement les champs obligatoires et les erreurs.
Solution Technique
1. Champs obligatoires
Indiquez les champs obligatoires visuellement (ex: astérisque) ET sémantiquement.
<label for="email">Email *</label>
<input type="email" id="email" required aria-required="true" />
2. Indication d'erreur
Lorsqu'une erreur est détectée, signalez-la avec aria-invalid="true" et liez le message d'erreur au champ.
<label for="email">Email</label>
<input type="email" id="email" aria-invalid="true" aria-describedby="email-error" />
<span id="email-error" class="error">Veuillez saisir une adresse email valide.</span>