WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Inaccessible mega menu and WCAG2

for

From: Lynn Holdsworth
Date: Jan 19, 2015 9:25AM

Hi Andrew,

> 7) when a menu is open the user can move between menu items with tab or arrows, including left/right arrows

Just curious about the thinking behind using the left/right arrows to
move up and down the items in a submenu. In native implementations the
left/right arrow keys move the focus across the items in the menubar
at the top.

Cheers, Lynn

On 19/01/2015, Andrew Kirkpatrick < <EMAIL REMOVED> > wrote:
> 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
>
>