E-mail List Archives
Thread: menus that appear after mouse hovers on link
Number of posts in this thread: 7 (In chronological order)
From: Julius Charles Serrano
Date: Thu, Aug 09 2012 8:30PM
Subject: menus that appear after mouse hovers on link
No previous message | Next message →
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
From: deborah.kaplan@suberic.net
Date: Thu, Aug 09 2012 8:40PM
Subject: Re: menus that appear after mouse hovers on link
← Previous message | Next message →
> How can we make this menu accessible to screen reader users and people
> with motor impairments?
Or, for that matter, anyone with ipads or smart phones.
Use onfocus / onblur as well as onMouseOver / onMouseOut / onHover.
http://www.umich.edu/webaccess/best/script.html
Then keyboard users can access the menu.
-Deborah
--
Deborah Kaplan
Accessibility Team Colead
Dreamwidth Studios, LLC
From: Joe Chidzik
Date: Fri, Aug 10 2012 1:29AM
Subject: Re: menus that appear after mouse hovers on link
← Previous message | Next message →
> 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?
[Joe Chidzik] Using aria-haspopup you can alert screenreader users when a drop down menu is attached to a linkcontrol. If the menu opens automatically though, using onfocus as Deborah suggested, you may not need to use aria-haspopup.
Some neat examples of accessible drop down menus from Terril Thompson here: http://staff.washington.edu/tft/tests/menus/ Some of these, the YUI and OAA ones for example, work well for both screenreader and keyboard only users.
Because these menus are accessed using the arrow keys, which some users may not be familiar with yet (due to the tabenter behaviour paradigm on webpages), you may want to mention this is on an accessibilityhelp page.
Joe
From: Bim Egan
Date: Fri, Aug 10 2012 6:01AM
Subject: Re: menus that appear after mouse hovers on link
← Previous message | Next message →
As Joe says, the YUI and OAA examples are best, and could really only be
improved by a JavaScript popup (activated by keyboard focus on the first
item), that explained the keyboard actions required to move between items.
Of the two, my preference would be for the OAA menu as some screen readers
do announce the actions required to open and navigate through sub-menu
items, and tabbing would be an intuitive way to reach the next top-level
menu item (the navigation for OAA), but I haven't come across any screen
reader that explained that left and right arrow keys need to be used to
reach the next top-level item (as the YUI example requires), and totally
blind users wouldn't even know that they'd missed anything by pressing the
tab key.
Best,
Bim
----- Original Message -----
From: "Joe Chidzik" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, August 10, 2012 8:29 AM
Subject: Re: [WebAIM] menus that appear after mouse hovers on link
> 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?
[Joe Chidzik] Using aria-haspopup you can alert screenreader users when a
drop down menu is attached to a linkcontrol. If the menu opens
automatically though, using onfocus as Deborah suggested, you may not need
to use aria-haspopup.
Some neat examples of accessible drop down menus from Terril Thompson here:
http://staff.washington.edu/tft/tests/menus/ Some of these, the YUI and OAA
ones for example, work well for both screenreader and keyboard only users.
Because these menus are accessed using the arrow keys, which some users may
not be familiar with yet (due to the tabenter behaviour paradigm on
webpages), you may want to mention this is on an accessibilityhelp page.
Joe
From: Bryan Garaventa
Date: Fri, Aug 10 2012 4:35PM
Subject: Re: menus that appear after mouse hovers on link
← Previous message | Next message →
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 ADDRESS REMOVED = >
To: < = EMAIL ADDRESS 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
>
>
> > >
From: Julius Charles Serrano
Date: Sun, Aug 12 2012 12:12AM
Subject: Re: menus that appear after mouse hovers on link
← Previous message | Next message →
Hi Deborah, Joe, Bim, and Bryan.
Thank you very much for your recommendations and the links to pages that
demonstrate your suggestions.
Thanks also for mentioning that users of iPads and smartphones are also
affected by this type of menu. We will certainly try each recommendation.
Julius
From: Brendan McKeon
Date: Tue, Aug 14 2012 3:08PM
Subject: Re: menus that appear after mouse hovers on link
← Previous message | No next message
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 ADDRESS REMOVED =
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
To: < = EMAIL ADDRESS 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
>
>
> > >