WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: keyboard navigation of menus

for

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

From: Jon Brundage
Date: Wed, Jul 31 2013 7:13AM
Subject: keyboard navigation of menus
No previous message | Next message →

Hello Group-

In the situation where a web site has a main menu bar which opens submenus, is there any consensus on the desired behavior for the visual keyboard user? Is it better to have the TAB key move through all the items sequentially, have special commands to open the submenus, or go to the parent pages and navigate to the sub-content from there?

Opinions appreciated! Thanks

Jon

From: deborah.kaplan@suberic.net
Date: Wed, Jul 31 2013 7:59AM
Subject: Re: keyboard navigation of menus
← Previous message | Next message →

Terrill Thompson has a blog post of excellent
examples that use a combination of tab plus arrow:

http://staff.washington.edu/tft/tests/menus/

I'm personally a fan of

http://staff.washington.edu/tft/tests/menus/yui3/index.html

And I am about to start using it on a production site. Keep in
mind I am going to have to make a clear documentation of how they
work and link to it from somewhere on the page about
accessibility, because users won't expect this behavior. I like
how this one works in both keyboard and screen reader.

-Deborah

On Wed, 31 Jul 2013, Jon Brundage wrote:

> Hello Group-
>
> In the situation where a web site has a main menu bar which opens submenus, is there any consensus on the desired behavior for the visual keyboard user? Is it better to have the TAB key move through all the items sequentially, have special commands to open the submenus, or go to the parent pages and navigate to the sub-content from there?
>
> Opinions appreciated! Thanks
>
> Jon
> > > >

From: Ken Petri
Date: Wed, Jul 31 2013 10:15AM
Subject: Re: keyboard navigation of menus
← Previous message | Next message →

Another worth looking at is the one that is part of the Canadian
government's WET toolkit:

http://wet-boew.github.io/wet-boew/demos/menubar/megamenu-eng.html#

Very sophisticated keyboard controls for the mega-menus and works well with
a screen reader. Also is responsive, if you're going for a RWD. Uses jQuery.

- ken



On Wed, Jul 31, 2013 at 9:59 AM, < = EMAIL ADDRESS REMOVED = > wrote:

> Terrill Thompson has a blog post of excellent
> examples that use a combination of tab plus arrow:
>
> http://staff.washington.edu/tft/tests/menus/
>
> I'm personally a fan of
>
> http://staff.washington.edu/tft/tests/menus/yui3/index.html
>
> And I am about to start using it on a production site. Keep in
> mind I am going to have to make a clear documentation of how they
> work and link to it from somewhere on the page about
> accessibility, because users won't expect this behavior. I like
> how this one works in both keyboard and screen reader.
>
> -Deborah
>
> On Wed, 31 Jul 2013, Jon Brundage wrote:
>
> > Hello Group-
> >
> > In the situation where a web site has a main menu bar which opens
> submenus, is there any consensus on the desired behavior for the visual
> keyboard user? Is it better to have the TAB key move through all the items
> sequentially, have special commands to open the submenus, or go to the
> parent pages and navigate to the sub-content from there?
> >
> > Opinions appreciated! Thanks
> >
> > Jon
> > > > > > > >
>
> > > >
>
>

From: Bryan Garaventa
Date: Wed, Jul 31 2013 10:22AM
Subject: Re: keyboard navigation of menus
← Previous message | No next message

As an FYI, regarding the sample at
http://staff.washington.edu/tft/tests/menus/yui3/index.html
The menu items that open submenus are lacking aria-haspopup=true on the
nodes with role=menuitem. As a result, the word "submenu" is not conveyed to
screen reader users, making the structure confusing to navigate in JAWS and
NVDA.

You can see the difference in feedback by testing the menu at
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Vertical%20(Internal%20Content)/demo.htm
Which does provide the correct feedback using JAWS and NVDA in both IE and
FF. This is part of the AccDC TSG at
http://whatsock.com/tsg/



----- Original Message -----
From: < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, July 31, 2013 6:59 AM
Subject: Re: [WebAIM] keyboard navigation of menus


> Terrill Thompson has a blog post of excellent
> examples that use a combination of tab plus arrow:
>
> http://staff.washington.edu/tft/tests/menus/
>
> I'm personally a fan of
>
> http://staff.washington.edu/tft/tests/menus/yui3/index.html
>
> And I am about to start using it on a production site. Keep in
> mind I am going to have to make a clear documentation of how they
> work and link to it from somewhere on the page about
> accessibility, because users won't expect this behavior. I like
> how this one works in both keyboard and screen reader.
>
> -Deborah
>
> On Wed, 31 Jul 2013, Jon Brundage wrote:
>
>> Hello Group-
>>
>> In the situation where a web site has a main menu bar which opens
>> submenus, is there any consensus on the desired behavior for the visual
>> keyboard user? Is it better to have the TAB key move through all the
>> items sequentially, have special commands to open the submenus, or go to
>> the parent pages and navigate to the sub-content from there?
>>
>> Opinions appreciated! Thanks
>>
>> Jon
>> >> >> >>
>
> > >