|
|
Posted by Benjamin Niemann on 10/31/06 17:39
Hello,
JWL wrote:
> 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>
--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://pink.odahoda.de/
Navigation:
[Reply to this message]
|