Test 11.1.1

Chaque champ de formulaire vérifie-t-il une de ces conditions ?

Le champ de formulaire possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ;

Le champ de formulaire possède un attribut WAI-ARIA aria-label ;

Une balise <label> ayant un attribut for est associée au champ de formulaire ;

Le champ de formulaire possède un attribut title ;

Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.

Méthodologie 11.1.1

  1. Retrouver dans le document les champs de formulaire ;
  2. Pour chaque champ de formulaire, vérifier que le champ de formulaire :
    • Possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ;
    • Possède un attribut WAI-ARIA aria-label ;
    • Est associé à un élément <label> ayant un attribut for ;
    • Possède un attribut title ;
    • Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.
  3. Si c’est le cas pour champ de formulaire, le test est validé.

Tests suivants et précédents au clavier

Test précédent : Maj + ←

Test suivant : Maj + →

Avec ces raccourcis clavier, atteindre

Éléments et attributs

<label> aria-label aria-labelledby for title

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…". Pour assurer une compatibilité maximum avec les agents utilisateurs, notamment Internet Explorer 11, il est recommandé d’implémenter un tabindex="-1" sur les passages de textes qui ne sont pas des éléments interactifs (bouton, liens, éléments de formulaires, etc.).

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 : pour assurer une compatibilité maximum avec les agents utilisateurs, notamment Internet Explorer 11, il est recommandé d’implémenter un tabindex="-1" sur les passages de textes qui ne sont pas des éléments interactifs (bouton, liens, éléments de formulaires, etc.).

Note 2 : 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).