W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2002

feedback:Fw: Drop Down Menus

From: David Poehlman <poehlman1@home.com>
Date: Fri, 4 Jan 2002 15:37:48 -0500
Message-ID: <001b01c1955f$ae1f4080$c2f20141@mtgmry1.md.home.com>
To: "wai-ig list" <w3c-wai-ig@w3.org>

----- Original Message -----
From: "Doug Wakefield" <wakefield@access-board.gov>
To: <sec508@trace.wisc.edu>
Sent: Friday, January 04, 2002 3:35 PM
Subject: RE: Drop Down Menus

Sorry to be slow getting this back to you. I sent your question over to
lawyer I work closely with who is also an excellent html author.
Here is what he suggests.

It isn't the select box that is itself inherently inaccessible--- it's
complications of the onchange event handler typically used with them
cause the problem. Below is the code sample that was forwarded, together
with a likely JavaScript event handler.

<label for="quicklinks">Which is your favorite city?</label>

<select id="quicklinks" name="quicklinks" onchange="myFunction()">
value="1">CNN</option> <option value="2">USA TODAY</option> </select>

In this code, any change of selections from the select box triggers the
event handler. In this case, it invokes the JavaScript function
'myFunction()', which would likely be defined somewhere in the <head>
section of the HTML for the page. As firing off URL's is a relatively
affair, some developers just put the code directly into the onChange
attribute itself. If you go to the CNN website, there is a select box at
top of the page. If you reveal the source code for that page, you can
the relatively simple code used--- it basically just gets the "value"
attribute of the selected option and uses that value as the URL to jump

The solution for providing accessibility with select boxes is to refrain
from using onchange entirely. Instead, the developer needs to insert a
button in the form or some other link outside the form that serves as a
jumping off point. This makes sense because drop down boxes are always
embedded in form elements. Thus, we can rewrite this code to use an
link outside the form

<form action="someAction" method="post" name="form1">


<label for="quicklinks">Which is your favorite city?</label>

<select id="quicklinks" name="quicklinks">

<option value="1">CNN</option>

<option value="2">USA TODAY</option>





<a href="javascript:myFunction();">Take Me There!</a>

In this case, the anchor link triggers the JavaScript function
'myFunction()'. In this case, the function (myFunction()) would have to
lookup the selected element in the select box (via the 'quicklinks'
after first looking up the appropriate form (via the 'form1' name)
containing the select box. Of course, JavaScript permits this means of
identifying every page element through the Document Object Model (the
"DOM"). Of course, if the web designer wanted something with a bit more
stylish appeal than a text link, she could have used a button in the
and then opted for an 'onclick' event handler that invoked exactly the
'myFunction()' function.

Unfortunately, the select tag itself supports relatively few event
and onChange is really one of the few that works reliably (albeit,
inaccessibly) in it. Thus, you can't use 'onClick' on a select tag
and expect reliable behavior across different platforms. Fortunately,
workaround is simple: just use 'onClick' on a different element and take
advantage of the DOM to get at the same information that onChange was
working with. It's a bit more cumbersome, but it's the only solution
I've seen thus far.

That was from Ken Nakata at Justice. The only change I'd add is to say
with in the last two months or so, several assistive technology packages
have made great strides in working with the onchange handler.
Good luck.
Doug Wakefield
Accessibility Specialist.
The U.S. Access Board
1331 F St. NW
Suite 1000
Washington DC  20004
Voice: 202-272-5434 ext139
fax: 202-272-5447
TTY: 202-272-5449
Email: wakefield@access-board.gov

-----Original Message-----
From: Jan Morgavan [mailto:jmorgavan@yahoo.com]
Sent: Thursday, December 20, 2001 8:37 PM
To: sec508@trace.wisc.edu
Subject: Drop Down Menus

Is it possible to create a Section 508 compliant drop down menu? I have
looking at some coding examples similar to the one below that is written
accessbility. What I would like to code is a drop down menu that will
the user to a url say http://www.cnn.com <http://www.cnn.com>  .
Normally I
would code the **value** attribute with the respective link. I am
the **value="1"** format is needed for the user agent (ATs) to read the

The question I need to resolve is how to convert this code so that when
option is selected it will hyperlink to the respective url but yet make
it is compliant with 508.

<label for="quicklinks">Which is your favorite city?</label>
  <select id="quicklinks" name="quicklinks">
<option value="1">CNN</option>
<option value="2">USA TODAY</option>

Jan Morgavan
Received on Friday, 4 January 2002 15:37:27 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:36:06 UTC