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

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 2

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

Answer 3

Give this menu script a try, one that I built for our state portal in Minnesota. It's keyboard-accessible (tab key to navigate through all levels), shows the path structure in which you're traversing down through, and supports up to a total of five levels (including the top level).

Top Menu: keyboard-accessible jquery menu.

It is presently limited to just a top, horizontal style navigation, but future versions will make it extensible to either a vertically or horizontally oriented menu.

It also has limited touch support (a little buggy with the iPhone/iPad), but I'm working on that as well to be more widely supported.