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.

Hermosillo

Answer 1

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.

Romanaromanas

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! – Wynellwynn

Hmm.. How do you make one label toggle between two radio buttons? You can't have two identical IDs... :/ – Marigraph

@NilsSens Each radio and label pair should have unique ID's they should never share ID's – Conics

@NilsSens Toggle between 2 radio buttons and they only have 1 label? That sounds like a clear case to use a checkbox instead :D – Caudex

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 :) – Marigraph

Answer 2

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

Brotherly

True, although in the second example, the "for" attribute is not required. – Thallophyte

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. – Brotherly

@Brotherly - Do you know which browsers? – Sada

@Thallophyte - Can you cite a source? – Sada

@Sada - 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. – Thallophyte

@Thallophyte Does the same go for checkboxes? – Keening

@RalphDavidAbernathy Yes, the same rules apply for check boxes. – Thallophyte

Answer 3

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

Ussery