WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Form Labels

for

From: Jukka Korpela
Date: Sep 30, 2002 11:51PM

Andrew Johns wrote:

> In my experience, I've achieved accessibility in this
> situation by using the fieldset tag, to group the 3 elements
> together under the heading "Date" and then use label on the
> individual drop downs, for example:
>
> <fieldset>
> <legend>Date</legend>
> <label for="day">Day:</label><input type="text" name="day" id="day">
> <label for="day">Month:</label><input type="text"
> name="month" id="month">
> <label for="day">Year:</label><input type="text" name="year"
> id="year">
> </fieldset>

Actually, that example does not use dropdowns - but text input is actually
better here, for accessibility and for general usability. Most people surely
type a few digits faster than pick up an item from a dropdown menu of, say,
31 items. And having to _listen_ to the alternatives one, two, three (you
get the point) before getting to the right one is frustrating. Admittedly
dropdown menus have the benefit of specifying a finite number of
alternatives.

(Besides, you surely meant the 2nd and 3rd label have for="month" and
for="year".)

To cope with some technologies and situations, it would be better to put
each of the label/field pairs on a separate line, using <br> or
<div>...</div>. I know that designers won't like this. (Then the question
is: are forms for getting user input the right place to do some artistic
design?)

> Then I'd use styles to style it appropriately, e.g. to make
> the legend appear more like the rest of the form labels, and
> to hide the unwanted labels (day,month,year) from browsers
> that support CSS.

The main problem is that it works too often, even if you take precautions so
that the CSS rules would apply to visual presentation only. That is, most
users would see just three input boxes. Presumably in the real life you
would use size="2", size="2" and size="4" for them. It's still not evident
whether the first one is for month or for day, i.e. whether American-style
or non-American-style of date notations is to be used. Besides, is the month
to be written using digits, or an abbreviation of month name (or full month
name)? Shall the year be written in four-digit format, or two-digit format.
The visual appearance of the input field might give a hint, or it might not.

In small forms, it might be sufficient to say at the very beginning that
dates are to be written so-and-so. But people tend to forget things, and
some people forget things very easily.

It is true that server-side form handlers could, and should, be programmed
to perform consistency checks (and to accept input in different formats
where sensible), but as far as possible, errors in user input should be
prevented rather than reported for correction. And a simple way to prevent
errors (in the sense of inputting something that the handler cannot handle,
or interpret properly) is to tell exactly what is expected. Such as:

<div><label for="month">Month (number):</label><input type="text"
name="month" id="month" size="2" maxlength="2"></div>

This approach almost always means that we have a single input field,
together with the associated label and normally without anything else, on
one line. And this avoids the problem of finding a way to use the same label
for several fields.

--
Jukka Korpela, senior adviser
TIEKE Finnish Information Society Development Centre
http://www.tieke.fi/
Diffuse Business Guide to Web Accessibility and Design for All:
http://www.diffuse.org/accessibility.html


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