WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Arrow Keys Navigable Hover Drop-Down Menu?


From: Bryan Garaventa
Date: Jun 21, 2012 1:54PM

No worries, glad to hear it :)

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

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.


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 REMOVED> >
To: "WebAIM Discussion List" < <EMAIL 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
> www.PaulJAdam.com
> @pauljadam on Twitter
> On Jun 21, 2012, at 1:51 PM, "Bryan Garaventa"
> < <EMAIL 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.
> > >