Test 11.1.1

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".

Étiquette de champ de formulaire

Texte à proximité du champ de formulaire permettant d’en connaître la nature, le type ou le format des informations attendues. L’étiquette peut être associée au champ de formulaire de plusieurs manières :

• Par l’utilisation d’une balise <label> ;
• Par l’utilisation de l’attribut WAI-ARIA aria-label ;
• Par l’utilisation d’une liaison entre le texte et le champ par l’attribut WAI-ARIA aria-labelledby ;
• Par l’utilisation de l’attribut title.

Note importante : lorsque plusieurs de ces techniques sont présentes sur un même champ, le calcul du « nom accessible », c’est-à-dire ce qui sera restitué, obéit à un ordre strict :

• aria-labelledby ;
• Sinon aria-label ;
• Sinon <label> ;
• Sinon title.

Cet ordre doit être utilisé pour l’évaluation de la pertinence de l’étiquette (critère 11.2). Par exemple, même dans le cas de la présence d’un <label>, c’est le passage de texte référencé par aria-labelledby qui doit être pris en compte.

Référence : Accessible name and description calculation.

Note importante au sujet de l’utilisation de placeholder : lorsque l’attribut placeholder est présent, il est susceptible d’être restitué à la place de l’attribut title. Par conséquent, lorsque ces deux attributs title et placeholder sont présents, ils doivent être identiques.

Note au sujet des étiquettes liées par aria-labelledby : Il s’agit d’un ou de plusieurs passages de texte identifiés par des id et liés par aria-labelledby sur le modèle suivant : aria-labelledby="ID1 ID2 ID3…".

Note : l’attribut aria-label ne peut pas être utilisé pour indiquer le caractère obligatoire d’un champ.

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 id dont la valeur est unique dans la page et associés à un élément (champ de formulaire, bouton, etc.) par les attributs WAI-ARIA aria-labelledby ou aria-describedby sur le modèle suivant : aria-labelledby="ID1 ID2 ID3…" où la valeur de l’attribut utilisé est égale à la liste des valeurs d’attributs id des passages de texte à associer présents dans la page.

Note 1 : la valeur des attributs WAI-ARIA aria-labelledby ou aria-describedby ne 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).