Utilisation du rôle button

Description

Cette technique présente l’utilisation du rôle button.

Ce rôle devrait être utilisé pour des éléments cliquables qui déclenchent une réponse lorsqu’activés par l’utilisateur. Par lui-même, role="button peut faire apparaître n’importe quel élément (par exemple <p>, <span> ou <div>) sous la forme d'un contrôle bouton à un lecteur d’écran. De plus ce rôle peut être utilisé en combinaison avec l’attribut aria-pressed pour créer des boutons à bascule.

Note : lorsque c’est possible, il est recommandé d’utiliser les boutons HTML natifs (<button>, <input type="button" /> et <input type="image" />) plutôt que le rôle button, les boutons HTML étant plus largement pris en charge par les anciennes technologies d’assistance. Les boutons HTML natifs obéissent également par défaut aux évènements clavier et aux règles de focus, sans besoin de personnalisation supplémentaire.

Clavier et focus

Les boutons sont des contrôles interactifs et doivent donc être focalisables. Si le rôle button est ajouté à un élément qui n’est par lui-même pas focalisable (tels que <span>,<div> ou<p>), l’attribut tabindex devra être utilisé pour rendre le bouton focalisable.

Les boutons doivent pouvoir être actionnés tant par une souris qu’avec un clavier. Pour les boutons HTML natifs, l’évènement onclick du bouton sera déclenché par les clics de souris et lorsque la barre d’espace est actionnée alors que le bouton a le focus. Si role="button" est utilisé pour créer un bouton personnalisé, l’évènement onclick ne sera déclenché qu’après un clic par le pointeur de la souris. À cause de cela, le développeur devra explicitement ajouter un gestionnaire d’évènements clavier séparé à l’élément pour que le bouton puisse être actionné lorsque la touche espace est pressée.

Attention : faites attention à l’utilisation de rôle button pour des liens. Les boutons devraient être actionnés à l’aide de la barre d’espace, alors qu’on s’attend à ce que les liens soient déclenchés avec la touche Entrée. En d’autres termes, lorsque des liens sont utilisés comme des boutons, le seul ajout de role="button" n’est pas suffisant. Il est également nécessaire d’ajouter un gestionnaire d’évènement clavier qui surveillera la touche espace afin d’être cohérent avec les boutons natifs.

Boutons à bascule

Un des avantages de l’utilisation de role="button" est qu’il permet la création de boutons à bascule. Un bouton à bascule peut avoir deux états : pressé et non pressé. Qu’un bouton soit ou non un bouton à bascule peut être indiqué avec l’attribut aria-pressed en plus du rôle button :

Si aria-pressed n’est pas utilisé, le bouton n’est pas un bouton à bascule ;
Si aria-pressed="false" est utilisé, le bouton est un bouton à bascule au repos ;
Si aria-pressed="true" est utilisé, le bouton est un bouton à bascule actionné ;
Si aria-pressed="mixed" est utilisé, le bouton est considéré comme étant partiellement actionné.

Labelliser les boutons

Les boutons doivent toujours avoir un nom accessible. Pour la plupart des boutons, ce nom sera le même que le texte du bouton. Dans certains cas, par exemple pour des boutons icônes, le nom accessible peut être donné à l’aide des attributs aria-label ou aria-labelledby.

Effets possibles sur les agents utilisateurs et les technologies d’assistance

Lorsque le rôle button est utilisé, les agents utilisateurs doivent présenter l’élément comme un contrôle bouton à l’API accessibilité du système d’exploitation. Les lecteurs d’écran doivent annoncer l’élément comme un bouton et décrire son nom accessible. Les logiciels de reconnaissance vocale doivent autoriser le bouton à s’activer en dictant le mot « clic » suivi par le nom accessible du bouton.

Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.

Exemples

Exemple 1 : un bouton simple

Dans l’extrait de code ci-dessous, on donne le rôle button à un élément <span>. Parce qu’un élément <span> est utilisé, l’attribut tabindex est requis pour rendre le bouton focalisable et le faire appartenir à l’ordre de tabulation. Remarquez que cet extrait de code implique que les styles CSS sont fournis pour donner l’apparence d’un bouton à l’élément <span> et que hanldeBtnClick et handleBtnKeyUp sont des gestionnaires d’événements qui exécutent l’action du bouton lorsqu’il est cliqué et lorsque la barre d’espace est pressée.

<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyUp="handleBtnKeyUp()">Enregistrer</span>

Exemple 2 : un bouton à bascule

Dans cet extrait de code, un bouton HTML natif est converti en un bouton à bascule à l’aide de l’attribut aria-pressed. Remarquez que l’attribut tabindex n’a pas à être utilisé ici car l’élément <button> est déjà focalisable par défaut. Lorsque le bouton est activé, la valeur de aria-pressed bascule entre true et false :

<!DOCTYPE HTML>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Exemple de rôle ARIA button</title>
    <style type="text/css">
      [role="button"] {
       padding:3px;
       border: 1px solid #CCC;
      }
      [role="button"][aria-pressed="true"] {
       border: 2px solid #000;
      }
     </style>
    <script type="text/JavaScript">
      function handleBtnClick(event) {
        event = event || window.event;
        var pressed = event.target.getAttribute("aria-pressed") == "true";
        //change la valeur de aria-pressed quand le bouton est basculé :
        event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
        //… (perform the button's logic here)
      }

      function handleBtnKeyUp(event) {
        event = event || window.event;
        if (event.keyCode === 32) { // contrôle la touche espace
          handleBtnClick(event);
        }
      }
    </script>
  </head>

  <body>
    <button role="button" aria-pressed="false" onclick="handleBtnClick(event)" onKeyUp="handleBtnKeyUp(event)">Mode Édition</button>
  </body>
</html>

Exemples concrets :

Exemples de boutons ICITA (en) ;
Exemples de boutons par Paciello Group (en).

Notes

Attributs ARIA utilisés

Techniques ARIA connexes

Compatibilité

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.