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

RE: Proper Coding for Yes/No Questions

From: Jukka Korpela <jukka.korpela@tieke.fi>
Date: Wed, 6 Mar 2002 14:06:52 +0200
Message-ID: <621574AE86FAD3118D1D0000E22138A9418539@TIEKE1>
To: "WAI (E-mail)" <w3c-wai-ig@w3.org>
Kynn Bartlett wrote:

> <fieldset>
>    <legend>Are you smart?</legend>
>    <label for="smartYes">Yes</label>
>    <input type="radio" id="smartYes" value="yes" name="smartYes" />
>    <label for="smartNo">No</label>
>    <input type="radio" id="smartNo" value="no" name="smartNo" />
> </fieldset>

That's the approach I'd favor into, too, with some modifications:

- Change the order of <label> and <input>, for reasons mentioned
  in the thread. The order becomes slightly less logical, but
  it's the conventional one already, and browsers and assistive
  tools are probably used to it too.

- Wrap each part (<input> and <label>) inside a <div> element, to make
  sure that the items (button and text) each appear in a line of its own,
  which is probably the most important accessibility thing at present
  in practice. Alternatively use <br>, but <div> looks a bit more
  structural.

- Include a "dummy" selection, normally as the first item, e.g.
    <div>
    <input type="radio" id="smartDunno" value="dunno" name="smart" />
    <label for="smartDunno">Don't know</label>
    </div>

> The redundant name attribute is there for backwards compatibility.

As far as I can see, the name attribute is _needed_, not for compatibility
but because it's the only thing that can specify the name of the form
field, or "control" in the HTML spec terminology. Without name, the
field can give no contribution to the form data set. Form submission
is defined in terms of "successful controls", which are defined as those
with "control name", and:
   A control's "control name" is given by its name attribute.
Ref.: http://www.w3.org/TR/html4/interact/forms.html#h-17.13.3

In XHTML 1.1, the name attribute has been replaced by id, but for
<a> and <map> elements only; see
http://www.w3.org/TR/xhtml11/changes.html#a_changes
And XHTML 1.0 deprecated it for some other elements as well, but
_not_ for <input>.

Besides, the name attribute value must be the same for all radio buttons
that are to behave as a group, from which exactly one can be selected,
which is the whole idea of using radio buttons.

> You could eliminate the for attributes if you wanted, by
> wrapping the <label> around the <input>:

I'd surely want to! I hate inventing names for ad hoc purposes, especially
since I tend to make mistakes by not using unique names, when I have
lots of names to assign.

But, alas, it seems that by using that simpler, more natural approach,
important accessibility enhancements are missed. If I use

<label for="smartyes"><input type="radio" id="smartyes"
   name="smart" value="yes" />Yes</label>

then Internet Explorer (at least 5.5, on Windows) has some nice features:
when the field is focused on, IE's "selection rectangle" (small dotted line)
appears around the box containing both the button and the text. Moreover,
the button can be selected either by clicking on the button or by clicking
on the text (and naturally using keyboard too).

The "selection rectangle" is a visual hint which may help people with
cognitive problems. The possibility of clicking on the text helps people
with motoric problems; it can be difficult to hit on a radio button, which
is fairly small, typically.

But I simplify this to

<label><input type="radio" name="smart" value="yes" />Yes</label>

then those features are lost. And if I put the <input> element outside the
<label> element, the "selection rectangle" appears around the label text
only!

Thus, my suggestion is:

<fieldset>
 <legend>Are you smart?</legend>
 <div><label for="smartdunno">
   <input id="smartdunno" type="radio" name="smart"
    value="?" checked="checked" /> I don't know
 </label></div>
 <div><label for="smartyes"> 
   <input id="smartyes" type="radio" name="smart"
    value="yes" /> Yes
 </label></div>
 <div><label for="smartno">
   <input id="smartno" type="radio" name="smart"
    value="no" /> No
 </label></div>
</fieldset>

-- 
Jukka Korpela
TIEKE Tietoyhteiskunnan kehittämiskeskus ry
Finnish Information Society Development Centre 
Salomonkatu 17 A, 10th floor, FIN - 00100 HELSINKI, FINLAND
Phone: +358 9 4763 0397 Fax: +358 9 4763 0399 
http://www.tieke.fi  jukka.korpela@tieke.fi
Received on Wednesday, 6 March 2002 06:58:34 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 19 July 2011 18:14:00 GMT