Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Story on designing tables for web accessibility.
Disabled story search bar.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Tips on designing web access into your site.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 
Updated October 22, 2001

Accessibility Tip:
Keyboard Shortcuts With Accesskey

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
October 2001
Vol. 4, No. 19
 • Design Tip
 • Load Time Tip
 • Accessibility Tip
  

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:

<a href="http://www.netmechanic.com/news" 
  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:

  • A
  • Area
  • Input
  • Button
  • Textarea
  • Div
  • Label
  • Legend
  • Caption

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.

Specific Uses

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.

If you're really concerned about confusing visitors who use incompatible browsers, then consider using a JavaScript browser detection script to redirect them to an alternate page. Webmasters with good JavaScript programming skills could also create functions that insert accesskey information based on which browser the visitor is using.

Accesskey definitions are an easy, low-impact way to make your site more accessible to all visitors. Give them a try!



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.