Using "label for" on radio buttons

Question

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.

score 226 · Accepted Answer · edited Mar 09 '19 at 12:51

226

You almost got it. It should be this:

<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>

The value in for should be the id of the element you are labeling.

edited Mar 09 '19 at 12:51

Fellow Stranger

32,129
35
168
232

answered Oct 06 '09 at 19:55

Marc W

19,083
4
59
71

4

You answer is of course true, but Martha has the right answer. Both of Martha examples are perfectly valid HTML5. And for example if You want the whole thing to be in a frame, it is easier to style second one using css. If You want labels to be somewhere else, first one. But both are OK. Best regards! – Jacek Kowalewski Feb 07 '14 at 12:47
5

Hmm.. How do you make one label toggle between two radio buttons? You can't have two identical IDs... :/ – Neil S3ntence Mar 02 '16 at 10:03
1

@NilsSens Each radio and label pair should have unique ID's they should never share ID's – Daniel Waters Sep 06 '17 at 10:04
@NilsSens Toggle between 2 radio buttons and they only have 1 label? That sounds like a clear case to use a checkbox instead :D – T_D Mar 13 '20 at 15:16
Ah, no what I meant was one super-label that toggles the radio buttons. Like: Category favourite-fruit and when you click that one, you toggle between idk "banana" & "strawberry" Because, why enforce mouse movement UX when you can just toggle options. Today, I'd use JS to just hand code it, but would be interesting to know if there's a CSS only way :) – Neil S3ntence May 21 '20 at 05:41

Martha · Answer 2 · 2014-02-07T14:37:26.277

90

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;}

edited Feb 07 '14 at 14:37

answered Oct 06 '09 at 20:03

Martha

3,932
3
33
42

9

True, although in the second example, the "for" attribute is not required. – Ishmael Oct 06 '09 at 20:17
4

I think there were some browser versions that only made the button text "clickable" if you used the 'for' attribute, i.e. wrapping the input inside the label wasn't enough. – Martha Oct 06 '09 at 21:29
@Martha - Do you know which browsers? – Kirkland Sep 11 '13 at 23:44
@Ishmael - Can you cite a source? – Kirkland Sep 11 '13 at 23:44
2

@Kirkland - http://www.w3.org/TR/html401/interact/forms.html#h-17.9 seems to indicate that the second form is valid, but several sources indicate support may not be universal. It's probably best to provide the `for` attribute in any case. – Ishmael Sep 12 '13 at 13:52
@Ishmael Does the same go for checkboxes? – Ralph David Abernathy Jun 21 '16 at 17:19
1

@RalphDavidAbernathy Yes, the same rules apply for check boxes. – Ishmael Jun 23 '16 at 14:56

score 1 · Answer 3 · answered Apr 23 '19 at 21:02

(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" />

       <label for="r1_1">button text one</label>
       <br/>
       <input type="radio" name="r1" id="r1_2" />

       <label for="r1_2">button text two</label>
       <br/>
       <input type="radio" name="r1" id="r1_3" />

       <label for="r1_3">button text three</label>

Using "label for" on radio buttons

3 Answers3

Linked