Glossaire

Bouton (formulaire)

Ajouter ma proposition
  • Proposition DINSIC | 23/11/2018 - 17:53

    Modification de l’entrée bouton (formulaire)

    Raison de la modification de l'entrée de glossaire

    Prise en compte du role WAI-ARIA button, modification pour introduire l’utilisation des attributs aria-labelledby et aria-label comme solution de nommage d’un bouton et ajout d’un note pour couvrir le critère 2.5.3 WCAG 2.1 label in name

    Ancienne formulation

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

    L'intitulé du bouton peut être de quatre types :

    • Le contenu de l'attribut value des boutons de type submit, reset ou button ;
    • Le contenu de l'attribut alt d'un bouton de type image ;
    • Le contenu de l'attribut title lorsqu'il est présent ;
    • Le contenu de la balise <button>.

    Nouvelle formulation

    É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 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 :

    1. aria-labelledby ;
    2. Sinon aria-label ;
    3. Sinon alt pour le cas des input image
    4. Sinon value pour le cas des input image, submit, reset ou button)
    5. Sinon contenu de la balise <button> ;
    6. 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.2.

Retour en haut