WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Question about CSS Hover Dropdown menus

for

From: Austin, Darrel
Date: Feb 23, 2007 9:00AM

> If you have a pure CSS hover menu, is there any way to make
> it function just by using keystrokes? So, for example, I'm
> tabbing through the scroll down menu options on ESPN.com, and
> I want to see what options are under NBA. If I tab to it, and
> click "enter", instead of seeing what's underneath, I'm taken
> to the main NBA page. Do people who use only keystrokes to
> navigate have to live with this, or is there a keystroke I'm
> missing (I know what the issues may be if it were a
> Javascript mouseover)

To make a fly-out/drop-down menu accessible to keyboard users, you
really need to use judicious amounts of javascript. There aren't a lot
of truly keyboard acessible drop-down menu systems. A few that I've come
across:

http://mnteractive.com/archive/hangover-fly-out-navigation-part-ii/

'Pure CSS' drop down menus, IMHO, are inferior to javascript + CSS based
ones. The javascript is really needed for that layer of usability that
you miss with just CSS. Keyboard navigation is one, and the other (more
major issue, IMHO) is the time-out delay needed to give the user a
chance to navigate from the 'trigger' link to the link on the menu. A
lack of this delay can be a huge hurdle for anyone that uses a mouse but
perhaps not with ideal large motor control (kids, elderly, arhtritis,
etc.)

Keep in mind the other issues that can cause usability and accessibility
problems with drop-down menus. Another big issue that is brought up is
simply information overload. By basically attaching the entire site map
to every page, you are require a person not only digest the entirety of
the site menu on each page, but physically traverse it. The traversing
issue can be resolved via ancillary navigation elements (static section
navigation, breadcrumbs, etc.).

> Also I've played with some screenreaders (I don't have access
> to JAWS, though), and see that if you have CSS drop down
> menus using lists, that the screenreader will read the hidden
> hover menus. However, it looks to me like they will read all
> of them.

See above. ;o)

-Darrel