Associating labels with form controls

[JWL]

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?

 

[Benjamin Niemann]

Hello,

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).

Which is the correct and intended behaviour. Most browsers interpret a click
on the label as a click on the control - do you think that clicking on 'Do
you own a car?' should be understood as answering this question?

So 'Do you own a car?' is not a label for a control. It's more like a
heading for a group of control, so you could use

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

If you want to label radio controls and you have to use <label for=..>, then
give every input a different ID:

<input name="car" id="carYes" type="radio" value="Yes" class="radio">
<label for="carYes">Yes</label>
<input name="car" id="carNo" type="radio" value="No" class="radio">
<label for="carYes">No</label>