WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Proper Drop-Down Menu Keyboard Functionality

for

From: Jason Kiss
Date: Sep 1, 2011 7:39PM

Hi Vincent,

Just in case you haven't seen it, there's another useful article by Roger
Hudson on this topic at
http://www.dingoaccess.com/accessibility/accessing-nav-drop-downs/

Jason Kiss

On Fri, Sep 2, 2011 at 12:36 PM, Vincent Young < <EMAIL REMOVED> >wrote:

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