Test 11.4.3

Cas particuliers du critère 11.4

Les tests 11.4.2 et 11.4.3 seront considérés comme non applicables :

• Dans le cas où l’étiquette mélange une portion de texte qui se lit de droite à gauche avec une portion de texte qui se lit de gauche à droite ;
• Dans le cas où un formulaire contient des labels de plusieurs langues qui se liraient de droite à gauche et inversement. Par exemple, un formulaire de commande en arabe qui propose une liste de cases à cocher de produit en langue française ou mixant des produits en langue arabe ou en langue française ;
• Dans le cas où les champs de type radio ou checkbox et les balises ayant un attribut WAI-ARIA role="checkbox", role="radio" ou role="switch" ne sont pas visuellement présentés sous forme de bouton radio ou de case à cocher ;
• Dans le cas où les champs seraient utilisés dans un contexte où il pourrait être légitime, du point de vue de l’expérience utilisateur, de placer les étiquettes de manière différente à celle requise dans les tests 11.4.2 et 11.4.3.

Définitions

Accolés (étiquette et champ accolés)

Il faut que l’étiquette et son champ soient visuellement proches de manière à ce que la relation entre les deux ne puisse pas prêter à confusion.

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.

Formulaire

Balise <form> ou balise possédant un attribut WAI-ARIA role="form".