E-mail List Archives
Thread: Dropdown Menus
Number of posts in this thread: 8 (In chronological order)
From: JP Jamous
Date: Sun, Jan 07 2018 6:04PM
Subject: Dropdown Menus
No previous message | Next message →
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.
From: Birkir R. Gunnarsson
Date: Sun, Jan 07 2018 6:32PM
Subject: Re: Dropdown Menus
← Previous message | Next message →
Check out
ARIA authoring Practices menu button example:
https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20161214/examples/menu-button/menu-button-1/menu-button-1.html
and ACCDC mega menu example:
http://whatsock.com/test/ARIA%20Menubar/ARIA%20Menubar/menubar.html
Basically,
The trigger is a menu button (button with an aria-haspopup attribute,
when activatd the focus should move to the first menu item.
You should be able to navigate through the first level menu items with
arrow up/down. If a menu opens a submenu you should be able to use
arrow right to expand e it, arrow left or escape to close it and move
focus back to that menu item That element must have
aria-haspopup="true" to indicate that it has a submenu.
Ideally all menu items have tabindex='-1" and it takes quite a bit of
JavaScript to create the menu keyboard navigation. This is doable, but
it's not necessarily the best or most intuitive UI, and definitely
does not work on mobile.
Cheers
On 1/7/18, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> 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.
>
> > > > >
--
Work hard. Have fun. Make history.
From: Terzian, Sharon
Date: Tue, Jan 09 2018 7:57AM
Subject: Re: Dropdown Menus
← Previous message | Next message →
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 ADDRESS REMOVED = ] On Behalf Of JP Jamous
Sent: Sunday, January 07, 2018 8:05 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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.
From: Bim Egan
Date: Tue, Jan 09 2018 8:24AM
Subject: Re: Dropdown Menus
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf
Of JP Jamous
Sent: Sunday, January 07, 2018 8:05 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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
From: Sandy Feldman
Date: Wed, Jan 10 2018 8:25AM
Subject: Re: Dropdown Menus
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf
> Of JP Jamous
> Sent: Sunday, January 07, 2018 8:05 PM
> To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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
From: Middleton, John
Date: Thu, Jan 11 2018 9:03AM
Subject: Re: Dropdown Menus
← Previous message | Next message →
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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf
>> Of JP Jamous
>> Sent: Sunday, January 07, 2018 8:05 PM
>> To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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
>
>>>>
From: Robert Fentress
Date: Thu, Jan 11 2018 12:31PM
Subject: Re: Dropdown Menus
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = ] On
> Behalf
> >> Of JP Jamous
> >> Sent: Sunday, January 07, 2018 8:05 PM
> >> To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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>
From: Bim Egan
Date: Thu, Jan 11 2018 2:58PM
Subject: Re: Dropdown Menus
← Previous message | No next message
Hi Rob,
Well there you go, I didn't realise that. In my firm's own implementation
of it, activating the top-level link opens the dropdown and moves focus to
the first child link (also the first content). So tabbing back to the parent
just closes the dropdown and activating opens it again. Perhaps this only
works if the very first content in the dropdown is a link.
Thanks for letting me know, I'll make a note of that, very handy,
Bim
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
Of Robert Fentress
Sent: 11 January 2018 19:31
To: WebAIM Discussion List
Subject: Re: [WebAIM] Dropdown Menus
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 ADDRESS 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 ADDRESS REMOVED = on behalf of
> = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = ] On
> Behalf
> >> Of JP Jamous
> >> Sent: Sunday, January 07, 2018 8:05 PM
> >> To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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
> >>
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >
> >--
> >Sandy
> >
> >sandyfeldman.com
> >sandyfeldman.tumblr.com/
> >ca.linkedin.com/in/sandyfeldman
> >inclusivemedia.ca
> >
> >> >> >archives at http://webaim.org/discussion/archives
> >> > > archives at http://webaim.org/discussion/archives
> >
--
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>
http://webaim.org/discussion/archives