feedback:Fw: Drop Down Menus

----- 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
a
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
the
complications of the onchange event handler typically used with them
that
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()">
<option
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
simple
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
the
top of the page. If you reveal the source code for that page, you can
see
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
to.

The solution for providing accessibility with select boxes is to refrain
from using onchange entirely. Instead, the developer needs to insert a
new
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
anchor
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>

</select>

...

</form>

...

<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'
name)
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
form
and then opted for an 'onclick' event handler that invoked exactly the
same
'myFunction()' function.

Unfortunately, the select tag itself supports relatively few event
handlers
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
directly
and expect reliable behavior across different platforms. Fortunately,
the
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
that
I've seen thus far.



That was from Ken Nakata at Justice. The only change I'd add is to say
that
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
been
looking at some coding examples similar to the one below that is written
for
accessbility. What I would like to code is a drop down menu that will
take
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
assuming
the **value="1"** format is needed for the user agent (ATs) to read the
menu??

The question I need to resolve is how to convert this code so that when
an
option is selected it will hyperlink to the respective url but yet make
sure
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>
  </select>


Jan Morgavan
AT&T

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