WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dropdown Menus

for

From: Middleton, John
Date: Jan 11, 2018 9:03AM

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.
>>
>> >> >> 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
>
>>>>