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
|
---
title: accesskey
slug: Web/HTML/Global_attributes/accesskey
tags:
- Global attributes
- HTML
- Reference
- 단축키
translation_of: Web/HTML/Global_attributes/accesskey
---
<div>{{HTMLSidebar("Global_attributes")}}</div>
<p><span class="seoSummary"><code><strong>accesskey</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 현재 요소에 대한 키보드 단축키를 생성할 때 사용할 힌트를 제공합니다.</span> <code>accesskey</code> 속성의 값은 반드시 출력 가능한 단일 문자(키보드로 입력할 수 있는 글자)여야 합니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div>
<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
<div class="note">
<p><strong>참고</strong>: WHATWG 명세는 <code>accesskey</code>의 값에 공백으로 구분한 여러 개의 문자를 사용할 수 있고, 브라우저는 그 중 지원하는 첫 번째 문자를 사용한다고 되어 있습니다. 하지만 대부분의 브라우저는 이렇게 동작하지 않습니다. 단, 다른 명령과 충돌하지 않는 경우, IE/Edge에서는 지원되는 첫 번째 문자를 문제 없이 사용합니다.</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;">없음</td>
</tr>
<tr>
<th>Edge</th>
<td style="text-align: center;">없음</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;">없음</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>를 통해 접근 가능한 단축키 목록을 열고, 그 중에서 <kbd>key</kbd>를 눌러 선택합니다.</td>
</tr>
</tbody>
</table>
<h2 id="접근성_고려사항">접근성 고려사항</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="명세">명세</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">코멘트</th>
</tr>
<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") }}, {{ HTMLElement("textarea") }} 에서만 지원됨.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.global_attributes.accesskey")}}</p>
<h2 id="함께_보기">함께 보기</h2>
<ul>
<li>{{domxref("Element.accessKey")}}</li>
<li>{{domxref("HTMLElement.accessKeyLabel")}}</li>
<li>모든 <a href="/ko/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>
|
