WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: menus that appear after mouse hovers on link

for

From: Bryan Garaventa
Date: Aug 10, 2012 4:35PM

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
>
>
> > >