WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dropdown Menus

for

From: Sandy Feldman
Date: Jan 10, 2018 8:25AM

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.
>
> > > http://webaim.org/discussion/archives
> > > > 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