--- title: 'ARIA : le rôle button' slug: Web/Accessibility/ARIA/Roles/button_role tags: - ARIA - ARIA Role - ARIA button - Accessibility - Button Role - Reference translation_of: Web/Accessibility/ARIA/Roles/button_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button --- Le rôle **[button](https://www.w3.org/WAI/PF/aria/roles#button)** devrait être utilisé pour les éléments cliquables qui déclenchent une réponse lorsqu'activés par l'utilisateur. Ajouter `role="button"` permettra à un élément d'apparaître comme un bouton de contrôle pour un lecteur d'écran. Ce rôle peut être utilisé avec l'attribut `aria-pressed` afin de créer des boutons interrupteurs. ```html
Enregistrer
``` L'exemple précédent crée un bouton simple qui sera le premier à obtenir le focus. Toutefois, on devrait plutôt utiliser les éléments [` ``` > **Note :** Si on utilise `role="button"` plutôt que les éléments sémantiques ` Couper le son ``` #### CSS ```css button, [role="button"] { padding: 3px; border: 2px solid transparent; } button:active, button:focus, [role="button"][aria-pressed="true"] { border: 2px solid #000; } ``` #### JavaScript ```js function handleBtnClick(event) { toggleButton(event.target); } function handleBtnKeyDown(event) { // On vérifie si les touches Entrée ou Espace sont pressées if (event.key === " " || event.key === "Enter" || event.key === "Spacebar") { // Prise en charge de "Spacebar" pour IE11 // On empêche le défilement par défaut lorsque // la touche espace est utilisée event.preventDefault(); toggleButton(event.target); } } function toggleButton(element) { var audio = document.getElementById('audio'); // On vérifie si le bouton est pressé var pressed = (element.getAttribute("aria-pressed") === "true"); // On fait alterner aria-pressed vers l'état opposé element.setAttribute("aria-pressed", !pressed); // On modifie l'état de lecture du fichier audio if(pressed) { audio.pause(); } else { audio.play(); } } ``` #### Résultat {{EmbedLiveSample('Exemple_d\'interrupteur')}} ## Accessibilité Les boutons sont des contrôles interactifs et, à ce titre, peuvent recevoir le focus. Si le rôle `button` est ajouté à un élément qui ne peut recevoir le focus nativement (comme ``, `
` ou `

`), l'attribut `tabindex` devra être utilisé afin de permettre le focus sur le bouton. > **Attention :** Lorsqu'on utilise des liens avec le rôle `button`, il faut rajouter un gestionnaire d'évènement pour la touche Espace. En effet, les boutons s'activent avec Espace ou Entrée tandis que, nativement, les liens ne se déclenchent qu'avec Entrée. Lorsqu'on utilise le rôle `button`, les lecteurs d'écran annonce l'élément comme un bouton, généralement en énonçant « clic » suivi du nom accessible du bouton. Le nom accessible correspond au contenu de l'élément ou à la valeur de `aria-label` ou à l'élément référencé avec l'attribut `aria-labelledby`, ou à une description si elle existe. ## Bonnes pratiques Si un lien effectue l'action d'un bouton, fournir `role="button"` à l'élément permettra aux outils d'assistance de comprendre la fonction de l'élément. Toutefois, une meilleure solution consiste à ajuster l'aspect visuel afin qu'il corresponde à la fonction et au rôle ARIA. Lorsque c'est possible, il est recommandé d'utiliser les boutons HTML natifs (`