WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mega Menu

for

From: Jeremy Anderson
Date: Jan 19, 2017 2:57AM

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.
>> >> >> http://webaim.org/discussion/archives
>> > > > >