WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Inaccessible mega menu and WCAG2

for

From: Andrew Kirkpatrick
Date: Jan 19, 2015 6:48AM

So, the way that the mega menu (http://adobe-accessibility.github.io/Accessible-Mega-Menu/) was designed:

1) tabbing to the menu does not open the submenu, but focuses the first menu heading.
2) tabbing when the menu is closed moves the focus to the next menu heading (this was a heavily debated topic - the other option is to have one tab stop for the entire menu system when closed).
3) when focus is on a menu heading, hitting down arrow or enter will open the menu.
4) when focus is on a menu heading left and right arrows will move the focus between menu headings
5) when a menu is open, escape will always close the submenu
6) when the submenu is open and focus is on the menu heading, the example implementation takes the user to a page containing links to the submenu items when you click on that link. This can be easily modified.
7) when a menu is open the user can move between menu items with tab or arrows, including left/right arrows
8) to tab past the menu system the user either needs to tab through the menu options until they reach the end, or close the submenu that is open and tab past the smaller number of menu headings into the content).

I do agree that even if the menus are in view that users don't need to be able to tab through all of the submenu links, but there does need to be a keyboard accessible way to access all of the submenu items. If a menu system is set up to enable arrow keys to access the items, then that should be fine.

Our example is surely not the only way, nor is it perfect, and depending on the specific menu system needed for the content it may or may not meet the needs of the site. However, we put it on GitHub as an example for people to look at, discuss, learn from, and if they choose, to fork and use for their own purposes (in keeping with the terms of the license, etc, etc).

AWK