-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathday_15_defining_keyboard_shortcuts.html
executable file
·206 lines (146 loc) · 11.2 KB
/
day_15_defining_keyboard_shortcuts.html
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Mirrored from diveintoaccessibility.info/day_15_defining_keyboard_shortcuts.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:31 GMT -->
<head>
<title>Day 15: Defining keyboard shortcuts - Dive Into Accessibility</title>
<link rel="start" title="Home page" href="index.html" />
<link rel="contents" title="Table of contents" href="table_of_contents.html" />
<link rel="search" title="Search this site" href="mt/mt-search.html" />
<link rel="help" title="Access features of this site" href="accessibility_statement.html" />
<link rel="author" title="Send feedback to the author" href="mailto:[email protected]" />
<link rel="copyright" title="Terms of use" href="terms_of_use.html" />
<link rel="up" title="Table of contents" href="table_of_contents.html" />
<link rel="first" title="Day 1: Jackie" href="day_1_jackie.html" />
<link rel="last" title="Accessibility statement" href="accessibility_statement.html" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="projection" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="css/aural.css" type="text/css" media="aural" />
<link rel="prev" href="day_14_adding_titles_to_links.html" title="Day 14: Adding titles to links" />
<link rel="next" href="day_16_not_opening_new_windows.html" title="Day 16: Not opening new windows" />
<script>_gaq=[['_setAccount','UA-7434570-7'],['_trackPageview']];(function(){var g=document.createElement('script');g.src='../www.google-analytics.com/ga.js';g.setAttribute('async','true');document.documentElement.firstChild.appendChild(g);})();</script>
</head>
<body>
<div id="logo"><div class="inner">
<h1 class="title">
<a href="index.html" accesskey="1">Dive Into Accessibility</a>
</h1>
<p>30 days to a more accessible web site</p>
<a class="skip" href="day_15_defining_keyboard_shortcuts.html#startnavigation">Skip to navigation</a>
<span class="divider"> </span>
</div></div>
<p></p>
<div id="main"><div class="inner">
<div class="entry">
<h2 class="entrysubject">Day 15: Defining keyboard shortcuts</h2>
<p class="firstparagraph">One of the least known features of <acronym title="hypertext markup language">HTML</acronym> is the <code>accesskey</code> attribute for links and forms, which allows the web designer to define keyboard shortcuts for frequently-used links or form fields. On Windows, you can press ALT + an access key; on Macintosh, you can press Control + an access key. If the access key is defined on a link, your browser will follow the link; if defined on a form field, your browser will set focus on that field. Internet Explorer has supported access keys since version 4, Netscape since version 6. Older browsers simply ignore them, with no harmful effect.</p>
<p>While there are no standards for which keys should be assigned to which features, here are some commonly-used keyboard shortcuts:</p>
<dl>
<dt>Access key 1</dt>
<dd>Home page</dd>
<dt>Access key 2</dt>
<dd>Skip to main content (the <a title="Day 11: Skipping over navigation links" href="day_11_skipping_over_navigation_links.html">navigation bar skip link</a>)</dd>
<dt>Access key 9</dt>
<dd>Feedback</dd>
</dl>
<h3>Who benefits?</h3>
<ol>
<li><a href="day_1_jackie.html">Jackie</a> benefits. When <a href="http://www.freedomscientific.com/fs_products/software_jaws.asp">JAWS</a> reads a link that defines an <code>accesskey</code>, it announces the access key as well. For example, the link <code class="sgmltag"><a href="/" accesskey="1">Home page</a></code> would be read by JAWS as "link: Home page, ALT + 1". Jackie can focus on the link by pressing <kbd>ALT+1</kbd>, then follow it by pressing <kbd>ENTER</kbd>.</li>
<li><a href="day_3_bill.html">Bill</a> benefits. Since Bill can not use a mouse effectively since his stroke, he relies on keyboard navigation and keyboard shortcuts to move around the page. Access keys are an excellent way for him to jump to common or frequently-used links. Bill can type <kbd>ALT+1</kbd>, and <a href="http://www.mozilla.org/">Mozilla</a> immediately follows the link that defines <code>accesskey="1"</code>. (Note: Mozilla does not announce access keys, which raises the question of how Bill would discover what they are. We will discuss this in a future tip.)</li>
</ol>
<h3>How to do it: home page link</h3>
<ul>
<li><p><strong>Movable Type</strong>: The default template does not have a link to the home page, so you should make your site name into a link, and give it an <code>accesskey</code>. Search your template for <code><$MTBlogName$></code>, and change it to this:</p>
<blockquote>
<p><code class="sgmltag"><a href="<$MTBlogURL$>" style="color:black; text-decoration:none" accesskey="1"><$MTBlogName$></a></code></p>
</blockquote>
</li>
<li><p><strong>Radio</strong>: search your template for <code>{siteName}</code>. It will probably be in a link, something like this:</p>
<blockquote>
<p><code class="sgmltag"><a href="<%radio.macros.weblogUrl ()%>" style="color:black; text-decoration:none"><%siteName%></a></code></p>
</blockquote>
<p>Simply add an <code>accesskey</code> attribute to the link, like this:</p>
<blockquote>
<p><code class="sgmltag"><a href="<%radio.macros.weblogUrl ()%>" style="color:black; text-decoration:none" <strong>accesskey="1"</strong>><%siteName%></a></code></p>
</blockquote>
</li>
<li><p><strong>Blogger</strong>: search your template for <code><$BlogTitle$></code>. If it's enclosed in an <code><a></code> tag, add the <code>accesskey="1"</code> attribute to the <code><a></code> tag, like the above Radio example. If your <code><$BlogTitle$></code> is <em>not</em> enclosed in an <code><a></code> tag, enclose it in one like this (insert your own home page address):</p>
<blockquote>
<p><code class="sgmltag"><a href="http://address/of/your/home/page" style="color:black; text-decoration:none" accesskey="1"><$BlogTitle$></a></code></p>
</blockquote>
</li>
</ul>
<h3>How to do it: skip navigation link</h3>
<p>Do you have a <a title="Day 11: Skipping over navigation links" href="day_11_skipping_over_navigation_links.html">link to skip over your navigation bar</a>? If so, give it an <code>accesskey="2"</code>.</p>
<blockquote>
<p><code class="sgmltag"><a class="skiplink" href="#startcontent" <strong>accesskey="2"</strong>>Skip over navigation</a></code></p>
</blockquote>
<h3>How to do it: feedback link</h3>
<p>Do you have a link to a feeback form, or a link to your email address? If so, give it an <code>accesskey="9"</code>.</p>
<blockquote>
<p><code class="sgmltag"><a href="mailto:[email protected]" accesskey="9">Email me</a></code></p>
</blockquote>
<p>Note: Radio weblogs generally have a link to a feedback form (the little envelope icon), but the link is generated by a macro, so you will not be able to add an <code>accesskey</code> to it.</p>
<p>Be sure to include each <code>accesskey</code> on each page of your web site; make these changes to all your relevant templates.</p>
<h3>Further reading</h3>
<ul>
<li><cite>Jukka Korpela</cite>: <a href="http://www.cs.tut.fi/~jkorpela/forms/accesskey.html">Improving accessibility with <code>accesskey</code> in <acronym title="hypertext markup language">HTML</acronym> forms and links</a>. Explains why all my suggested <code>accesskey</code> codes are numbers, instead of letters.</li>
<li><cite>Paul Bohman</cite>: <a href="http://www.webaim.org/discussion/mail_message.php?id=800">Access keys, <acronym title="Internet Explorer">IE</acronym>6</a>. Part of a discussion of <code>accesskey</code> on the <a href="http://www.webaim.org/discussion/">Web Accessibility Forum Mailing List</a>.</li>
</ul>
<p></p>
<span class="divider"> </span>
</div> <!--entry-->
<div class="pageturn"><div class="inner">
<a href="day_14_adding_titles_to_links.html"><< Day 14: Adding titles to links</a> |
<a href="table_of_contents.html">Contents</a>
| <a href="day_16_not_opening_new_windows.html">Day 16: Not opening new windows >></a>
<span class="divider"> </span>
</div></div> <!--pageturn-->
</div></div> <!--main-->
<div id="menu">
<a class="skip" name="startnavigation" id="startnavigation"></a>
<form action="http://www.google.com/cse"><p>Search this site:</p><p><input type="hidden" name="cx" value="014021643941856155761:j2rsjqy6z6g"><input type="hidden" name="ie" value="UTF-8"><input type="search" name="q" size="20" placeholder="powered by Google™"></p><p><input type="submit" name="sa" value="Search"></p></form>
</form>
<div class="menusection"><div class="inner">
<h2 class="invisibletitle">Site links</h2>
<a class="skip" href="day_15_defining_keyboard_shortcuts.html#endinternal">Skip over site links</a>
<ul>
<li><a title="accessibility features of this site" href="accessibility_statement.html" accesskey="0">Accessibility statement</a></li>
<li><a href="mt/mt-search.html" accesskey="4">Advanced search</a></li>
<li><a href="table_of_contents.html" accesskey="3">Table of contents</a></li>
<li><a href="by_person.html">Tips by person</a></li>
<li><a href="by_disability.html">Tips by disability</a></li>
<li><a href="by_design_principle.html">Tips by design principle</a></li>
<li><a href="by_web_browser.html">Tips by web browser</a></li>
<li><a href="by_publishing_tool.html">Tips by publishing tool</a></li>
<li><a title="send email to the author" href="mailto:[email protected]" accesskey="9">Feedback</a></li>
<li><a title="Copyright and licensing information" href="terms_of_use.html" accesskey="8">Terms of use</a></li>
</ul>
<a class="skip" id="endinternal"></a>
</div></div> <!--.menusection-->
<div id="footer"><div class="inner">
<address>Copyright © 2002 Mark Pilgrim</address>
</div></div> <!--footer-->
</div> <!--menu-->
<div id="navigation">
<p class="breadcrumb">You are here:
<a href="index.html">Home</a> >
<a href="table_of_contents.html">Table of contents</a> >
<span class="currentpage">Day 15: Defining keyboard shortcuts</span>
</p>
</div><!--navigation-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36045340-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
<!-- Mirrored from diveintoaccessibility.info/day_15_defining_keyboard_shortcuts.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:31 GMT -->
</html>