Saturday 29 June 2002

Accessibility tip 10: Define keyboard shortcuts

I had no idea that you could assign keyboard shortcuts to links and form fields in an HTML document. Today’s accessibility task was to define the following access keys:

  • Home page—Access Key 1
  • Skip to main contentAccess Key 2
  • Search boxAccess Key 4
  • FeedbackAccess Key 9

It’s been relatively smooth sailing for me until now, which I attribute mainly to a combination of CSS-positioning and Movable Type. Today I struck a snag or two.

When I tested the access keys in ie6win, only the Search Field (Access Key 4) worked. I checked back with Mark’s page and followed the link to Paul Bohman’s post on Access keys in IE6 (part of a discussion of accesskeys on the Web Accessibility Forum Mailing List). The last paragraph gives the answer:

By the way, I actually prefer the way that Netscape handles accesskeys. You don’t need to do anything extra to make them work. In Internet Explorer in Windows, you have to use the keyboard shortcut then you have to hit enter. The extra step severely reduces the efficiency of the technique, in my opinion.

Hitting the Enter key after pressing the Access Key did the trick. In Opera 6, none of the access keys worked whereas in Mozilla 1.0 they all worked (although the default “Google” text was not selected as it was in IE).

Access Key 1 (the Home Page) worked in Netscape 6.2 but I was unable to test the other two because my entire navigation panel has disappeared in Netscape 6.2! It’s all there in the source code so perhaps I’ve introduced some bug into the CSS but I have no idea what’s happened to it and it’s too late on a Friday night to investigate any further.

<edited>The problem was my recently introduced SiteMeter code. I moved it to just before the closing body tag and Netscape 6.2 happily displayed the navigation panel. Go figure.</edited>

I’ve summarized the results in the table below.

Support for accesskeys in different browsers
  Access Key 1
Home Page
Access Key 4
Search Field
Access Key 9
ie5win OK (requires Enter key) OK OK (requires Enter key)
ie6win OK (requires Enter key) OK OK (requires Enter key)
net6win OK OK OK
op6win No No No
moz6win OK OK (default text not selected) OK

Permalink | Technorati


Hmm, thanks for sharing this. Sadly, I have only one instance of three defined access keys that works - in Moz. The enter button did nothing for me in IE6.

Anyway, great site and thanks for sharing!


Posted by mike on 20 May 2003 (Comment Permalink)

This discussion is now closed. My thanks to everyone who contributed.

© Copyright 2007 Jonathon Delacour