11.1. Chaque champ de formulaire a-t-il une étiquette ?

Tests

Références

Norme européenne EN 301 549

WCAG

Critères de succès WCAG 2.1

Techniques suffisantes et/ou échecs

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.