WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mega Menu

for

From: Birkir R. Gunnarsson
Date: Jan 10, 2017 5:02AM

Detlev
How is the markup you describe different from ARIA menus (with the
alteration that the main menu items or menu triggers are in the tab
order)?


On 1/10/17, Detlev Fischer < <EMAIL REMOVED> > wrote:
> I would advise against using the ARIA menu construct for navigation menus.
> From years of experiencing other sites, many users expect to be able to tab
> through the main navigation items. Submenus may then open on focussing the
> main menu items or after hitting Enter, the latter giving the advantage that
> focus can be moved quickly through the main menu items (and beyond).
> I would reserve the ARIA menu construct for application style menus where
> using arrow keys will be more expected.
>
> Detlev
> --
> Detlev Fischer
> testkreis c/o feld.wald.wiese
> Thedestr. 2, 22767 Hamburg
>
> Mobil +49 (0)157 57 57 57 45
> Fax +49 (0)40 439 10 68-5
>
> http://www.testkreis.de
> Beratung, Tests und Schulungen für barrierefreie Websites
>
> Birkir R. Gunnarsson schrieb am 10.01.2017 00:24:
>
>> 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.
>> >> >> >> >>
>
> > > > >


--
Work hard. Have fun. Make history.