E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Vincent Young
Date: Thu, Sep 01 2011 6:36PM
Subject: Proper Drop-Down Menu Keyboard Functionality
No previous message | Next message →

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 ADDRESS REMOVED =
w: http://www.webhipster.com

From: Jason Kiss
Date: Thu, Sep 01 2011 7:39PM
Subject: Re: Proper Drop-Down Menu Keyboard Functionality
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
> w: http://www.webhipster.com
>

From: Vincent Young
Date: Thu, Sep 01 2011 8:06PM
Subject: Re: Proper Drop-Down Menu Keyboard Functionality
← Previous message | No next message

> 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> > w: http://www.webhipster.com
> >