WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mega Menu

for

From: Detlev Fischer
Date: Jan 10, 2017 6:04AM

Hi Birkir,
The main point is that the menu is not just one tab stop and supports tabbing rather than arrow navigation. Navigation submenu items as a simple list of links (i.e. not with ARIA role menuitem) then seem to suffice and make for lighter code / less opportunities to get some ARIA mark-up wrong. But I am happy to be corrected if there are advantages I haven't thought of.
Best, 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 13:02:

> 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.
> > > > >