Test 11.9.2

Cas particuliers du critère 11.9

Pour le test 11.9.2, voir cas particuliers critère 11.2.

Définitions

Bouton (formulaire)

Élément d’un formulaire qui permet d’effectuer une action prédéfinie. Par exemple, le bouton de soumission d’un formulaire permet l’envoi au serveur des informations collectées pour leur traitement. L’intitulé d’un bouton doit décrire l’action qui résulte de son activation (par exemple : « Lancer votre recherche », « Envoyer votre message »).

En HTML, il y a trois types de boutons de formulaire :

• Balise <input> de type submit, reset ou button ;
• Balise <input> de type image ;
• Balise <button>.

Il est également possible de restituer un bouton à l’aide du rôle WAI-ARIA button.

L’intitulé du bouton peut être de six types :

• Le contenu du passage de texte associé au bouton via l’attribut WAI-ARIA aria-labelledby lorsqu’il est présent ;
• Le contenu de l’attribut aria-label lorsqu’il est présent ;
• Le contenu de l’attribut alt d’un bouton de type image ;
• Le contenu de l’attribut value des boutons de type submit, reset ou button ;
• Le contenu de la balise <button> ;
• Le contenu de l’attribut title lorsqu’il est présent.

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

• aria-labelledby ;
• Sinon aria-label ;
• Sinon alt pour le cas des input image ;
• Sinon value pour le cas des input submit, reset ou button ;
• Sinon contenu de la balise <button> ;
• Sinon title.

Cet ordre doit être utilisé pour l’évaluation de la pertinence du « nom accessible » du bouton. Par exemple, même dans le cas de la présence d’un title et d’un passage de texte référencé par aria-labelledby sur le même bouton, c’est le passage de texte référencé par aria-labelledby qui doit être évalué.

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

Par ailleurs, un « nom accessible » sera considéré comme non-pertinent s’il ne reprend pas le texte visible du bouton. Par exemple : <button aria-label="confirmer la saisie">valider la saisie</button> sera considéré comme non conforme au critère 11.9.

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

Intitulé visible

Texte affiché faisant office d’intitulé visible à l’écran au sein d’un bouton ou d’un lien.

Texte affiché faisant office d’étiquette pour un champ formulaire.

Ce texte peut être constitué de texte ou d’une image contenant du texte.

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