by Larisa Thomason,
Senior Web Analyst,
Most people don't think much about keyboard navigation on Web sites. At least not until they buy a laptop and try to control the cursor with that little pencil eraser thing or use a touch screen. It sometimes seems as though you need the hand-eye coordination of a space shuttle pilot just to get the cursor where you want it.
Did you ever consider that some of your visitors always use their keyboards for navigation? Use the Accesskey attribute with your page elements to make their visit to your site more enjoyable.
Easier Site Navigation
A lot of effort goes towards making Web sites accessible to people with visual impairments. Previous newsletters have covered various techniques that help screen readers and other assistive technologies interpret your content. That's important, but don't stop there.
Visitors with severe arthritis, carpal tunnel syndrome, multiple sclerosis, or other problems often have trouble using a mouse. Instead, they navigate through sites using their keyboards. Clicking a single key or combination is a lot easier than trying to position a mouse just so to click on a link or menu option.
The accesskey attribute, introduced in HTML 4.0, simplifies keyboard navigation. It's simple to include but browser compatibility is a concern. The attribute only supported by the latest browsers (IE 5.x+ and NS 6.x) on Windows systems.
Create Keyboard Shortcuts
When you include the accesskey attribute, you're creating a keyboard shortcut sequence that's unique to your Web site. Think about how shortcuts work in a word processing program in Windows: Control-S to save the document, Control-N to open a new document, etc.
The accesskey attribute works the same way. Visitors can select an option by holding down the ALT key and pressing whatever key you have defined for that option.
The syntax is simple. Here are a few examples:
accesskey=w>NetMechanic newsletters (Alt-W)</a>
ZIP Code: <input type="text" name="zip"
accesskey=z size=5> (Alt-Z)
<input type="submit" accesskey=s>
(Alt-S to submit form)
ACCESSKEY is a valid attribute for many HTML tags, including:
Right now, there's no standard way to indicate where you have an accesskey defined. Many Web sites include the information in parentheses next to the appropriate element. We used that method in our examples above.
Here are some specific uses of the accesskey attribute that make your site more accessible:
- Internal Page Navigation: Use the accesskey attribute on your named anchors inside the document. Visitors could select Alt-N for the navigation bar, Alt-C for the main content section or a particular subsection, etc. This is particularly helpful if you have a long document.
- Form Navigation: Give visitors a way to navigate through your form, reset it, or submit it by including the accesskey attribute with all your input elements.
- External Links: This is especially helpful if you have a links page. Number your links and set the accesskey attribute for that link to equal the link's number. Like this:
1. The Washington Post (Alt-1)
2. The Times of London (Alt-2)
3. The Times of India (Alt-3)
4. Le Monde (Alt-4)
Since the accesskey equals the link number, the pattern is easy to understand.
Select your accesskeys carefully because they will override existing browser keyboard shortcuts. For instance, if you set an accesskey=e on your page, your visitors won't be able to open the Edit menu in Explorer using Alt-E.
Unfortunately, we can't give you a list of "standard" Alt key assignments in Explorer because they depend on the language of the user interface. The word "file" in English doesn't start with F in all languages remember! In the Finnish versions of Explorer, Alt-T opens the file menu. Keep this in mind if you have a large number of non-English speaking visitors.
Dealing With Browser Incompatibility
The accesskey attribute is an important component of overall Web site accessibility. It's a part of HTML 4.0. Explorer 5.x and 6.0 browsers support it. Netscape supports it in its 6.x versions. Perhaps other browsers will follow their example.
Consider including it on your pages anyway. It doesn't take up much space, won't break your page, and gives visitors with compatible browsers more options. Remember that many people without disabilities use mouse alternatives to navigate through Web sites.
Accesskey definitions are an easy, low-impact way to make your site more accessible to all visitors. Give them a try!