Glossaire RGAA 4.1.2
Bouton (formulaire)
Employé aux thématiques Images, Formulaires
La définition officielle
Reproduite mot pour mot. Elle est limitative : la reformuler élargit les critères qui s'y appuient.
É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 typesubmit,resetoubutton; - Balise
<input>de typeimage; - 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-labelledbylorsqu’il est présent ; - Le contenu de l’attribut
aria-labellorsqu’il est présent ; - Le contenu de l’attribut
altd’un bouton de typeimage; - Le contenu de l’attribut
valuedes boutons de typesubmit,resetoubutton; - Le contenu de la balise
<button>; - Le contenu de l’attribut
titlelorsqu’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
altpour le cas des inputimage; - Sinon
valuepour le cas des inputsubmit,resetoubutton; - 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.
Les 5 critères qui l'emploient
Le référentiel nomme ce terme dans le texte de ces critères : sa définition les gouverne directement.
- Critère 1.3 Images
Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
- Critère 1.4 Images
Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ?
- Critère 1.6 Images
Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?
- Critère 1.7 Images
Pour chaque image porteuse d’information ayant une description détaillée, cette description est-elle pertinente ?
- Critère 11.9 Formulaires
Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent (hors cas particuliers) ?