WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mega Menu

for

From: Detlev Fischer
Date: Jan 13, 2017 11:20PM

Just tested the Deque Mega Menu https://dequeuniversity.com/library/aria/menus/megamenu# <https://dequeuniversity.com/library/aria/menus/megamenu#>
quickly on a Mac with Safari. The submenus expand when activated, not when focused, which is fine (and they expand on mouseover).
What's different from what I expected is that the focus automatically moves to the first subindex item after activation.
This is one way of emphasising that the menu is no open - you don't need to tab or arrow onwards to get to the first item. The drawback is that the action on the main menu item is not a simple toggle action. But you can get back to the collapsed state (and your former focus point on the main menu items) hitting ESC.

> On 13 Jan 2017, at 23:01, Joseph Sherman < <EMAIL REMOVED> > wrote:
>
> Thanks. If the sub-menus open when focused, does Tab go into the sub-menu or just to main items?
> Also, how does a screen reader user know it's a sub-menu or that it's expanded?
> For example on https://www.joedolson.com/
>
>
>
> Joseph
>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
>> Of Birkir R. Gunnarsson
>> Sent: Wednesday, January 11, 2017 9:58 AM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Mega Menu
>>
>> Implementing complex page controls is always tricky, especially when retrofitting
>> them for accessibility.
>> The interaction design is often done, and coding may even be partially completed
>> by the time you get an accessibility opinion in.
>> I thik correctly using a slightly modified version of the megamenu (modified in the
>> sens that the menu triggering items are in focus order and display the submenus
>> when users put focus on them with the tab key) is not a bd interaction design.
>> Granted, as you said, that all the screen reader menu roles and attributes are
>> placed correctly.
>> It is a popular concept in interactive design to have large lists of navigation links
>> look like menus and placing them in the header.
>> For mouse users, the idea of mousing over the triggering element causes its
>> associated menu to be displayed is popular.
>> At this point we can either have the user tab through all the items in submenu one
>> before getting to submenu 2, changing the interaction design to accordion style
>> icons (which visual designers are not happy with if they have designed the menus
>> differently), or implement some sort of a megamenu construct.
>> Basically, there is no right answer, we often have to make the best of tricky
>> situations, and sometimes the solutions turn out very good, sometimes less so.
>>
>>
>>
> > > >