WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Inaccessible mega menu and WCAG2

for

From: Roger Hudson
Date: Jan 17, 2015 1:57PM

While I like the fact that you can move around the Adobe Mega Menu with
either the tab or arrow keys, I am concerned that two different functions
are associated with the main menu navigation items. When on an item, if you
press enter the sub-menu opens and tab takes you to the first item in the
menu. However, if you want to go to the page directly linked to by the item
you need to press the enter key again rather than tab. While it would be
relatively easy to communicate these different behaviours to screen reader
users, it will be more difficult to do for keyboard users who don't use a
screen reader.



I have thought about this problem several times over the years and wrote a
short article about it in 2010:
http://usability.com.au/2010/08/accessing-nav-drop-downs/



Personally I don't like mega menus and feel they should be avoided. However,
that said, I can think of two ways we might make them easier of keyboard
users to understand and use:

1. If the main item is to have two functions, provide a clearer
visual indication of these different functions. For example, include an icon
or symbol, such as a chevron, next to the navigation label (e.g. Operable
$B"'(B). The first tab press would take the user to the navigation label, and
if selected the landing page would be presented. If not selected, the next
tab press would take the user to the chevron, which would cause the
drop-down (sub-menu) to be presented when selected. These different
functions would be easy to communicate to screen reader users, and since
they are separated, a little easier for sighted keyboard users to
understand.

2. Provide only one function for the main navigation item, namely
to open the drop-down sub-menu. Since you will no longer be able to go
directly to a page by clicking the main navigation label, it will be
necessary to repeat this label as the first item in the sub-menu. From a
keyboard and screen reader perspective this maybe the better option, but
repeating the navigation label maybe slightly confusing for some users.



Thanks,

Roger


http://list.webaim.org/ webaim.org> <EMAIL REMOVED>





Roger Hudson

Web Usability

Mobile: 0405 320 014

Phone: 02 9568 1535

Web: www.usability.com.au

Blog: www.dingoaccess.com

Twitter: http://twitter.com/rogerhudson

Email: <EMAIL REMOVED>