WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mega Menu

for

From: Birkir R. Gunnarsson
Date: Jan 9, 2017 4:24PM

Joseph
It all depends on the nature of the menu and, quite frankly, testing
with the users, I have not come across a clearcut answer.
The menu construct is a little tricky and screen reader support is not
perfect, though pretty good.
Actually Jaws in IE repeats each menu item twice (for no reason),
Firefox handles it correctly.

The menu role forces screen readers to go into forms mode, so they
start depending on you having done all the right keyboard navigation
and focus management.
It also depends on the users knowing the keyboard shortcuts.
* Pressing enter or space bar on a menu item with submenu opens the
submenu and puts focus on the first menuitem.
* arrow keys up and down cycle through menu items.
* escape key dismisses the menu and puts focus back on the menuitem.
* If this is a whole menubar (menu of menus) arrow keys right and left
navigate between adjacent menu triggers.

The spec says that the whole menu construct should be a single tab stop.
I have found that this is not intuitive so I have made each menu
trigger a tab stop, though users can also use arrow keys to navigate
between them.
You can go to http://www.statefarm.com and play with the navigation
menu in the header to see if you like that kind of construct better
than one that minimizes use of ARIA and uses more links and lists with
some keyboard navigation.
The cool thing about the State Farm menu construct, for sighted
keyboard only users, is that the menus drop down as soon as the
trigger (insurance, finances, claims, customer care) receives focus.

I personally don't have a clear answer or pference, though I have gone
with the full menu markup on a few of the constructs I have worked on.
Cheers




On 1/9/17, Joseph Sherman < <EMAIL REMOVED> > wrote:
> Against the ARIA specs, the Adobe Mega
> menu<http://adobe-accessibility.github.io/Accessible-Mega-Menu/>; chooses not
> to use role="menu" for the menu container and role="menuitem" so links in
> the global navigation will show up when a screen reader user executes a
> shortcut command to bring up a list of links in the page.
>
> Which is preferred by users?
>
> Joseph
>
> > > > >


--
Work hard. Have fun. Make history.