Re: What is Recommended Practice for "Option Lists"?

Patrick: 

The problem is caused by the behavior of the "onChange" attribute, written in JavaScript, for the <SELECT> tag. In this case, the behavior loads a new window, even without clicking the [Get State Profile!] button associated with the list, whenever the option changes. Disabling JavaScript disables the onChange behavior, and the selection list and form Submit button behave as expected.

As far as I know, there's no way to *navigate* through a selection list by keyboard without also selecting each option of the list in turn. Simply moving through the list "selects" the option, which triggers the onChange event. The only way to avoid "selecting" a state is to *scroll* through the list by clicking the drop-down button, clicking the scroll bar to find the state you want, then clicking the state. Notice the "click, click, click" here. There's no way to do this action by keyboard alone, so this is an accessibility design issue.

This has got me re-thinking a similar function I have on one of my forms form. In my case, selecting the state doesn't switch to a new page, as the Census page does. Instead it fills in a City selection list which follows the State selection list in the form, allowing the user to select a specific city (or default to all cities in the selected state). I think this could still be accessible, as long as the focus doesn't switch away from the State field through which the user is navigating. And yes, my form is designed to work without JavaScript enabled; in that case, City reverts to a simple text field into which the user can enter the city name.



<author>Chris Kreussling</author>
<disclaimer>The views expressed are 
those of the author and do not necessarily 
reflect the position of the Federal Reserve 
Bank of New York or the Federal Reserve 
System.</disclaimer>

>>> <w3c-wai-ig@w3.org> 03/05 12:19 PM >>>
Hello everyone,

The problem I will describe can be found at www.census.gov . There is a
note on
the site describing recent upcoming changes, so it sounds like it might be a
good time for accessibility suggestions.

Is there an agreed fix or method for coding what I will call Option Lists?
Apparently they are meant to pop up (or pull down?) a list of selectable links
when an item is clicked. When I encounter these (mostly using MSIE4.01 + Jaws
For Windows), the result is almost always the same: I get the first item in
the
list, but arrowing down or mouse-clicking or hitting Enter all simply open the
first link, and I can never get to the rest of the list. (Netscape yields
similar results, and it doesn't seem to matter if Java is enabled or not. Lynx
displays the choices in the list but fails to bring up the URLs.)

In looking at the code, this list of items appears to be a <select> ...
<option
...> construction using Javascript. Either this type of code does not
produce a
drop-down list as I expected, or there is some kind of problem in the
rendering
of the code by MSIE and/or its interpretation by JFW. 

There was a similar feature on the Adobe main page, but it is now gone. There
is another similar construct (though it seems to be strictly Javascript
now) on
the Microsoft home page. There was another example on the MS Search page,
which
they have now changed to a much more accessible series of radio buttons.  So
full marks to MS for this change. Would this also be the best solution for the
Census site?

Here is the code from www.census.gov (minus links 2-55, which all have the
same
structure). I don't know how it might be affected by scripts run elsewhere on
the page. Removing line 2 from this code yields a navigable list box of
entries, but then I can't access the CGI script (using the "Choose Profile"
button).

Patrick

----------

                <form ACTION="/cgi-bin/geo/location" METHOD="POST">
                <SELECT NAME="Location"
onChange="window.open(this.options[this.selectedIndex].value,'_top')">
                <option value="http://www.census.gov/datamap/www/">Select a
State</option>
                <option
value="http://www.census.gov/datamap/www/01.html">Alabama</option>
[...]
                <option
value="http://www.census.gov/datamap/www/56.html">Wyoming</option></select>
                <INPUT TYPE="submit" NAME="submit" BORDER=0 VALUE="Get State
Profile!"></form>

Received on Friday, 5 March 1999 13:00:21 UTC