Access Key Shortcuts
(Optional)
accesskey was included in HTML to provide a way for authors to provide keyboard shortcuts to frequently used links or form controls.
One of the major envisioned uses of accesskey was to improve accessibility of web resources to people with disabilities.
This potential has never been realized for various reasons, including:
- Conflicts with assistive technologies like screen readers
- Slow implementation by web browsers and differences in browser implementations
- Poor internationalization
- Lack of support in web browsers for identifying accesskeys to users
While accesskey does not enjoy wide spread success,
but they still maybe useful for providing consistent access to common page
structures. The three common structures found in many website are a
primary navigation bar, a content section and a search function.
Providing consistent and efficient access to these structures can be
accomplished through access keys and the use of internal links.
- Accesskey '1': Main content
- Accesskey '2': Search
- Accesskey '3': Main navigation bar
The use of numbers and a limited set of accesskeys eliminate many of the internationalization issues and makes the accesskey set easier for users to remember. There also needs to be author supplied information on the website indicating the presence of accesskeys.
Related articles
- Using Accesskeys - Is it worth it? (John Foliot)
HTML Markup
:accesskey- Can be defined for links and form controls on a web resource, including the following html elements:
a,area,button,input,label,legend, andtextarea
Related Accessibility Requirements
Section 508
- 1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links.
Web Content Accessibility Guidelines (WCAG 1.0)
Example
HTML Source Code
....
<!-- Links with accesskeys defined -->
<body>
<a href="#main" accesskey="1"></a><a href="#nav" accesskey="3"></a>
...
<!-- Targets of accesskey links -->
<div id="divnav">
<a name="nav"></a>
<ul id="nav" title="Main Navigation Bar">
....
<div id="content">
<a name="main"></a>
<h1>Navigation and Orientation</h1>
....
<!-- Accesskey assigned to form control -->
<form name="search" title="Search Website" action="search.php" method="post">
<label>Search Text <input accesskey="2" type="text" name="stext" size="15"></label>
<input type="submit" value="Start Search">
</form>
....
<!-- Documentation of the Accesskeys for users -->
<ul class="accesskey"><li> Accesskey 1: Main Content</li><li>Accesskey 3: Navigation Bar</li></ul>