1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
---
title: Utilisation du rôle button
slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button
tags:
- ARIA
- Accessibilité
- Role(2)
- Rôle
- À relire
translation_of: Web/Accessibility/ARIA/Roles/button_role
---
<h3 id="Description">Description</h3>
<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>
</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 <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 <code>aria-pressed</code> pour créer des boutons à bascule.</p>
<div class="note"><strong>Note :</strong> lorsque c’est possible, il est recommandé d’utiliser les boutons HTML natifs (<code><button></code>, <code><input type="button" /></code> et <code><input type="image" /></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>
<h4 id="Clavier_et_focus">Clavier et focus</h4>
<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><span></code>,<code><div></code> ou<code><p></code>), l’attribut <code>tabindex</code> devra être utilisé pour rendre le bouton focalisable.</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>
<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>
<h4 id="Boutons_à_bascule">Boutons à bascule</h4>
<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>
<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>
</ul>
<h4 id="Labelliser_les_boutons">Labelliser les boutons</h4>
<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>
<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>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>
<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>
<h3 id="Exemples">Exemples</h3>
<h4 id="Exemple_1_un_bouton_simple">Exemple 1 : un bouton simple</h4>
<p>Dans l’extrait de code ci-dessous, on donne le rôle <code>button</code> à un élément <code><span></code>. Parce qu’un élément <code><span></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><span></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>
<pre class="brush: html"><span role="button" tabindex="0" onclick="handleBtnClick()" onKeyUp="handleBtnKeyUp()">Enregistrer</span></pre>
<h4 id="Exemple_2_un_bouton_à_bascule">Exemple 2 : un bouton à bascule</h4>
<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><button></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>
<pre class="brush: html"><!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>
</pre>
<h4 id="Exemples_concrets">Exemples concrets :</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>
<h3 id="Notes">Notes</h3>
<h3 id="Attributs_ARIA_utilisés">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>
</ul>
<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
<h3 id="Compatibilité">Compatibilité</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>
<h3 id="Autres_ressources">Autres ressources</h3>
|
