WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: menus that appear after mouse hovers on link

for

From: Brendan McKeon
Date: Aug 14, 2012 3:08PM

One comment on the suggested fix:

Keep in mind that keyboard users can both tab and shift-tab to move focus
forwards and backwards. If you have off-screen elements that are focusable,
they need to be made visible when they take focus, regardless of how focus
got there. So in the case below, you would also want to show the menu if the
focus moved into the parent UL. Without this, a sighted keyboard user could
shift-tab back into one of the offscreen links, and end up confused as to
why focus is not visible on the screen.

Brendan.

--
Brendan McKeon | <EMAIL REMOVED>




-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: Friday, August 10, 2012 3:36 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] menus that appear after mouse hovers on link

I believe this should do the trick.

<a class="trigger" href="url1"> Triggering Element </a> <ul
class="offscreenText menu"> <li><a href="url2"> Menu Item One </a></li> ...
</ul>

So,

1) Set a focus handler on the Triggering Element link to change the class of
the UL tag from 'offscreenText' to 'block', and position it accordingly.

2) Set a focusOut handler on the UL tag so that when a user tabs out of the
menu, the class will be changed from block to 'offscreenText' again. Plus a
mouseOut handler that does the same.

(Important: A blur handler should not be used to close the menu after
tabbing away from Triggering Element)

Since the UL tag is positioned offscreen instead of using display:none or
visibility:hidden, the menu links are already fully accessible to screen
reader users.

The focus handlers ensure that the same functionality will be available to
keyboard only users as well.



----- Original Message -----
From: "Julius Charles Serrano" < <EMAIL REMOVED> >
To: < <EMAIL REMOVED> >
Sent: Thursday, August 09, 2012 7:30 PM
Subject: [WebAIM] menus that appear after mouse hovers on link


> Ohai everyone.
>
> What do you think is the best accessibility solution for this scenario:
> Situation: There is a link which, when the user hovers the mouse over
> it, a menu would appear.
> Perceived issue: Since screen reader users and people with motor
> impairments cannot use the mouse and hover on the link, they won't be
> able to view the menu.
>
> How can we make this menu accessible to screen reader users and people
> with motor impairments?
>
> Thanks.
>
> Julius
>
>
> > >