Keyboard Accessible Web Dropdown Menus?

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 (wh

Solution 1:

You can use accesskey attribute for anchor tag:

<ahref="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

Solution 2:

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

Solution 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.

Solution 4:

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.

Solution 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.