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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
title: accesskey
slug: Web/HTML/Global_attributes/accesskey
tags:
- Attribut
- Attribut universel
- HTML
- Reference
translation_of: Web/HTML/Global_attributes/accesskey
original_slug: Web/HTML/Attributs_universels/accesskey
---
<div>{{HTMLSidebar("Global_attributes")}}</div>
<div>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>accesskey</strong></code> fournit une indication afin de générer un raccourci clavier pour l'élément courant. La valeur de cet attribut est une liste de caractères (un caractère étant ici un seul point de code Unicode) séparés par des espaces. Le navigateur utilisera le premier caractère qui est disponible selon la disposition du clavier utilisée.</div>
<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<p>La combinaison de touches utilisée pour le raccourci clavier dépend du navigateur et du système d'exploitation utilisés.</p>
<div class="note">
<p><strong>Note :</strong> La spécification WHATWG indique qu'il est possible d'indiquer des caractères séparés par plusieurs espaces, auquel cas le navigateur considèrera le premier qu'il prend en charge. Toutefois, cela ne fonctionne pas dans la plupart des navigateurs. Pour IE/Edge, c'est la première valeur prise en charge qui sera utilisée si celle-ci n'entre pas en conflit avec d'autres commandes.</p>
</div>
<table class="standard-table">
<thead>
<tr>
<th></th>
<th>Windows</th>
<th>Linux</th>
<th>Mac</th>
</tr>
</thead>
<tbody>
<tr>
<th>Firefox</th>
<td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>touche</em></kbd></td>
<td>
<p>Pour Firefox 57 et les versions ultérieures : <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>touche</em></kbd> ou <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd><br>
Pour Firefox 14 et les versions ultérieures : <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd><br>
Pour Firefox 13 et les versions antérieures : <kbd>Control</kbd> + <kbd><em>touche</em></kbd></p>
</td>
</tr>
<tr>
<th>Edge</th>
<td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
<td colspan="2" rowspan="1">N/A</td>
</tr>
<tr>
<th>Internet Explorer</th>
<td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
<td colspan="2" rowspan="1">N/A</td>
</tr>
<tr>
<th>Google Chrome</th>
<td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
<td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
</tr>
<tr>
<th>Safari</th>
<td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
<td>N/A</td>
<td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
</tr>
<tr>
<th>Opera 15+</th>
<td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
<td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
</tr>
<tr>
<th>Opera 12</th>
<td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd> ouvre une liste de contenu accessible via la touche <code>accesskey</code>, on peut alors ensuite choisir l'élément voulu grâce la touche <kbd><em>touche</em></kbd></td>
</tr>
</tbody>
</table>
<h2 id="Accessibilité">Accessibilité</h2>
<p>Au-delà de la prise en charge limitée des navigateurs, <code>accesskey</code> pose plusieurs problèmes :</p>
<ul>
<li>Un raccourci défini avec <code>accesskey</code> peut rentrer en conflit avec un raccourci du système ou du navigateur, voire avec un raccourci d'un outil d'assistance. Les raccourcis pouvant être différents entre les navigateurs, systèmes d'exploitation et les outils, il n'est pas certain qu'une combinaison qui fonctionne dans un cas puisse fonctionner partout.</li>
<li>Certains raccourcis définis avec <code>accesskey</code> peuvent ne pas être utilisés avec certains claviers, notamment lorsqu'on doit prendre en compte l'internationalisation.</li>
<li>Les raccourcis définis avec <code>accesskey</code> qui utilisent un nombre peuvent être source de confusion pour les personnes souffrant de problèmes cognitifs si le nombre n'a pas d'association logique avec la fonctionnalité déclenchée par le raccourci.</li>
<li>Il est nécessaire d'informer l'utilisateur qu'un raccourci est présent afin que celui-ci puisse être conscient de cette fonctionnalité. Sans méthode d'information, l'utilisateur pourra accidentellement déclencher les raccourcis définis avec <code>accesskey</code>.</li>
</ul>
<p>Étant donné ces raisons, il est généralement conseillé de ne pas utiliser <code>accesskey</code> pour les sites web et applications généralistes.</p>
<ul>
<li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM : accessibilité au clavier - <code>accesskey</code> (en anglais)</a></li>
</ul>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
<tr>
<td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
<td>{{Spec2('HTML5.2')}}</td>
<td>Un comportement plus réaliste est défini et correspond à ce qui est réellement implémenté.</td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Aucune modification depuis {{SpecName('HTML5.1')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>Aucune modification depuis {{SpecName('HTML5 W3C')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Plusieurs caractères peuvent être définis via cet attribut depuis {{SpecName('HTML4.01')}}. Cet attribut peut désormais être défini sur n'importe quel élément.</td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>L'attribut est uniquement pris en charge par {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("html.global_attributes.accesskey")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{domxref("Element.accessKey")}}</li>
<li>{{domxref("HTMLElement.accessKeyLabel")}}</li>
<li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
</ul>
|
