WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: menus that appear after mouse hovers on link

for

From: Bim Egan
Date: Aug 10, 2012 6:01AM

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 REMOVED> >
To: "WebAIM Discussion List" < <EMAIL 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