WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form label question

for

From: Jukka K. Korpela
Date: Aug 10, 2007 12:30AM

On Fri, 10 Aug 2007, Sawang Srisom wrote:

> No matter what we are saying, I insist that LABEL is very important--not
> only for blind users but also sighted ones. The point is that it just tells
> us what to fill in.

There are two issues: the label text, and the <label> markup that
associates the label text with the field. They are both important.

> Please keep it simple! Don't make it complicated!

Here the principle "as simple as possible, but not simpler" is
particularly important.

> Below is the sample of how to handle with radio buttons and labels:
>
> <p>
> <label for="gender1 gender2">Gender</label>
> <input type="radio" name="gender" id="gender1" value="Male"
> checked="checked" /> Male<br />
> <input type="radio" name="gender" id="gender2" value="Female"
> checked="checked" /> Female
> </p>
>
> I'm not so sure if this sample is syntactically correct,

I know that it is not.

> but there is no
> error returned when I validate the page with this code.

Then you made an error of some kind or used a phoney validator.

The markup is invalid, and validator issues an error message like

"Error: value of attribute for must be a single token"

since the for attribute is declared as having an IDREF value. This is
natural because it is semantically defined as referring to a single
element by its id attribute value. Pragmatically, if it were allowed to
use two identifiers there, which of the radio buttons should be checked
when the label is clicked on? I'm referring to the common accessibility
feature in modern browsers: when you click on a label, the corresponding
field gets "activated".

The words "Male" and "Female" should both be made labels, for the
corresponding fields. It is less relevant what markup you use for the
question that they relate to. You could put the word "Gender" (or, more
accessibly, "Sex") inside <fieldset> markup, or make it a heading, or just
a <div>, or even (illogically) a <p>; but that's not a big problem.

(And there should be a "neutral" alternative, such as "Do not want to
tell", or maybe several neutral alternatives, including "Not answered
yet", and one of the alternatives should be initially selected. Of course
the trivial set of alternatives discussed here is just an example, but
it's really a _bad_ example, since it's too trivial. For an explanation of
this, see http://www.cs.tut.fi/~jkorpela/forms/choices.html )

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/