WebAIM - Web Accessibility In Mind

E-mail List Archives

Regarding the accessibility of dual menu links

for

From: Bryan Garaventa
Date: Nov 14, 2013 1:24AM

Sometimes I get asked how to make a dual menu accessible, and the concept is sort of complicated. Even so, the solution is actually fairly easy, so I thought I'd share it here in case it's helpful.

To clarify what I mean by a dual menu, this is when you have a triggering element that navigates to another page when clicked, but when moused over, shows a menu of associated links that navigate to different pages.

ARIA really doesn't have any type of implementation to deal with dual functionality such as this, since activating the triggering element navigates to another page, and voids the opening of a dropdown menu, which isn't obvious how to open from the keyboard in any case.

So, the easiest and most accessible solution I've found is to use an offscreen container to store the menu, and to dynamically show and hide this container visually using onMouseOver and onFocus on the triggering element. Pressing Tab will set focus into the menu where the arrow keys can be used to navigate between menu items, and pressing Tab again will close the menu. Also, mousing out of the menu will close it as well. Since the menu links are positioned offscreen, they are accessible to screen reader users by arrowing down the page and by simply pressing Enter on the desired link.

You can see a simplified example of this at
http://whatsock.com/test/dual_menu.html