When using the "label for" parameter on radio buttons, to be 508 compliant*, is the following correct?
<label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label>
or is this?
<input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>
Reason I ask is that in the second example, "label" is only encompassing the text and not the actual radio button.
*Section 508 of the Rehabilitation Act of 1973 requires federal agencies to provide software and website accessibility to people with disabilities.
This question is related to
html
radio-button
label
section508
(Firstly read the other answers which has explained the for
in the <label></label>
tags.
Well, both the tops answers are correct, but for my challenge, it was when you have several radio boxes, you should select for them a common name like name="r1"
but with different ids id="r1_1" ... id="r1_2"
So this way the answer is more clear and removes the conflicts between name and ids as well.
You need different ids for different options of the radio box.
<input type="radio" name="r1" id="r1_1" />_x000D_
_x000D_
<label for="r1_1">button text one</label>_x000D_
<br/>_x000D_
<input type="radio" name="r1" id="r1_2" />_x000D_
_x000D_
<label for="r1_2">button text two</label>_x000D_
<br/>_x000D_
<input type="radio" name="r1" id="r1_3" />_x000D_
_x000D_
<label for="r1_3">button text three</label>
_x000D_
Either structure is valid and accessible, but the for
attribute should be equal to the id
of the input element:
<input type="radio" ... id="r1" /><label for="r1">button text</label>
or
<label for="r1"><input type="radio" ... id="r1" />button text</label>
The for
attribute is optional in the second version (label containing input), but IIRC there were some older browsers that didn't make the label text clickable unless you included it. The first version (label after input) is easier to style with CSS using the adjacent sibling selector +
:
input[type="radio"]:checked+label {font-weight:bold;}
Source: Stackoverflow.com