WebAIM - Web Accessibility In Mind

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