11.4. Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés (hors cas particuliers) ?

Tests

Cas particuliers

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.

Références

WCAG 3.3.2 Labels or Instructions (A)

G162

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.

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