[Fix] aria-pressed w3 link (#780)

* Fix aria-pressed w3 link

Fix the link to w3 aria-pressed.

* Update fr vs en-US (par w/ d03822c)

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 261 insertions, 79 deletions

diff --git a/files/fr/web/accessibility/aria/roles/button_role/index.html b/files/fr/web/accessibility/aria/roles/button_role/index.html
index ea95687801..23a3e0bc2e 100644
--- a/files/fr/web/accessibility/aria/roles/button_role/index.html
+++ b/files/fr/web/accessibility/aria/roles/button_role/index.html
@@ -1,124 +1,306 @@
 ---
-title: Utilisation du rôle button
+title: 'ARIA : le rôle button'
 slug: Web/Accessibility/ARIA/Roles/button_role
 tags:
   - ARIA
-  - Accessibilité
-  - Role(2)
-  - Rôle
-  - À relire
+  - 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
 ---
-<h3 id="Description">Description</h3>
+<p class="summary">Le rôle <strong><a href="https://www.w3.org/WAI/PF/aria/roles#button">button</a></strong> devrait être utilisé pour les éléments cliquables qui déclenchent une réponse lorsqu'activés par l'utilisateur. Ajouter <code>role="button"</code> 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 <code>aria-pressed</code> afin de créer des boutons interrupteurs.</p>
 
-<div class="summary">
-<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#button" title="http://www.w3.org/TR/wai-aria/roles#button">button</a>.</p>
+<pre class="brush: html">&lt;div id="saveChanges" tabindex="0" role="button" aria-pressed="false"&gt;Enregistrer&lt;/div&gt;</pre>
+
+<p>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 <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> avec <code>type="button"</code> pour représenter des boutons :</p>
+
+<pre class="brush: html">&lt;button id="saveChanges"&gt;Enregistrer&lt;/button&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Si on utilise <code>role="button"</code> plutôt que les éléments sémantiques <code>&lt;button&gt;</code> ou <code>&lt;input type="button"&gt;</code>, il faudra : permettre à l'élément de recevoir le focus, définir des gestionnaires d'évènements pour <a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a> et <a href="/fr/docs/Web/API/Document/keydown_event"><code>keydown</code></a>, y compris la gestion des touches <kbd>Entrée</kbd> et <kbd>Espace</kbd>, afin de traiter la saisie de l'utilisateur. Voir <a href="https://www.w3.org/TR/wai-aria-practices/examples/button/button.html">l'exemple de code officiel de WAI-ARIA</a>.</p>
 </div>
 
-<p>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, <code>role="button</code> peut faire apparaître n’importe quel élément (par exemple &lt;p&gt;, &lt;span&gt; ou &lt;div&gt;) 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 <code>aria-pressed</code> pour créer des boutons à bascule.</p>
+<h2 id="description">Description</h2>
 
-<div class="note"><strong>Note :</strong> lorsque c’est possible, il est recommandé d’utiliser les boutons HTML natifs (<code>&lt;button&gt;</code>, <code>&lt;input type="button" /&gt;</code> et <code>&lt;input type="image" /&gt;</code>) plutôt que le rôle <code>button</code>, 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.</div>
+<p>Le rôle <code>button</code> identifie un élément comme étant un bouton pour les lecteurs d'écran. Un bouton est un contrôle graphique qui permet d'effectuer des actions comme soumettre un formulaire, ouvrir une boîte de dialogue, annuler une action ou effectuer une commande (par exemple ajouter un nouvel enregistrement ou afficher des informations).</p>
 
-<h4 id="Clavier_et_focus">Clavier et focus</h4>
+<p>Pour indiquer qu'un bouton déclenchera l'ouverture d'une boîte de dialogue, on pourra utiliser la convention qui consiste à ajouter une ellipse (…) après l'étiquette du bouton, par exemple : "Enregistrer sous…".</p>
 
-<p>Les boutons sont des contrôles interactifs et doivent donc être focalisables. Si le rôle <code>button</code> est ajouté à un élément qui n’est par lui-même pas focalisable (tels que <code>&lt;span&gt;</code>,<code>&lt;div&gt;</code> ou<code>&lt;p&gt;</code>), l’attribut <code>tabindex</code> devra être utilisé pour rendre le bouton focalisable.</p>
+<p>En complément <code>role="button"</code> devrait également être utilisé pour les interrupteurs ou les menus qui n'utilisent pas l'élément HTML <code>&lt;button&gt;</code>. Un interrupteur est un bouton à deux états qui peut être éteint ou actif. Les valeurs de l'attribut <code>aria-pressed</code> : <code>true</code> ou <code>false</code> permettront d'identifier un bouton comme étant un interrupteur. Un bouton de menu permet, comme son nom l'indique, de contrôler un menu et possède un attribut <code>aria-haspopup</code> qui vaut <code>menu</code> ou <code>true</code>.</p>
 
-<p>Les boutons doivent pouvoir être actionnés tant par une souris qu’avec un clavier. Pour les boutons HTML natifs, l’évènement <code>onclick</code> du bouton sera déclenché par les clics de souris et lorsque la <kbd>barre d’espace</kbd> ou la touche <kbd>entrée</kbd> est actionnée alors que le bouton a le focus. Si <code>role="button"</code> est utilisé pour créer un bouton personnalisé, l’évènement <code>onclick</code> 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 les touches <kbd>barre d’espace</kbd> ou <kbd>entrée</kbd> sont pressées.</p>
+<h3 id="associated_aria_roles_states_and_properties">Rôles, propriétés et états ARIA associés</h3>
 
-<div class="warning"><strong>Attention :</strong> faites attention à l’utilisation de rôle <code>button</code> pour des liens. Les boutons devraient être actionnés à l’aide de la <kbd>barre d’espace</kbd> ou la touche <kbd>entrée</kbd>, alors qu’on s’attend à ce que les liens soient déclenchés avec la touche <kbd>Entrée</kbd>. En d’autres termes, lorsque des liens sont utilisés comme des boutons, le seul ajout de <code>role="button"</code> n’est pas suffisant. Il est également nécessaire d’ajouter un gestionnaire d’évènement clavier qui surveillera la <kbd>barre d'espace</kbd> afin d’être cohérent avec les boutons natifs.</div>
+<dl>
+ <dt><code>aria-pressed</code></dt>
+ <dd>Définit le bouton comme étant un interrupteur. La valeur de <code>aria-pressed</code> décrit l'état du bouton. Les valeurs utilisables incluent <code>aria-pressed="false"</code> pour indiquer qu'un bouton n'est pas pressé, <code>aria-pressed="true"</code> pour indiquer qu'un bouton est pressé et <code>aria-pressed="mixed"</code> pour indiquer que le bouton est partiellement pressé. Si cet attribut est omis ou qu'il utilise la valeur par défaut <code>aria-pressed="undefined"</code>, on ne pourra pas appuyer sur l'élément.</dd>
+ <dt><code>aria-expanded</code></dt>
+ <dd>Si le bouton contrôle un groupe d'autres éléments, l'état <code>aria-expanded</code> indique si le groupe contrôlé est développé ou replié. Si le bouton a <code>aria-expanded="false"</code>, le groupe n'est pas développé ; si le bouton a <code>aria-expanded="true"</code>, cela indique qu'il est actuellement développé ; si le bouton a <code>aria-expanded="undefined"</code> ou que l'attribut est absent, cela indique que le groupe ne peut pas être développé.</dd>
+</dl>
 
-<h4 id="Boutons_à_bascule">Boutons à bascule</h4>
+<h3 id="basic_buttons">Boutons simples</h3>
 
-<p>Un des avantages de l’utilisation de <code>role="button"</code> 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 <code>aria-pressed</code> en plus du rôle <code>button</code> :</p>
+<p>Les boutons devraient toujours avoir un nom accessible. Pour la plupart des boutons, le nom sera le même que le texte écrit à l'intérieur du bouton. Dans certains cas, par exemple pour les boutons représentés par une icône, le nom accessible pourra être fourni par l'attribut <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> ou <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code>.</p>
+
+<h3 id="toggle_buttons">Interrupteurs</h3>
+
+<p>Un interrupteur possède généralement deux états : activé ou désactivé. Un troisième état hybride est disponible pour les interrupteurs qui contrôlent d'autres éléments tels que d'autres interrupteurs ou cases à cocher qui n'ont pas tous la même valeur. On pourra indiquer qu'un élément est un interrupteur ou non via l'attribut <code>aria-pressed</code> en complément du rôle <code>button</code> (si l'élément n'est pas déjà un élément de bouton natif) :</p>
 
 <ul>
- <li>Si <code>aria-pressed</code> n’est pas utilisé, le bouton n’est pas un bouton à bascule ;</li>
- <li>Si <code>aria-pressed="false"</code> est utilisé, le bouton est un bouton à bascule au repos ;</li>
- <li>Si <code>aria-pressed="true"</code> est utilisé, le bouton est un bouton à bascule actionné ;</li>
- <li>Si <code>aria-pressed="mixed"</code> est utilisé, le bouton est considéré comme étant partiellement actionné.</li>
+ <li>Si <code>aria-pressed</code> n'est pas utilisé ou qu'il est défini avec l'état <code>"undefined"</code>, le bouton n'est pas un interrupteur.</li>
+ <li>Si <code>aria-pressed="false"</code> est utilisé, le bouton est un interrupteur qui n'est pas actif/pressé.</li>
+ <li>Si <code>aria-pressed="true"</code> est utilisé, le bouton est un interrupteur qui est actif/pressé.</li>
+ <li>Si <code>aria-pressed="mixed"</code> est utilisé, le bouton est considéré comme partiellement actif.</li>
 </ul>
 
-<h4 id="Labelliser_les_boutons">Labelliser les boutons</h4>
+<p>On peut, par exemple, avoir un bouton « Couper le son » sur un lecteur audio. Dans ce cas, on peut indiquer que le son est éteint lorsque l'état <code>aria-pressed</code> vaut <code>true</code>. Le libellé utilisé pour un interrupteur ne doit pas changer lorsque l'état change. Dans notre exemple, le libellé reste « Couper le son » et un lecteur d'écran indiquera « L'interrupteur couper le son est actif" ou « L'interrupteur couper le son est inactif » selon la valeur de <code>aria-pressed</code>. Si on souhaite avoir un changement de libellé et passer de « Couper le son » à « Réactiver le son », un interrupteur ne serait pas approprié et <code>aria-pressed</code> devrait alors être évité.</p>
+
+<h3 id="keyboard_interactions">Interactions au clavier</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Touche</th>
+   <th scope="col">Fonction</th>
+  </tr>
+  <tr>
+   <td><kbd>Entrée</kbd></td>
+   <td>Activer le bouton</td>
+  </tr>
+  <tr>
+   <td><kbd>Espace</kbd></td>
+   <td>Activer le bouton</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Une fois le bouton activé, la gestion du focus dépendra du type d'action effectuée par le bouton. Ainsi, si cliquer sur le bouton déclenche l'ouverture d'une boîte de dialogue, le focus doit passer à cette boîte de dialogue. Si le bouton ferme une boîte de dialogue, le focus doit revenir sur le bouton qui permet d'ouvrir la boîte à moins que la fonction de la boîte de dialogue mène logiquement à un autre élément. Si le bouton modifie le contexte courant, le focus reste généralement sur le bouton (par exemple pour couper/remettre le son).</p>
+
+<h3 id="required_javascript_features">Fonctionnalités JavaScript nécessaires</h3>
+
+<h4 id="required_event_handlers">Gestionnaires d'évènements nécessaires</h4>
+
+<p>Les boutons peuvent être manipulés avec une souris, le toucher et le clavier. Pour les éléments HTML natifs <code>&lt;button&gt;</code>, l'évènement <code>onclick</code> du bouton est déclenché lors du clic de la souris ou lorsque l'utilisateur utilise la touche <kbd>Espace</kbd> ou <kbd>Entrée</kbd> lorsque le bouton a le focus. Si un autre élément est utilisé pour créer un bouton, l'évènement <code>onclick </code> ne se déclenche qu'au clic de la souris, y compris lorsqu'on utilise <code>role="button"</code>. C'est pour cette raison qu'on doit ajouter des gestionnaires d'évènements distincts à l'élément afin de réagir aux appuis sur les touches <kbd>Espace</kbd> ou <kbd>Entrée</kbd>.</p>
+
+<dl>
+ <dt><code>onclick</code></dt>
+ <dd>Gère l'évènement déclenché lorsque le bouton est activé avec un clic de souris ou au toucher.</dd>
+ <dt><code>onKeyDown</code></dt>
+ <dd>Gère l'évènement déclenché lorsque le bouton est activé à l'aide de la touche <kbd>Espace</kbd> ou <kbd>Entrée</kbd> du clavier (attention, il ne s'agit pas de l'évènement déprécié <a href="/fr/docs/Web/API/Document/keypress_event"><code>onKeyPress</code></a>).</dd>
+</dl>
+
+<h4 id="changing_attribute_values">Modifier les valeurs des attributs</h4>
+
+<h5 id="aria-pressed">aria-pressed</h5>
+
+<p>La valeur de <code>aria-pressed</code> définit l'état d'un interrupteur. Cet attribut peut avoir l'une des quatre valeurs suivantes :</p>
+
+<ul>
+  <li><code>true</code>,</li>
+  <li><code>false</code>,</li>
+  <li><code>mixed</code>,</li>
+  <li><code>undefined</code>.</li>
+</ul>
+
+<h2 id="examples">Exemples</h2>
+
+<h3 id="basic_button_example">Exemple de bouton simple</h3>
+
+<p>Dans cet exemple, on a un élément <code>&lt;span&gt;</code> pour lequel on a mis le rôle <code>button</code>. Comme il s'agit d'un élément <code>&lt;span&gt;</code>, l'attribut <code>tabindex</code> est nécessaire pour permettre au bouton de recevoir le focus et de s'inscrire dans l'ordre des tabulations. Le style CSS inclus permet de transformer visuellement l'élément <code>&lt;span&gt;</code> afin qu'il ressemble à un bouton et pour fournir une indication visuelle lorsque celui-ci a le focus.</p>
 
-<p>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 <code>aria-label</code> ou <code>aria-labelledby</code>.</p>
+<p>Les gestionnaires d'évènements <code>handleBtnClick</code> et <code>handleBtnKeyDown</code> exécutent l'action du bouton lorsqu'il est activé avec un clic de souris ou au clavier avec la touche <kbd>Espace</kbd> ou <kbd>Entrée</kbd>. Dans cet exemple, l'action consiste à ajouter un nouveau nom à une liste de noms.</p>
 
-<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3>
+<p>Vous pouvez essayer l'exemple en ajoutant un nom dans le champ texte. Le bouton ajoutera ensuite le nom à la liste.</p>
 
-<p>Lorsque le rôle <code>button</code> 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.</p>
+<h4 id="html">HTML</h4>
 
-<div class="note"><strong>Note :</strong> 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.</div>
+<pre class="brush: html">&lt;h1&gt;Exemple de bouton avec ARIA&lt;/h1&gt;
+&lt;ul id="nameList"&gt;&lt;/ul&gt;
+&lt;label for="newName"&gt;Saisissez votre nom :&lt;/label&gt;
+&lt;input type="text" id="newName"&gt;
+&lt;span role="button" tabindex="0" onclick="handleCommand(event)" onKeyDown="handleCommand(event)"&gt;Ajouter le nom&lt;/span&gt;</pre>
 
-<h3 id="Exemples">Exemples</h3>
+<h4 id="css">CSS</h4>
 
-<h4 id="Exemple_1_un_bouton_simple">Exemple 1 : un bouton simple</h4>
+<pre class="brush: css">[role="button"] {
+  padding: 2px;
+  background-color: navy;
+  color: white;
+  cursor: default;
+}
+[role="button"]:hover,
+[role="button"]:focus,
+[role="button"]:active {
+   background-color: white;
+   color: navy;
+}
+ul {
+    list-style: none;
+}</pre>
 
-<p>Dans l’extrait de code ci-dessous, on donne le rôle <code>button</code> à un élément <code>&lt;span&gt;</code>. Parce qu’un élément <code>&lt;span&gt;</code> est utilisé, l’attribut <code>tabindex</code> 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 <code>&lt;span&gt;</code> et que <code>hanldeBtnClick</code> et <code>handleBtnKeyUp</code> 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.</p>
+<h4 id="javascript">JavaScript</h4>
 
-<pre class="brush: html">&lt;span role="button" tabindex="0" onclick="handleBtnClick()" onKeyUp="handleBtnKeyUp()"&gt;Enregistrer&lt;/span&gt;</pre>
+<pre class="brush: js">function handleCommand(event) {
+  // Gère à la fois l'activation à la souris
+  // et au clavier
+  
+  // Les touches autres que Entrée et Espace ne devraient
+  // déclencher de commande
+  if (event instanceof KeyboardEvent &amp;&amp; event.key !== 'Enter' &amp;&amp; event.key !== ' ') {
+    return;
+  }
 
-<h4 id="Exemple_2_un_bouton_à_bascule">Exemple 2 : un bouton à bascule</h4>
+  // On récupère la valeur du nouveau nom à partir
+  // du champ en saisie
+  let newNameInput = document.getElementById('newName');
+  let name = newNameInput.value;
+  newNameInput.value = ''; // On vide le champ texte
+  newNameInput.focus();  // On passe le focus au champ texte pour
+                         // permettre la saisie d'un autre nom
 
-<p>Dans cet extrait de code, un bouton HTML natif est converti en un bouton à bascule à l’aide de l’attribut <code>aria-pressed</code>. Remarquez que l’attribut <code>tabindex</code> n’a pas à être utilisé ici car l’élément <code>&lt;button&gt;</code> est déjà focalisable par défaut. Lorsque le bouton est activé, la valeur de <code>aria-pressed</code> bascule entre <code>true</code> et <code>false</code> :</p>
+  // On évite d'ajouter des noms vides à la liste
+  if(name.length &gt; 0) {
+    listItem = document.createElement('li');
+    listItem.appendChild(document.createTextNode(name));
 
-<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
-&lt;html lang="fr"&gt;
-  &lt;head&gt;
-    &lt;meta charset="UTF-8"&gt;
-    &lt;title&gt;Exemple de rôle ARIA button&lt;/title&gt;
-    &lt;style type="text/css"&gt;
-      [role="button"] {
-       padding:3px;
-       border: 1px solid #CCC;
-      }
-      [role="button"][aria-pressed="true"] {
-       border: 2px solid #000;
-      }
-     &lt;/style&gt;
-    &lt;script type="text/JavaScript"&gt;
-      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)
-      }
+    // On ajoute le nouveau nom à la liste.
+    let list = document.getElementById('nameList');
+    list.appendChild(listItem);
+  }
+}</pre>
 
-      function handleBtnKeyUp(event) {
-        event = event || window.event;
-        if (event.keyCode === 32) { // contrôle la touche espace
-          handleBtnClick(event);
-        }
-      }
-    &lt;/script&gt;
-  &lt;/head&gt;
+<p>{{EmbedLiveSample("basic_button_example")}}</p>
+
+<h3 id="toggle_button_example">Exemple d'interrupteur</h3>
+
+<p>Dans le fragment qui suit, on convertit un élément <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a> en interrupteur grâce au rôle <code>button</code> et à l'attribut <code>aria-pressed</code>. Lorsque le bouton est activé, <code>aria-pressed</code> change de valeur et alterne entre <code>true</code> et <code>false</code>.</p>
+
+<h4 id="html_2">HTML</h4>
+
+<pre class="brush: html">&lt;button type="button" onclick="handleBtnClick()" onKeyDown="handleBtnKeyDown()"&gt;
+  Couper le son
+&lt;/button&gt;
+
+&lt;span role="button" tabindex="0"
+ aria-pressed="false" onclick="handleBtnClick(event)"
+ onKeyDown="handleBtnKeyDown(event)"&gt;
+  Couper le son
+&lt;/span&gt;
+
+&lt;audio id="audio" src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3"&gt;
+  Votre navigateur ne prend pas en charge l'élément &lt;code&gt;audio&lt;/code&gt;.
+&lt;/audio&gt;
 
-  &lt;body&gt;
-    &lt;button role="button" aria-pressed="false" onclick="handleBtnClick(event)" onKeyUp="handleBtnKeyUp(event)"&gt;Mode Édition&lt;/button&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
 </pre>
 
-<h4 id="Exemples_concrets">Exemples concrets :</h4>
+<h4 id="css_2">CSS</h4>
 
-<ul>
- <li>Exemples de boutons <a class="external" href="http://test.cita.illinois.edu/aria/button/index.php" title="Exemples de boutons ARIA"><abbr title="Illinois Center for Information Technology and Web Accessibility">ICITA</abbr> (en)</a> ;</li>
- <li><a class="external" href="http://www.paciellogroup.com/blog/misc/ARIA/togglebutton.html" title="Boutons à bascule ARIA">Exemples de boutons par Paciello Group (en)</a>.</li>
-</ul>
+<pre class="brush: css">button,
+[role="button"] {
+    padding: 3px;
+    border: 2px solid transparent;
+}
+
+button:active,
+button:focus,
+[role="button"][aria-pressed="true"] {
+    border: 2px solid #000;
+}
+</pre>
 
-<h3 id="Notes">Notes</h3>
+<h4 id="javascript_2">JavaScript</h4>
+
+<pre class="brush: 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") { // <a href="/fr/docs/Web/API/KeyboardEvent/key/Key_Values#whitespace_keys">Prise en charge de "Spacebar" pour IE11</a>
+    // 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();
+  }
+}</pre>
+
+<h4 id="result">Résultat</h4>
+
+<p>{{EmbedLiveSample('toggle_button_example')}}</p>
+
+<h2 id="accessibility_concerns">Accessibilité</h2>
+
+<p>Les boutons sont des contrôles interactifs et, à ce titre, peuvent recevoir le focus. Si le rôle <code>button</code> est ajouté à un élément qui ne peut recevoir le focus nativement (comme <code>&lt;span&gt;</code>, <code>&lt;div&gt;</code> ou <code>&lt;p&gt;</code>), l'attribut <code>tabindex</code> devra être utilisé afin de permettre le focus sur le bouton.</p>
+
+<div class="note">
+<strong>Attention !</strong> Lorsqu'on utilise des liens avec le rôle <code>button</code>, il faut rajouter un gestionnaire d'évènement pour la touche <kbd>Espace</kbd>. En effet, les boutons s'activent avec <kbd>Espace</kbd> ou <kbd>Entrée</kbd> tandis que, nativement, les liens ne se déclenchent qu'avec <kbd>Entrée</kbd>.</p>
+</div>
+
+<p>Lorsqu'on utilise le rôle <code>button</code>, 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 <code>aria-label</code> ou à l'élément référencé avec l'attribut <code>aria-labelledby</code>, ou à une description si elle existe.</p>
+
+<h2 id="best_practices">Bonnes pratiques</h2>
+
+<p>Si un lien effectue l'action d'un bouton, fournir <code>role="button"</code> à 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 (<code>&lt;button&gt;</code>, <code>&lt;input type="button"&gt;</code>, <code>&lt;input type="submit"&gt;</code>, <code>&lt;input type="reset"&gt;</code> et <code>&lt;input type="image"&gt;</code>) plutôt que le rôle <code>button</code>. En effet, les boutons HTML natifs sont pris en charge par l'ensemble des agents utilisateurs et outils d'assistance et satisfont aux règles de gestion du focus et du clavier, sans qu'il soit nécessaire d'ajouter des adaptations.</p>
+
+<h2 id="specifications">Spécifications</h2>
 
-<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3>
+<table class="standard-table">
+ <thead>
+  <tr>
+    <th scope="col">Spécification</th>
+    <th scope="col">État</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("ARIA","#button","button")}}</td>
+   <td>{{Spec2('ARIA')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("ARIA Authoring Practices","#button","button")}}</td>
+   <td>{{Spec2('ARIA Authoring Practices')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="aria_attributes_used">Attributs ARIA utilisés</h3>
 
 <ul>
- <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#button" title="http://www.w3.org/TR/wai-aria/roles#button">button</a></li>
- <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed">aria-pressed</a></li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria/roles#button">button</a></code></li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-pressed">aria-pressed</a></code></li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">aria-expanded</a></code></li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup">aria-haspopup</a></code></li>
 </ul>
 
-<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
-
-<h3 id="Compatibilité">Compatibilité</h3>
+<h3 id="Additional_resources">Ressources complémentaires</h3>
 
-<p class="comment">À 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.</p>
+<ul>
+ <li><a href="https://www.w3.org/TR/html5/dom.html#aria-usage-note">Sémantique native forte en HTML5</a></li>
+ <li><a href="https://www.w3.org/TR/aria-in-html/">Notes sur l'utilisation d'ARIA en HTML</a></li>
+ <li><a href="https://www.w3.org/TR/wai-aria-practices/examples/button/button.html">Exemple de code officiel WAI-ARIA</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/menubutton_role">Rôle ARIA <code>menubutton</code></a></li>
+</ul>
 
-<h3 id="Autres_ressources">Autres ressources</h3>
+<section id="Quick_links">
+  <ol>
+   <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles"><strong>Rôles WAI-ARIA</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>