WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mega Menu

for

From: Sandy Feldman
Date: Jan 27, 2017 8:54AM

Birkir, that's a really good approach!

Sandy

On 2017-01-19 6:39 AM, Birkir R. Gunnarsson wrote:
> 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
>>>
>>>
>>>>