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

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

• javascript
• jquery
• html
• css

7 Answers 7

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

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

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.

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.

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

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

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

The former (set) is self-explanatory.

The accepted accesskey answer given by @dev-null-dweller looks okay for productivity and normal keyboard users.

But if you care about the truly accessibility, that is, make your app as inclusive as possible, at the very least you need to implement:

Speech users will be able to turn off single-key shortcuts so they can avoid accidentally firing batches of them at once. This will allow speech users to make full use of programs that offer single-key shortcuts to keyboard users.

This is from W3 accessibility success criteria.

In my opinion, it's hard to implement truly accessible hover-and-expand dropdown menus. We should avoid using this pattern if possible, and try other designs, e.g., table of content. For detail, check my blog article.

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