WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mega Menu

for

From: Birkir R. Gunnarsson
Date: Jan 18, 2017 10:21AM

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