E-mail List Archives

Re: Mega Menu

for

From: Birkir R. Gunnarsson
Date: Jan 19, 2017 4:39AM


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


--
Work hard. Have fun. Make history.