Keyboard short cuts save time and effort for users who work in a busy environment
and are also very helpful for screen reader users who rely on the keyboard as their
main input device. Older people and users with arthritis or limited dexterity also
find keyboard shortcuts very useful, as they are often easier to use than a mouse.
To create keyboard shortcuts, define them in HTML and bind them to a particular
action, such as following a hyperlink or submitting a form. To assign a keyboard
shortcut, you use the accesskey
attribute. You can set this attribute for the following tags: <a>,
<area>, <button>,
<input>, <label>,
<legend> and <textarea>.
This example shows a shortcut key for a link:
<a accesskey="H" href="index.html" title="Home page">Home
page</a>
This example shows shortcut keys to submit and clear a form:
<form>
<input type="text" name="text3" tabindex="4"><br>
<input type="text" name="text4" tabindex="3"><br>
<input type="text" name="text5" tabindex="2"><br>
<input type="text" name="text6" tabindex="1"><br>
<i>To send this form, press alt+s. to clear it, press alt+c.</i>
<p>
<input type="submit" accesskey="s">
<input type="clear" accesskey="c">
</form>
You should:
-
Explain keyboard shortcuts where they are provided. Inform users that keyboard
shortcuts are available, what the key combinations are and what they do. For
example the shortcut for the link to the home page could be displayed as follows:
Home (Alt+1). Alternatively, indicate a shortcut by an underline, bold text,
or use a capital for the letter defined as the accesskey
-
Provide a list of all the shortcuts on a separate page
-
Choose the combinations for keyboard shortcuts with care. Browsers have their
own keyboard shortcuts, for example Netscape assigns Alt H to Help, and keyboard
shortcuts created with the accesskey attribute override application level shortcuts.
If you assign CTRL + P to an action on a page, this would no longer activate
the browser's print command. This can easily confuse users, so it is important
to avoid using the mappings that are common to browsers. Considering the number
of browsers (Netscape, Internet Explorer, Lynx, Opera), each with their own keyboard
shortcuts, the list of shared, unassigned keyboard combinations is extremely
limiting. The numbers 0-9 are probably the safest
-
Provide keyboard shortcuts but do not rely on them. Not all browsers support
the accesskey feature
|
|
More information
An overview of the accessibility guidelines
Design for device-independence
Provide client-side image maps instead of server-side image maps
Ensure that any element that has its own interface can be operated in device-independent manner
Specify logical event handlers
Create a logical tab order
Provide keyboard shortcuts
|