Using "label for" on radio buttons

HtmlRadio ButtonLabelSection508

Html Problem Overview

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.

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

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

Solution 3 - Html

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

Categories
Recommended Html Solutions
Recommended Radio Button Solutions
Recommended Label Solutions

Previous Solution:

calculating the difference in months between two dates

C#.NetDatetimeTimespan

Next Solution:

Can a dictionary be passed to django models on create?

PythonDjangoDjango ModelsDjango Queryset

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionWilkieView Question on Stackoverflow
Solution 1 - HtmlMarc WView Answer on Stackoverflow
Solution 2 - HtmlMarthaView Answer on Stackoverflow
Solution 3 - HtmlEbrahimView Answer on Stackoverflow