WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Arrow Keys Navigable Hover Drop-Down Menu?

for

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

From: Paul J. Adam
Date: Thu, Jun 21 2012 10:41AM
Subject: Arrow Keys Navigable Hover Drop-Down Menu?
No previous message | Next message →

Hi All, I'm looking for a hover drop-down menu that works with the keyboard arrow keys.

Typically you see a hover menu that may work with the keyboard but relies on the user tabbing through every single element which might get painful with a huge amount of menu items.

My favorite example I've found so far is from www.knowbility.org. The user can tab though main menu items and if they want to activate the sub menu items they press the down arrow keys to cycle through those. They can also use the right/left arrow keys to cycle through the main menu items and skip over sub menu items.

Knowbility's menu actually works well with VoiceOver also.

There are other examples of menus that work great with just the keyboard.
http://access.aol.com/aegis/#goto_menubar
http://www.oaa-accessibility.org/example/25/

But these examples fail with VoiceOver, there is no way to get to the sub menu items when VoiceOver is turned on.

I tried dissecting Knowbility's menu to make a simple single page example and everything works fine but only if I use their version of jQuery which is an old version combined with another JS framework, Sizzle.js. If I try to recreate their example using the latest version of jQuery it will not work.

Are there any JavaScript guru's who can simplify their example and get it working with a modern version of jQuery?

Or does anyone have another example or tutorial that works the same as Knowbility's example and works great with VoiceOver as well?

Thanks!


Paul J. Adam
Accessibility Evangelist
Deque Systems
= EMAIL ADDRESS REMOVED =
www.PaulJAdam.com
@pauljadam on Twitter

From: Rabab Gomaa
Date: Thu, Jun 21 2012 11:58AM
Subject: Re: Arrow Keys Navigable Hover Drop-Down Menu?
← Previous message | Next message →

Hello Paul,

Check this example http://www.tc.gc.ca/eng/menu.htm. (not sure it works with VoiceOver)
Rabab
>>> "Paul J. Adam" < = EMAIL ADDRESS REMOVED = > 6/21/2012 12:41 pm >>>
Hi All, I'm looking for a hover drop-down menu that works with the keyboard arrow keys.

Typically you see a hover menu that may work with the keyboard but relies on the user tabbing through every single element which might get painful with a huge amount of menu items.

My favorite example I've found so far is from www.knowbility.org. The user can tab though main menu items and if they want to activate the sub menu items they press the down arrow keys to cycle through those. They can also use the right/left arrow keys to cycle through the main menu items and skip over sub menu items.

Knowbility's menu actually works well with VoiceOver also.

There are other examples of menus that work great with just the keyboard.
http://access.aol.com/aegis/#goto_menubar
http://www.oaa-accessibility.org/example/25/

But these examples fail with VoiceOver, there is no way to get to the sub menu items when VoiceOver is turned on.

I tried dissecting Knowbility's menu to make a simple single page example and everything works fine but only if I use their version of jQuery which is an old version combined with another JS framework, Sizzle.js. If I try to recreate their example using the latest version of jQuery it will not work.

Are there any JavaScript guru's who can simplify their example and get it working with a modern version of jQuery?

Or does anyone have another example or tutorial that works the same as Knowbility's example and works great with VoiceOver as well?

Thanks!


Paul J. Adam
Accessibility Evangelist
Deque Systems
= EMAIL ADDRESS REMOVED =
www.PaulJAdam.com
@pauljadam on Twitter

From: Paul J. Adam
Date: Thu, Jun 21 2012 12:34PM
Subject: Re: Arrow Keys Navigable Hover Drop-Down Menu?
← Previous message | Next message →

Hi Rabab, thanks for that example. It does work well with VoiceOver, a bit differently than Knowbility's but likely the 2nd best example I've seen so far.

There really is so much work and code to put into making a accessible hover navigation menu that works with arrow keys. I'm not really a fan of hover nav menus and would instead avoid them and use well organized landing pages for each section of a site.

Paul J. Adam
Accessibility Evangelist
Deque Systems
= EMAIL ADDRESS REMOVED =
www.PaulJAdam.com
@pauljadam on Twitter

On Jun 21, 2012, at 12:58 PM, "Rabab Gomaa" < = EMAIL ADDRESS REMOVED = > wrote:

> Hello Paul,
>
> Check this example http://www.tc.gc.ca/eng/menu.htm. (not sure it works with VoiceOver)
> Rabab

From: Rabab Gomaa
Date: Thu, Jun 21 2012 12:39PM
Subject: Re: Arrow Keys Navigable Hover Drop-Down Menu?
← Previous message | Next message →

Hello Paul,

Glad it worked out. I also agree that organized landing pages with left navigation is better.

Rabab
>>> "Paul J. Adam" < = EMAIL ADDRESS REMOVED = > 6/21/2012 2:34 pm >>>
Hi Rabab, thanks for that example. It does work well with VoiceOver, a bit differently than Knowbility's but likely the 2nd best example I've seen so far.

There really is so much work and code to put into making a accessible hover navigation menu that works with arrow keys. I'm not really a fan of hover nav menus and would instead avoid them and use well organized landing pages for each section of a site.

Paul J. Adam
Accessibility Evangelist
Deque Systems
= EMAIL ADDRESS REMOVED =
www.PaulJAdam.com
@pauljadam on Twitter

On Jun 21, 2012, at 12:58 PM, "Rabab Gomaa" < = EMAIL ADDRESS REMOVED = > wrote:

> Hello Paul,
>
> Check this example http://www.tc.gc.ca/eng/menu.htm. (not sure it works with VoiceOver)
> Rabab

From: Bryan Garaventa
Date: Thu, Jun 21 2012 12:51PM
Subject: Re: Arrow Keys Navigable Hover Drop-Down Menu?
← Previous message | Next message →

"There really is so much work and code to put into making a accessible hover
navigation menu that works with arrow keys."

True, which is why I created all of the complex control templates at
WhatSock.com, including the ARIA Menu module at
http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm

For example, the ARIA Menu simply references standard list markup at
http://whatsock.com/modules/aria_tabs_menu_modules/files/menus.htm
So as you can see from the markup, there is no ARIA and no scripting. All of
this is configured automatically by AccDC to make widgets fully scalable in
any environment.

----- Original Message -----
From: "Paul J. Adam" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, June 21, 2012 11:34 AM
Subject: Re: [WebAIM] Arrow Keys Navigable Hover Drop-Down Menu?


> Hi Rabab, thanks for that example. It does work well with VoiceOver, a bit
> differently than Knowbility's but likely the 2nd best example I've seen so
> far.
>
> There really is so much work and code to put into making a accessible
> hover navigation menu that works with arrow keys. I'm not really a fan of
> hover nav menus and would instead avoid them and use well organized
> landing pages for each section of a site.
>
> Paul J. Adam
> Accessibility Evangelist
> Deque Systems
> = EMAIL ADDRESS REMOVED =
> www.PaulJAdam.com
> @pauljadam on Twitter
>
> On Jun 21, 2012, at 12:58 PM, "Rabab Gomaa" < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Hello Paul,
>>
>> Check this example http://www.tc.gc.ca/eng/menu.htm. (not sure it works
>> with VoiceOver)
>> Rabab
> > >

From: Paul J. Adam
Date: Thu, Jun 21 2012 1:34PM
Subject: Re: Arrow Keys Navigable Hover Drop-Down Menu?
← Previous message | Next message →

Thanks Bryan, I did try your ARIA menu but it's laid out a bit differently than what I'm looking for. It's more of a vertical menu than the standard horizontal hover menus that you see on most navigation menus.

I have tested your ARIA date picker and found that it worked very well in NVDA, JAWS, & VoiceOver.

Paul J. Adam
Accessibility Evangelist
Deque Systems
= EMAIL ADDRESS REMOVED =
www.PaulJAdam.com
@pauljadam on Twitter

On Jun 21, 2012, at 1:51 PM, "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = > wrote:

> "There really is so much work and code to put into making a accessible hover
> navigation menu that works with arrow keys."
>
> True, which is why I created all of the complex control templates at
> WhatSock.com, including the ARIA Menu module at
> http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
>
> For example, the ARIA Menu simply references standard list markup at
> http://whatsock.com/modules/aria_tabs_menu_modules/files/menus.htm
> So as you can see from the markup, there is no ARIA and no scripting. All of
> this is configured automatically by AccDC to make widgets fully scalable in
> any environment.

From: Bryan Garaventa
Date: Thu, Jun 21 2012 1:54PM
Subject: Re: Arrow Keys Navigable Hover Drop-Down Menu?
← Previous message | No next message

No worries, glad to hear it :)

Please let me know if you encounter any issues and I'll be happy to fix
them.

As a side note, all of the styling for the demos are controlled within the
style sheet "global.css", so you can change the coloration, layout, sizing,
and everything else about the menus for example, and never compromise the
accessibility of the controls.

E.G

Simply change the CSS to use the rule "float:left", then set a fixed width
for the horizontal menu and a smaller percentage size for the LI tags, and
then your menu would be a flyout menu instead of a vertical stacked menu
with the same keyboard accessibility.

----- Original Message -----
From: "Paul J. Adam" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, June 21, 2012 12:34 PM
Subject: Re: [WebAIM] Arrow Keys Navigable Hover Drop-Down Menu?


> Thanks Bryan, I did try your ARIA menu but it's laid out a bit differently
> than what I'm looking for. It's more of a vertical menu than the standard
> horizontal hover menus that you see on most navigation menus.
>
> I have tested your ARIA date picker and found that it worked very well in
> NVDA, JAWS, & VoiceOver.
>
> Paul J. Adam
> Accessibility Evangelist
> Deque Systems
> = EMAIL ADDRESS REMOVED =
> www.PaulJAdam.com
> @pauljadam on Twitter
>
> On Jun 21, 2012, at 1:51 PM, "Bryan Garaventa"
> < = EMAIL ADDRESS REMOVED = > wrote:
>
>> "There really is so much work and code to put into making a accessible
>> hover
>> navigation menu that works with arrow keys."
>>
>> True, which is why I created all of the complex control templates at
>> WhatSock.com, including the ARIA Menu module at
>> http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
>>
>> For example, the ARIA Menu simply references standard list markup at
>> http://whatsock.com/modules/aria_tabs_menu_modules/files/menus.htm
>> So as you can see from the markup, there is no ARIA and no scripting. All
>> of
>> this is configured automatically by AccDC to make widgets fully scalable
>> in
>> any environment.
>
> > >