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
|
---
title: accesskey
slug: Web/HTML/Global_attributes/accesskey
tags:
- Global attributes
- HTML
- Reference
- accesskey
- グローバル属性
translation_of: Web/HTML/Global_attributes/accesskey
---
<div>{{HTMLSidebar("Global_attributes")}}</div>
<p><code><strong>accesskey</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、現在の要素のショートカットキーを生成するためのヒントを与えます。この属性は空白で区切った表示可能な文字 (キーボードから生成できるアクセント付き文字やその他の文字を含む) から成ります。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<div class="note">
<p><strong>注</strong>: WHATWG の仕様書では、空白区切りの複数の文字を指定することができ、ブラウザーは対応する最初の一つを使用するとしています。しかし、これは多くのブラウザーでは動作しません。 IE や Edge は、他のコマンドと競合がない問題なく使用することができる最初の1つを使用します。</p>
</div>
<p>アクセスキーを有効にする方法は、ブラウザーやプラットフォームによって異なります。</p>
<table class="standard-table">
<tbody>
<tr>
<th></th>
<th>Windows</th>
<th>Linux</th>
<th>Mac</th>
</tr>
<tr>
<th>Firefox</th>
<td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td>
<td>Firefox 57 以降では <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> または <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br>
Firefox 14 以降では <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br>
Firefox 13 以前では <kbd>Control</kbd> + <kbd><em>key</em></kbd></td>
</tr>
<tr>
<th>Internet Explorer</th>
<td rowspan="3" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd><br>
<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td>
<td colspan="2" rowspan="1" style="text-align: center;">N/A</td>
</tr>
<tr>
<th>Edge</th>
<td style="text-align: center;">N/A</td>
<td rowspan="3" style="text-align: center;"><kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd><br>
<kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td>
</tr>
<tr>
<th>Google Chrome</th>
<td style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td>
</tr>
<tr>
<th>Safari</th>
<td colspan="2" style="text-align: center;">N/A</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 style="text-align: center;"><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> で、accesskey でアクセスできるコンテンツの一覧を開きます。そして <kbd><em>key</em></kbd> を押すと、該当項目を選択できます。</td>
</tr>
</tbody>
</table>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
<p><code>accesskey</code> 属性は、ブラウザーの対応が貧弱であることに加え、数々の考慮事項があります。</p>
<ul>
<li><code>accesskey</code> の値はシステムやブラウザーのショートカットキーや支援技術の機能と競合する可能性があります。あるオペレーティングシステム、支援技術、ブラウザーの組み合わせで動作しても、他の組み合わせでは動作しない可能性があります。</li>
<li>特に国際化を考慮している場合、特定の <code>accesskey</code> の値が特定のキーボードに存在しないことがあります。そのため、特定の言語において更なる問題が発生する可能性があります。</li>
<li>数字に依存した <code>accesskey</code> の値は、認知障碍を持つ人に混乱を招く可能性があります。数字には、起動する機能と論理的な関連性がありません。</li>
<li><code>accesskey</code> が存在することをユーザーに通知することで、ユーザーはその機能を認識します。システムがその機能について知らされる方法がない場合は、 <code>accesskey</code> が誤って有効になる可能性があります。</li>
</ul>
<p>これらの問題のため、一般用途のウェブサイトやウェブアプリの多くでは、 <code>accesskey</code> を使用しないよう一般的にアドバイスされています。</p>
<ul>
<li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM: Keyboard Accessibility - Accesskey</a></li>
</ul>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
<td>{{Spec2('HTML5.2')}}</td>
<td>現実の実装のためにもっと現実的な振る舞いを記述。</td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>最新の W3C の {{SpecName('HTML5.1')}} から変更なし。</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>{{SpecName('HTML5 W3C')}} から変更なし。</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>{{SpecName('HTML4.01')}} から <code>accesskey</code> に設定できる文字が増えました。また、任意の要素に設定できるようになりました。</td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }} 要素のみ対応。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.global_attributes.accesskey")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{domxref("Element.accessKey")}}</li>
<li>{{domxref("HTMLElement.accessKeyLabel")}}</li>
<li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li>
<li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts">aria-keyshortcuts</a></code></li>
</ul>
|
