WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Question about CSS Hover Dropdown menus

for

From: Al Sparber
Date: Feb 22, 2007 11:10AM

From: < <EMAIL REMOVED> >
> I'm trying put together a list of "accessibility consequences" for
> certain types of web design styles (such as, if you do X,Y, or Z,
> then people who have X,Y, or Z disability will not be able to easily
> use your site), and trying to think not only in terms of
> screenreaders. I'll probably come up with a bunch of questions as I
> go along, but right now I have a question about CSS Hover drop-down
> menus (such as on espn.com).

If you have a the least bit of doubt about dropdown menus, you should
simply avoid them. They are totally unnecessary in a well-designed
site. They are merely enhancements that, if deployed logically, can be
useful to some, while being transparent to others.

This article explains our position on the subject:
http://www.projectseven.com/tutorials/navigation/pmm/rootimages/index.htm

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

Web pages are not operated as if they were desktop applications, so
while a savvy person like you might poke around with different logical
keystrokes, such as arrow keys, most people are accustomed to web
pages being navigable with a mouse or with the Tab key (or with
Opera's unique setup). Menu scripts that allow use of the keyboard in
desktop app paradigm might be coded by very able persons but typically
require a surfer's help page to explain how to operate the menu. Given
the immediate nature of web surfing, in most cases, this is not
usually a good idea.

> 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. Are there
> ways to put mini-skip-links in a drop down menu like that so you can
> go from one top-tier option to the next?

It depends. In most cases, a single submenu level should be the
maximum and it's often best to build the site as if the submenus were
not there, relegating them to the status of a convenience item to
those who feel comfortable using them. They should never, ever, be the
sole means of navigation. A lot of the bad "press" we get is
unavoidable. We try to teach our customers, via online tutorials and
shipping user guides, to use these things responsibly :-)

--
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"