E-mail List Archives
Thread: Mega Menu
Number of posts in this thread: 2 (In chronological order)
From: Sandy Feldman
Date: Fri, Jan 27 2017 8:52AM
Subject: Mega Menu
No previous message | Next message →
What I did on
http://www.balancefba.org/
was have off-screen text saying "has sub menu".
I copied this approach from the Freedom Scientific site.
http://www.freedomscientific.com/
Sandy
On 2017-01-18 9:42 AM, Joseph Sherman 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
>
>>
From: Sandy Feldman
Date: Fri, Jan 27 2017 8:54AM
Subject: Re: Mega Menu
← Previous message | No next message
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 ADDRESS 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 ADDRESS 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
>>>
>>>
>>>>