Keyboard accessible web dropdown menus?

Question

Is there a way to build keyboard accessible dropdown menus on web sites? Our current web application has standard hover menus, but this really slows down our data entry clerks (who are accustomed to desktop apps where there's a keyboard accessible menu and no need to use a mouse).

We figured out how to show the menu with a keyboard shortcut, but I'm not sure how to select one of the entries (such as by using the first letter of the menu entry like in most desktop apps).

Edit - a link to a site that does this, or some other type of example, would be REALLY helpful

Answer 1

the short answer is yes - javascript and jquery events fired based on a given keypress would probably work best.

Answer 2

You need to listen for keypresses while the menu is open, the have your code move the selected position.

8 = backspace, 13 = return, 27 = esc, 40 = down, 38 = up etc. These are just ASCII values of the keypresses.

Answer 3

Easiest way would be adding accesskeys to the menu links. It's a feature designed for exactly that function.

Answer 4

You can use accesskey attribute for anchor tag:

<a href="something.html" accesskey="s">[S]omething</a>

but keyboard shortcut to use this differs across all the browsers:

• IE: Alt + accesskey, Enter
• FireFox: Alt + Shift + accesskey
• Opera: Shift + Esc + accesskey
• Chrome: Alt + accesskey

Answer 5

Key events:
http://api.jquery.com/keypress/
http://api.jquery.com/keydown/
http://api.jquery.com/keyup/

CSS Menu, tab accessible:
http://carroll.org.uk/sandbox/suckerfish/bones2.html

The latter works by using the :focus pseudo-element. I've come across some caveats with the method described in the article, but it works.

The former (set) is self-explanatory.