WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Mega Menus and WCAG 2.0

for

Number of posts in this thread: 6 (In chronological order)

From: Michael Moore
Date: Mon, Jun 09 2014 10:31AM
Subject: Mega Menus and WCAG 2.0
No previous message | Next message →

We are starting to see an increase in the use of mega menus on many of our
web sites. I believe that these things are generally usability nightmares,
particularly for people using screen magnification. What I was wondering is
if there are some typical WCAG 2.0 failures for these things that I should
be looking for. I have been checking for keyboard accessibility and good
focus indication within the menus but wonder if I am missing something else.

Thanks,

Mike

From: Paul J. Adam
Date: Mon, Jun 09 2014 10:37AM
Subject: Re: Mega Menus and WCAG 2.0
← Previous message | Next message →

Here's some good info/examples I've collected:

http://pauljadam.com/moderna11y/#menus
http://pauljadam.com/weba11ytesting/#menus

Name, Role, Value, State, e.g. expanded/collapsed state is usually missing, role is usually incorrect. The keyboard interaction should not force them to TAB through every single item in the mega menu to bypass it or get to the specific item they want.

Paul J. Adam
Accessibility Evangelist
www.deque.com

On Jun 9, 2014, at 11:31 AM, Michael Moore < = EMAIL ADDRESS REMOVED = > wrote:

> We are starting to see an increase in the use of mega menus on many of our
> web sites. I believe that these things are generally usability nightmares,
> particularly for people using screen magnification. What I was wondering is
> if there are some typical WCAG 2.0 failures for these things that I should
> be looking for. I have been checking for keyboard accessibility and good
> focus indication within the menus but wonder if I am missing something else.
>
> Thanks,
>
> Mike
> > >

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Mon, Jun 09 2014 11:35AM
Subject: Re: Mega Menus and WCAG 2.0
← Previous message | Next message →

Paul,

I have a favor to ask. Could you please send a coding example for tabbing through the high level menu items as you have suggested? I didn't exactly understand it when I looked at your links.

Susie Stanzel

From: Paul J. Adam
Date: Mon, Jun 09 2014 12:05PM
Subject: Re: Mega Menus and WCAG 2.0
← Previous message | Next message →

Hi Susie, I have about 4-5 live demo links included in the URLs from my presentations below. They all don't work exactly the same but are great for showing possible solutions.


Paul J. Adam
Accessibility Evangelist
www.deque.com

On Jun 9, 2014, at 12:35 PM, Stanzel, Susan - FSA, Kansas City, MO < = EMAIL ADDRESS REMOVED = > wrote:

> Paul,
>
> I have a favor to ask. Could you please send a coding example for tabbing through the high level menu items as you have suggested? I didn't exactly understand it when I looked at your links.
>
> Susie Stanzel
>
>

From: Birkir R. Gunnarsson
Date: Mon, Jun 09 2014 6:10PM
Subject: Re: Mega Menus and WCAG 2.0
← Previous message | Next message →

The accessible mega menu from PayPal at
http://adobe-accessibility.github.io/Accessible-Mega-Menu/
has a link to a blog that explains some of their design actions with
regard to keyboard and screen reader accessibility and navigation.

I would have done a couple of minor things differently, but that is
easy to say when you did not design an accessible and complex control
and put it out there for everyone to use or modify.

This is good work, great blog, and we need more of these type of
things out there.
Maybe reading through this blog will give you a little clearer idea of
the type of navigational ideas being discussed.
It would be cool to record a screencast of a screen reader or two and
keyboard only access to the megamenu to accompany the blog.
-B


On 6/9/14, Paul J. Adam < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Susie, I have about 4-5 live demo links included in the URLs from my
> presentations below. They all don't work exactly the same but are great for
> showing possible solutions.
>
>
> Paul J. Adam
> Accessibility Evangelist
> www.deque.com
>
> On Jun 9, 2014, at 12:35 PM, Stanzel, Susan - FSA, Kansas City, MO
> < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Paul,
>>
>> I have a favor to ask. Could you please send a coding example for tabbing
>> through the high level menu items as you have suggested? I didn't exactly
>> understand it when I looked at your links.
>>
>> Susie Stanzel
>>
>>

From: lists
Date: Mon, Jun 09 2014 8:56PM
Subject: Re: Mega Menus and WCAG 2.0
← Previous message | No next message

BTW, below is an awesome work by Adobe Accessibility team. Just wanted to jump in and give credit to right folks.

Best,
Srinivasu
PayPal

Best regards,

Srinivasu Chakravarthula
Mobile: +91 990 081 0881
Website: http://www.srinivasu.org |http://sgaccessibility.com
Follow me on Twitter:http://twitter.com/CSrinivasu

Sr. Accessibility Lead at PayPal
Founder at Sai Gagan Accessibility Solutions
Hon. Joint Secretary at The National Association for the Blind, Karnataka Branch
http://about.me/srinivasuc

Sent from my iPhone 4S

> On 10-Jun-2014, at 5:40, "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = > wrote:
>
> The accessible mega menu from PayPal at
> http://adobe-accessibility.github.io/Accessible-Mega-Menu/
> has a link to a blog that explains some of their design actions with
> regard to keyboard and screen reader accessibility and navigation.
>
> I would have done a couple of minor things differently, but that is
> easy to say when you did not design an accessible and complex control
> and put it out there for everyone to use or modify.
>
> This is good work, great blog, and we need more of these type of
> things out there.
> Maybe reading through this blog will give you a little clearer idea of
> the type of navigational ideas being discussed.
> It would be cool to record a screencast of a screen reader or two and
> keyboard only access to the megamenu to accompany the blog.
> -B
>
>
>> On 6/9/14, Paul J. Adam < = EMAIL ADDRESS REMOVED = > wrote:
>> Hi Susie, I have about 4-5 live demo links included in the URLs from my
>> presentations below. They all don't work exactly the same but are great for
>> showing possible solutions.
>>
>>
>> Paul J. Adam
>> Accessibility Evangelist
>> www.deque.com
>>
>> On Jun 9, 2014, at 12:35 PM, Stanzel, Susan - FSA, Kansas City, MO
>> < = EMAIL ADDRESS REMOVED = > wrote:
>>
>>> Paul,
>>>
>>> I have a favor to ask. Could you please send a coding example for tabbing
>>> through the high level menu items as you have suggested? I didn't exactly
>>> understand it when I looked at your links.
>>>
>>> Susie Stanzel
>>>
>>>