Posted by JWL on 10/31/06 17:07

Hi

I read that it's good accessibility practice to link form labels and
controls like this:

<label>Your name: <input name="name" id="name" type="text"></label>

or this:

<p><label for="name">Your name:</label><br>
<input name="name" id="name" type="text"></p>

What I don't understand is how you do this for radio buttons, e.g.:

<p>
<label for="car">Do you own a car?</label><br>
<input name="car" id="car" type="radio" value="Yes" class="radio"> Yes
<input name="car" id="car" type="radio" value="No" class="radio"> No
</p> ~~~~~~~~

or:

<p>
Do you own a car?<br>
<label><input name="car" type="radio" value="Yes" class="radio">
Yes</label>
<label><input name="car" type="radio" value="No" class="radio">
No</label>
</p>

The first example is incorrect because you can't have the same ID on two
elements. And the second example does not link the question, "Do you
have a car?" with the Yes/No controls (although Yes and No labels are
linked to the controls).

What is the correct approach here?

• Next in forum: Re: Associating labels with form controls
• Prev in forum: Re: replacement for _blank (for ad system), maybe new tab?
• Thread view: Associating labels with form controls

[Reply to this message]