WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Arrow Keys Navigable Hover Drop-Down Menu?

for

From: Rabab Gomaa
Date: Jun 21, 2012 11:58AM

Hello Paul,

Check this example http://www.tc.gc.ca/eng/menu.htm. (not sure it works with VoiceOver)
Rabab
>>> "Paul J. Adam" < <EMAIL REMOVED> > 6/21/2012 12:41 pm >>>
Hi All, I'm looking for a hover drop-down menu that works with the keyboard arrow keys.

Typically you see a hover menu that may work with the keyboard but relies on the user tabbing through every single element which might get painful with a huge amount of menu items.

My favorite example I've found so far is from www.knowbility.org. The user can tab though main menu items and if they want to activate the sub menu items they press the down arrow keys to cycle through those. They can also use the right/left arrow keys to cycle through the main menu items and skip over sub menu items.

Knowbility's menu actually works well with VoiceOver also.

There are other examples of menus that work great with just the keyboard.
http://access.aol.com/aegis/#goto_menubar
http://www.oaa-accessibility.org/example/25/

But these examples fail with VoiceOver, there is no way to get to the sub menu items when VoiceOver is turned on.

I tried dissecting Knowbility's menu to make a simple single page example and everything works fine but only if I use their version of jQuery which is an old version combined with another JS framework, Sizzle.js. If I try to recreate their example using the latest version of jQuery it will not work.

Are there any JavaScript guru's who can simplify their example and get it working with a modern version of jQuery?

Or does anyone have another example or tutorial that works the same as Knowbility's example and works great with VoiceOver as well?

Thanks!


Paul J. Adam
Accessibility Evangelist
Deque Systems
<EMAIL REMOVED>
www.PaulJAdam.com
@pauljadam on Twitter