WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mega Menu

for

From: Detlev Fischer
Date: Jan 13, 2017 10:05AM

Just noting that this example may not be built with mobile UA and AT in mind, but not sure if others fare better in that respect. I just looked at it on iOS with Voiceover on and activating the main menu items (like 'about') doesn't seem to toggle expanded state. Menu items report 'expanded' even if they aren't (not sure whether this is mobile or even iOS specific behaviour).

Sent from phone

> Am 11.01.2017 um 02:09 schrieb Rakesh P < <EMAIL REMOVED> >:
>
> I was recommending Deque University mega menu example for a couple of years
> now. https://dequeuniversity.com/library/aria/menus/megamenu
>
>
> On Tue, Jan 10, 2017 at 6:34 PM, Detlev Fischer < <EMAIL REMOVED>
>> wrote:
>
>> 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.
>>> >>> >>> >>> >>>
>>
>> >> >> >> >>
> > > >