WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Drop-down menus

for

From: Joe Clark
Date: Aug 3, 2003 2:57PM

>>Drop-down menus created by styling unordered lists are a perfectly
>>accessible and standards-compliant method.
>
>There's no such thing as perfectly accessible, and you know it, Joe.

It's an expression used by native speakers. It is not meant literally.

>> <http://www.google.com/search?q=css+unordered+list+menus>;
>> <http://www.google.ca/search?q=%22css+menus%22>;
>
>Are you serious?

My bad. I used the wrong search terms. The method *does* use
unordered lists with CSS, but the better way to search for the
technique is for CSS pull-down menus:

<http://www.google.ie/search?q=CSS+%22pull-down+menus%22>;

Examples being:

<http://www.serve.com/apg/workshop/cssMenu.html>;
<http://www.gazingus.org/dhtml/?id=109>;
<http://www.uoguelph.ca/~stuartr/articles/csspulldownmenu.shtml>;
<http://www.kalsey.com/tools/csstabs/>;
<http://www.sovavsiti.cz/css/horizontal_menu.html>;

>I'm not going to present an example that would show what you
>probably had in your mind. It might be something that has tolerable
>implications on accessibility.

Indeed they do. The canonical objections to DHTML drop-down menus,
well articulated in my book, are:

* Use of browser- or platform-specific JavaScript and probably invalid HTML.
* Rarely tested in anything other than IE on Windows, because really,
who uses anything else?
* Code bloat.
* Severe usability detriment even for nondisabled people, as the
simple act of moving the mouse from the address bar to some point on
the page triggers the menus.
* Provable difficulty in using the menus in typical screen readers.
* Requires really quite advanced dexterity.

The all-CSS method avoids those problems.

* Uses no JavaScript and dead-simple HTML. (You really should
validate your stylesheet, of course.)
* Works in every reasonably-modern browser save for Netscape 4 (which
isn't reasonably modern), and I seem to recall seeing a page where
somebody got them to work even there.
* Small codebase.
* Usability greatly improved, particularly if you set the a:hover
state to do nothing but the a:focus state to take action. You then
have to actually click on the menu to get it to drop down.
* *Assumed* screen-reader compatibility. As I'll be explaining in an
article elsewhere shortly, screen-reader testing of new
standards-compliant methods is difficult.
* Degree of dexterity required is probably lower. The designer can
readily specify type sizes and gaps between menus, and, in most
browsers, font size can be increased at the user's will. You can also
use tabindex on the <a> elements.
* No CSS? Then the structures revert to their underlying form, plain
unordered lists.

>From: Terence de Giere < <EMAIL REMOVED> >
>[...]
>We might as well ask 'how can I hit someone on the head really hard
>witha very large rock and not have it hurt (or worse)?'. This
>question ofdynamic menus pops up again and again on accessibility
>forums. Theconsensus is always that drop-down menus are not a good
>idea, even fornormal users, let alone those with various cognitive
>or motor disorders.

I dispute the "always." Don't include me in that consensus. In fact,
the consensus disappears right here.

>Assuming a drop-down mechanism is accessible, meaning all the
>content ofthe menus can be read with the various kinds of assistive
>technology, weneed to consider the amount of information a user
>needs to process.'Accessible' drop down menus basically present a
>user with specialtechnology with all the links in all the menus,
>which on some sites canbe huge.
>[1,000 words deleted]

Any method of pull-down menus with too many options will betray poor
usability, and that usability may mean functional *in*accessibility
for many users. The example I concentrate on in my book is <select>
lists of every country on earth, many of which do not even exist. (I
can't find the reference to the excellent article someone wrote on
that topic.) But if you use CSS drop-down menus with only a few
sensible options-- reflecting the good information architecture of
your site-- then there's nothing to worry about.

--

Joe Clark | <EMAIL REMOVED>
Accessibility <http://joeclark.org/access/>;
Weblogs and articles <http://joeclark.org/weblogs/>;
<http://joeclark.org/writing/>; | <http://fawny.org/>;


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/