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
> >>
> >>
> >>
> >>
> >> -----Original Message-----
> >> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf
> >> Of Terzian, Sharon
> >> Sent: 09 January 2018 14:58
> >> To: WebAIM Discussion List
> >> Subject: Re: [WebAIM] Dropdown Menus
> >>
> >> Thank you for bringing this up (again) I am totally interested in this
> as
> >> I've been wrestling with drop down menus forever!!!
> >> And yet to find a solution for that
> >>
> >> -----Original Message-----
> >> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf
> >> Of JP Jamous
> >> Sent: Sunday, January 07, 2018 8:05 PM
> >> To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
> >> Subject: [WebAIM] Dropdown Menus
> >>
> >> Hi WebAimers,
> >>
> >>
> >>
> >> I have been researching dropdown menus on the web, but I wanted to find
> out
> >> what you folks have to share. Here is my situation below.
> >>
> >>
> >>
> >> I have a nested dropdown menu on a client's web site. It is made up of a
> >> button that drops a list of menus onmouseover. The menus and their
> submenus
> >> stay visible for mouse users, as it works great for them. However, it is
> >> terrifying to screen reader and keyboard only users, because it has an
> array
> >> of nested links totaling about 50 links.
> >>
> >>
> >>
> >> I figured that if I add onfocus to the menu button, the browser would
> detect
> >> a keyboard command and I can dropdown only the first level of menus. If
> the
> >> keyboard user chooses to expand or collapse the first level, that will
> be at
> >> the user's discretion.
> >>
> >>
> >>
> >> What I am lacking is a tested JavaScript function or functions that use
> ARIA
> >> attributes to expand and collapse those menus. The menus are made up of
> >> unordered lists with links in each list. The developers would like to
> keep
> >> this template and not choose anything else as it will require so much
> work
> >> to redo this huge dropdown menu. I believe it is referred to as Mega
> menu.
> >> Please, correct me if I am wrong.
> >>
> >>
> >>
> >> Does anyone know of a good sample, snippet or documentation I can use? I
> >> want to break it down to the developers and explain to them how to add
> it to
> >> their already created menu. I have not been able to find something
> useful on
> >> the web so far and I unfortunately don't have the time to recreate the
> >> wheels.
> >>
> >>
> >>
> >> Any help or explanations will be highly appreciated.
> >>
> >> > >> > archives at
> >> http://webaim.org/discussion/archives
> >> > >> > >> > archives at
> >> http://webaim.org/discussion/archives
> >> > >>
> >>
> >> ---
> >> This email has been checked for viruses by AVG.
> >> http://www.avg.com
> >>
> >> > >> > >> > >> > >
> >--
> >Sandy
> >
> >sandyfeldman.com
> >sandyfeldman.tumblr.com/
> >ca.linkedin.com/in/sandyfeldman
> >inclusivemedia.ca
> >
> >> >> >> >> > > > >



--
Rob Fentress
Senior Accessibility Solutions Designer
Assistive Technologies at Virginia Tech
Electronic Business Card (vCard)
<http://search.vt.edu/search/person.vcf?person54847>
LinkedIn Profile
<https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>