WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Proper Drop-Down Menu Keyboard Functionality

for

From: Vincent Young
Date: Sep 1, 2011 8:06PM

> 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/<;http://www.dingoaccess.com/accessibility/accessing-nav-drop-downs/>;

Thanks Jason. I had read this... to be honest, forgotten about it. So,
yeah, lots more variations on the drop-down! I guess I've never had good
data on what to do and where. Just don't like inconsistency on the web when
we are talking about functionality such as navigation drop-downs. A bunch
of different touch devices are hitting the market with a new set of
functionality and we don't seem to agree on the ol' keyboard functionality
yet. Scary... Hearing from the webaim community would make me feel more
comfortable with my own "opinions" on the subject.

On Thu, Sep 1, 2011 at 6:41 PM, Jason Kiss < <EMAIL REMOVED> >wrote:

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