WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dropdown Menus

for

From: Robert Fentress
Date: Jan 11, 2018 12:31PM

Hi, Bim.

My problem with Adobe's mega menu is that, when using the keyboard, the
link that opens the menu also goes to a page, meaning that the same
interface component serves two roles depending on when it is activated.
For example, try the following:

On the demo page you referenced (https://adobe-accessibility.g
ithub.io/Accessible-Mega-Menu/), set focus to the the first item in the
menubar, "Perceivable." What does it do? Well, let's see. I'm gonna guess
it is a trigger for expanding the menu (if I am using a screen reader, I am
given cues that this is what I can expect it to do), so I'll press the
Enter key.

Ta-da! It opens the menu. I guess I was correct.

Alright, I've seen what's in there, so I'm guessing I could hit the Enter
key again to collapse the menu. Here goes.

Wait. What? It took me to a page? I thought it was a menu trigger.

Those bastards! They tricked me!

Best,
Rob

On Thu, Jan 11, 2018 at 11:03 AM, Middleton, John < <EMAIL REMOVED> >
wrote:

> Sandy,
> The Adobe accessible Mega Menu doesn't appear to have the ‘hamburger'
> feature for smaller screens (at least from the configured linked example).
> You may want to look at Wet/BOEW menu example at:
> http://wet-boew.github.io/v4.0-ci/demos/menu/menu-en.html
>
>
> This accessible menu does have the ‘hamburger' menu feature for mobile
> devices. Of course there will be a boat-load of CSS that goes along with
> this.
>
> Regards,
> John Middleton
> Developer/Accessibility Enthusiast
> Austin, Tx.
>
>
> On 1/10/18, 9:25 AM, "WebAIM-Forum on behalf of Sandy Feldman" <
> <EMAIL REMOVED> on behalf of <EMAIL REMOVED> >
> wrote:
>
> >Is there an example/tutorial/download of this somewhere where the
> >navigation tucks under a hamburger when it's small, the way it does on
> >the Adobe site?
> >
> >thanks! Sandy
> >
> >
> >On 2018-01-09 10:24 AM, Bim Egan wrote:
> >> I like the Adobe example of an accessible mega menu:
> >> https://adobe-accessibility.github.io/Accessible-Mega-Menu/
> >>
> >> If appropriate the menu can contain headings, lists, paragraphs or
> images,
> >> as well as the menu links.
> >>
> >> It behaves exactly as it should, with the menu opening when the top
> level
> >> link is activated and collapsing when keyboard focus moves away from the
> >> last item in the dropdown, on desktop anyway. It has only one flaw that
> I've
> >> found and that is that the menu doesn't collapse when focus moves to the
> >> next top level link on small screens, for instance with VoiceOver
> running.
> >>
> >>
> >> HTH,
> >>
> >> Bim
> >>
> >>
> >>
> >>
> >>