Test 11.10.7
Les champs ayant l’attribut aria-invalid="true" dont la saisie requiert un type de données et/ou de format obligatoires vérifient-ils une de ces conditions ?
Une instruction ou une indication du type de données et/ou de format obligatoire est visible et située dans la balise <label> associée au champ.
Une instruction ou une indication du type de données et/ou de format obligatoire est visible et située dans le passage de texte associé au champ.
Méthodologie 11.10.7
- Retrouver dans le document les champs de formulaire qui possèdent un attribut
aria-invalid="true". - Pour chaque champ de formulaire, vérifier que :
- soit une instruction ou une indication du type de données et/ou de format obligatoire est visible et située dans l’élément
<label>associé au champ ; - soit une instruction ou une indication du type de données et/ou de format obligatoire est visible et située dans le passage de texte associé au champ.
- soit une instruction ou une indication du type de données et/ou de format obligatoire est visible et située dans l’élément
- Si c’est le cas pour chaque champ de formulaire qui possède un attribut
aria-invalid="true", le test est validé.
Tests suivants et précédents au clavier
Test précédent : Maj + ←
Test suivant : Maj + →
Éléments et attributs
<label> aria-invalid='true' Note technique du critère 11.10
Le test 11.10.1 et le test 11.10.2 traitent des champs de manière indépendante, néanmoins, il faut garantir que la méthode choisie pour avertir les utilisateurs (champs obligatoires ou champs facultatifs) soit cohérente sur l’ensemble du formulaire.
Cas particuliers du critère 11.10
Le test 11.10.1 et le test 11.10.2 seront considérés comme non applicables lorsque :
-
le formulaire comporte un seul champ de formulaire ;
-
le formulaire comporte uniquement un champ d’identifiant et un champ de mot de passe (dans le cas d’un formulaire d’identification).
Dans le cas où l’ensemble des champs d’un formulaire sont obligatoires, les tests 11.10.1 et 11.10.2 restent applicables.
Définitions
- Champ de saisie de formulaire
Objet d’un formulaire permettant à l’utilisateur :
- De saisir des données textuelles ou préformatées :
input type="text";input type="password";input type="search";input type="email";input type="number";input type="tel";input type="url";textarea.
- De sélectionner des valeurs prédéfinies :
input type="checkbox";input type="radio";input type="date";input type="range";input type="color";input type="time";input type="month";input type="week";input type="datetime-local";select;datalist;optgroup;option.
- De télécharger des fichiers :
input type="file".
- Ou d’afficher des résultats :
output;progress;meter.
- Les balises possédant un rôle WAI-ARIA permettant de restituer un champ de formulaire sont également couvertes par cette définition :
progressbar;slider;spinbutton;textbox;listbox;searchbox;combobox;option;checkbox;radio;switch.
- Les objets de formulaires et rôle WAI-ARIA suivants ne sont pas considérés comme des champs de formulaires :
input type="submit";input type="reset";input type="hidden";input type="image";input type="button";button;- attribut WAI-ARIA
role="button".
- De saisir des données textuelles ou préformatées :
- Contrôle de saisie (formulaire)
Ensemble des processus qui permettent de prévenir l’utilisateur des champs obligatoires, des indications de type ou de format attendus et des erreurs de saisie dans un formulaire. Ces contrôles de saisie peuvent être implémentés par l’auteur des contenus ou s’appuyer sur des attributs (comme
requiredoupattern), des attributs WAI-ARIA (commearia-required) ou des types de champ qui produisent de manière automatique des indications de saisie ou d’erreurs (comme les typesurl,email,date,timepar exemple).- Formulaire
Un formulaire n’est pas obligatoirement contenu dans une balise
<form>ou une balise possédant un attribut WAI-ARIArole="form".- Indication du type de données et/ou de format
Indication textuelle permettant à l’utilisateur de savoir quel est le type de donnée et/ou le format de saisie requis.
Exemples :
- Courriel (format : [email protected]) ;
- Code postal (format : 00000) ;
- Date (format : JJ/MM/AAAA) ;
- Montant en euros.
Note importante : lorsque le type de champ de formulaire propose un masque de saisie, par exemple les champs
dateoutime, l’indication de format n’est pas nécessaire.- Passage de texte lié par `aria-labelledby` ou `aria-describedby`
Il s’agit d’un ou de plusieurs passages de texte identifiés par des
iddont la valeur est unique dans la page et associés à un élément (champ de formulaire, bouton, etc.) par les attributs WAI-ARIAaria-labelledbyouaria-describedbysur le modèle suivant :aria-labelledby="ID1 ID2 ID3…"où la valeur de l’attribut utilisé est égale à la liste des valeurs d’attributsiddes passages de texte à associer présents dans la page.Note 1 : la valeur des attributs WAI-ARIA
aria-labelledbyouaria-describedbyne doivent pas créer de référence récursive (A référence B qui référence A) ou traversante (A qui référence B qui référence C).