WebAIM - Web Accessibility In Mind

E-mail List Archives

Proper Drop-Down Menu Keyboard Functionality

for

From: Vincent Young
Date: Sep 1, 2011 6:36PM

Hi all,

I'd like to get some feedback on drop-down menus (used in primary
navigation). I've been gathering some examples of drop-down menus and there
is quite a bit of variation. Here are a few implementation I have found:

http://www.knowbility.org/ <http://www.knowbility.org/%20>;
- Their implementation seems to take from the AOL DHTML Style Guide (
http://dev.aol.com/dhtml_style_guide). In this implementation only the
first level menu items are TAB navigable. If a first level menus item has
focus, pressing the right/left arrow moves focus. Once focus is received
the sub-menu is exposed and this menus is navigated via the up/down arrow
keys.
(Does attempting to mimick an application menu for a web page primary
navigation make sense for keyboard users?)

http://oaa-accessibility.org/example/25/
- Here is a menu implemented with ARIA completely mimicking the keyboard
controls on a PC application menu.
(Does implementing the keyboard functionality and ARIA here for a main
navigation menu make sense? If no, should we use any ARIA mark-up?)

http://www.blakehaswell.com/lab/dropdown/deux/
- All top-level and sub-menu items are TAB navigable. The sub-menu is
exposed and TAB navigable once it's top-level menu item receives focus.
Arrowing is disabled.
(Does allowing TAB navigating to all menu items make sense or a bit
over-kill?)

http://www.udm4.com/demos/horizontal-absolute-top-left.php
- Implementation is a blend of the prior two examples.
(I know it has been around a while but does udm4 seems to have the best of
both from the two examples above?)

http://www.nomensa.com/
- Only the top level menu is TAB navigable. Sub-menu items are exposed on
subsequent pages.
(Just thought I'd throw this in as an example...)

http://www.statefarm.com/
- Not so much an example of keyboard functionality, but general usability in
that EVERY sub-menu item is visible when the top level navigation is
focused.
(Seems to make a lot of sense for general usability/cognitive reasons.)

It would be nice to hear from the keyboard user community to find out what
is preferred when it comes to drop-down menus. There is a lot of variation
out there and I'm wondering if this all becomes overwhelming and confusing.
What is the direction the web accessibility community is going and/or how do
you feel about it? Any usability study information on this matter would be
very helpful. If there has been a previous discussion on the topic, I'd
appreciate being pointed to the right direction.

Thanks.

Best,
Vincent

--
WebHipster Interactive, ltd.
Vincent Young - Principal
33 E. Lincoln St.
Columbus, OH 43215
p: 614.607.3400
f: 339-674-3400
e: <EMAIL REMOVED>
w: http://www.webhipster.com