E-mail List Archives

Re: Mega Menu

for

From: Sandy Feldman
Date: Jan 27, 2017 8:54AM


Birkir, that's a really good approach!

Sandy

On 2017-01-19 6:39 AM, Birkir R. Gunnarsson wrote:
> I would use role="group" and aria-labelledby="top level item ID" on
> the submenu link in this case.
> <a id="mn1">about us</a>
> <div role="group" aria-labelledby="mn1">
> <ul>
> <li><a href='"#">our history</a></li>
> ....</ul></div>
> This will communicate to screen readers that the links in the menu are
> grouped and the group is tied to the top level link.
> This can be semantically important information when the user is trying
> to understand the page layout.
> Is the submenu visually hidden or completely hidden until users place
> focus on the top level item?
> If visually hidden, this is enough. If completely hidden, I am still a
> bit worried that screen readers could be very confused, and I would
> advice using aria-expanded in addition to this to indicate the display
> state.
> Else the screen reader user will have a hard time understanding what
> is happening on the page.
>
>
>
> On 1/19/17, Jeremy Anderson < <EMAIL REMOVED> > wrote:
>> Hi Joseph,
>>
>> T o be honest, I wouldn’t worry about including either hasPopUp or
>> aria-expanded states because, as far as the screenreader is concerned, the
>> text is visible, and there are no changes in display style status.
>>
>> I may be reading this wrong, but it seems you are trying to describe what is
>> visually happening on the page when, to a screen-reader, nothing is
>> happening.
>>
>> Massive apologies if I am mis-reading this.
>>
>> Cheers,
>>
>> Jeremy.
>>
>>> On 18 Jan 2017, at 18:18, Joseph Sherman < <EMAIL REMOVED> > wrote:
>>>
>>> When user is on top level link with submenu open, tab and down arrow keys
>>> navigate through. ESC key brings user to top menu link item of current
>>> sub-menu. With focus on top link, left/right arrows navigate the menu.
>>>
>>> We went back and forth on whether TAB should go across or down from top
>>> level item. We settled on down since there's not many sub-items so tabbing
>>> through isn't terrible, and users expected TAB to move through an open
>>> menu.
>>>
>>> Joseph
>>>
>>>
>>>> -----Original Message-----
>>>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>>>> Behalf
>>>> Of Birkir R. Gunnarsson
>>>> Sent: Wednesday, January 18, 2017 1:04 PM
>>>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>>>> Subject: Re: [WebAIM] Mega Menu
>>>>
>>>> You could use aria-expanded="false" n the top links, setting it to "true"
>>>> when the
>>>> link receives focus and the submenu becomes visible.
>>>> How does the user get from the link to the "submenu", just by tabbing, or
>>>> have you
>>>> implemented some sort of keyboard navigation shortcuts, like arrow keys?
>>>>
>>>>
>>>> On 1/18/17, Joseph Sherman < <EMAIL REMOVED> > wrote:
>>>>> The State Farm menu is nice, however, if you use menu and menuitem
>>>>> then the navigation items do not show as links in the list of links
>>>>> identified by assistive technology, which we didn't want. We also have
>>>>> the top level item (not first sub menu item) as the link to the
>>>>> landing page for that category.
>>>>>
>>>>> We've done the keyboard support, I just was hoping for something to
>>>>> tell screen readers there is a submenu
>>>>>
>>>>> Joseph
>>>>>
>>>>>
>>>>>> -----Original Message-----
>>>>>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>>>>>> Behalf Of Birkir R. Gunnarsson
>>>>>> Sent: Wednesday, January 18, 2017 12:21 PM
>>>>>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>>>>>> Subject: Re: [WebAIM] Mega Menu
>>>>>>
>>>>>> Going back to www.statefarm.com - the megamenu in the header was
>>>>>> optimized for keyboard only and screen reader user, taking advantage
>>>>>> of ARIA.
>>>>>> * The menu triggering itames (insurance, finances, claims, customer
>>>>>> service) are focusable, and when focused or hovered will display the
>>>>>> submenus. For screen readers, these are wrapped in an element with
>>>>>> role="menubar" to indicate they are part of a horizontal menu, and
>>>>>> have role="menuitem" and aria- haspopup="true" to indicate that they
>>>>>> have submenus.
>>>>>> You can get through them either by tabbing or arrow keys right/left
>>>>>> (the menubar role represents a horizontal presentation of a menu, so
>>>>>> screen readers should instruct the users to use left/right arrows.
>>>>>> To get from the top level menu items to the submenus you can press
>>>>>> enter, space bar or arrow down.
>>>>>> * You can navigate through submenus with arrow keys (up/down) and
>>>>>> activate an item with the enter key. If you choose not to activate
>>>>>> any you can press the escape key which closes the menu and puts focus
>>>>>> back up on the top level item.
>>>>>> Visually menus are closed when you tab away from the top level item.
>>>>>> * For screen readers each submenu is labeled by the top level item,
>>>>>> the full meu construct is used so screen readers cen tell users the
>>>>>> number of items in the menu as well as the relative position of
>>>>>> current item (3 ot 8, 4 of 8 etc.).
>>>>>>
>>>>>> * The first item in each submenu is a link out to the landing page
>>>>>> for that category, if users prefer to explore by more traditional
>>>>>> means.
>>>>>>
>>>>>> I believe this presents a good example of using pure menu markup to
>>>>>> construct a navigation megamenu.
>>>>>> This works well when tested with keyboard or NVDA in Firefox, and
>>>>>> reasonably well with Jaws.
>>>>>> One must be careful to only use menu markup on all elements, don't
>>>>>> use headings and lits and links and buttons mixed In.
>>>>>> If using unordered lists as containers for submenus, mark the <ul>
>>>>>> eement as a menu and <li> elements as presentational.
>>>>>> <ul role="menu" aria-label="submenu x"> <li role="presentation"><a
>>>>>> href="#" role="menuitem">Submenu item 1</a></li> ...
>>>>>> </ul>
>>>>>>
>>>>>> It is not the only way to make navigation menus accessible, oh no
>>>>>> precious, but I think it is one way.
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> On 1/18/17, Joseph Sherman < <EMAIL REMOVED> > wrote:
>>>>>>> The menus open when hover and focus is on the top level item. They
>>>>>>> are not "hidden" from screen reader users, who can tab or arrow
>>>>>>> down to sub menu items, but the structure of top level and sub
>>>>>>> menus is not communicated to screen reader.
>>>>>>>
>>>>>>> Would making top level menu items h2 be enough to inform screen
>>>>>>> reader users there are sub items?
>>>>>>>
>>>>>>> Joseph
>>>>>>>
>>>>>>> On Jan 18, 2017 11:01 AM, Jeremy Anderson
>>>>>>> < <EMAIL REMOVED> >
>>>>>>> wrote:
>>>>>>> If the menu opens on focus, does the submenu have to be hidden from
>>>>>>> the screen-reader in the first place? (Or did you mean active,
>>>>>>> rather than
>>>>>>> focused?)
>>>>>>>
>>>>>>> Jeremy.
>>>>>>>
>>>>>>>> On 18 Jan 2017, at 14:42, Joseph Sherman < <EMAIL REMOVED> >
>>>>>> wrote:
>>>>>>>>
>>>>>>>> Is there a way to indicate to screen readers the existence of a
>>>>>>>> sub-menu when the sub-menus open when focused? Usually I would use
>>>>>>>> haspopup or expanded/collapsed, but those imply user action to
>>>>>>>> open/close.
>>>>>>>>
>>>>>>>> Joseph
>>>>>>>>
>>>>>>>>> -----Original Message-----
>>>>>>>>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ]
>>>>>>>>> On Behalf Of _mallory
>>>>>>>>> Sent: Wednesday, January 18, 2017 7:51 AM
>>>>>>>>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>>>>>>>>> Subject: Re: [WebAIM] Mega Menu
>>>>>>>>> The main menu items themselves are fallbacks if for any reason a
>>>>>>>>> user can't reach the subs, or doesn't see them, since the main
>>>>>>>>> links go to category pages anyway, from which one can eventually
>>>>>>>>> reach everything also listed in the subs.
>>>>>>>>> I'm still not
>>>>>>>>> sure how intuitive it is percieved by most users, and I'm pretty
>>>>>>>>> sure pure screen reader users miss the subs entirely anyway.
>>>>>>>>>
>>>>>>>>> cheers,
>>>>>>>>> _mallory
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>> >>>>>>>> >>>>>>>> archives at http://webaim.org/discussion/archives
>>>>>>>> >>>>>>>
>>>>>>> >>>>>>> >>>>>>> archives at http://webaim.org/discussion/archives
>>>>>>> >>>>>>>
>>>>>>> >>>>>>> >>>>>>> archives at http://webaim.org/discussion/archives
>>>>>>> >>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Work hard. Have fun. Make history.
>>>>>> >>>>>> >>>>>> archives at http://webaim.org/discussion/archives
>>>>>> >>>>> >>>>> >>>>> archives at http://webaim.org/discussion/archives
>>>>> >>>>>
>>>>
>>>>
>>>> --
>>>> Work hard. Have fun. Make history.
>>>> >>>> >>>> at
>>>> http://webaim.org/discussion/archives
>>>> >>> >>> >>> >>> >>
>> >> >> >> >>
>
>

--
Sandy

sandyfeldman.com
sandyfeldman.tumblr.com/
ca.linkedin.com/in/sandyfeldman
inclusivemedia.ca