WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mega Menu

for

From: Joseph Sherman
Date: Jan 18, 2017 10:56AM

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