E-mail List Archives

Search E-mail List Archives for

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

From: Bryan Garaventa
Date: Thu, Nov 14 2013 1:24AM
Subject: Regarding the accessibility of dual menu links
No previous message | Next message →

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

From: Alastair Campbell
Date: Thu, Nov 14 2013 11:33AM
Subject: Re: Regarding the accessibility of dual menu links
← Previous message | Next message →

Thanks for that Bryan,

Have you seen any examples that work with touch as well? I assume that is
not catered for as it uses hover/focus?

That may not be a big problem as you can select the default option, but I
was curious...

-Alastair

From: Bryan Garaventa
Date: Thu, Nov 14 2013 11:58AM
Subject: Re: Regarding the accessibility of dual menu links
← Previous message | No next message

Menus are always tricky on touch screens, but it is possible to modify the
functionality conditionally using the syntax:

if ('ontouchstart' in window){
// Do something
} else {
// Do something else
}

Which helps when modifying the onFocus and onBlur events if present, so that
the menu doesn't disappear when using touch to browse available menu
options. For something like this, it would take a bit of experimenting to
see what the best combination would be though.

----- Original Message -----
From: "Alastair Campbell" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 14, 2013 10:33 AM
Subject: Re: [WebAIM] Regarding the accessibility of dual menu links


> Thanks for that Bryan,
>
> Have you seen any examples that work with touch as well? I assume that is
> not catered for as it uses hover/focus?
>
> That may not be a big problem as you can select the default option, but I
> was curious...
>
> -Alastair
> > >