Should I associate labels with radio buttons/checkboxes?

1

I’ve learned to associate labels with inputs for accessibility reasons.

In the project example, some of the labels are associated with their corresponding inputs:

https://codepen.io/freeCodeCamp/pen/VPaoNP?editors=1100

But the radio buttons/checkboxes aren’t associated. I realize that the labels of the buttons are associated to the buttons themselves (so you click on the label and button is selected). Should the label of the list be associated with the list as well? Does that even do anything? I don’t have a great understanding the screenreader-implications so I’m not sure if this would be useful somehow.

2

Nesting the input elements inside a label element creates an implicit connection.

label

Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:

But I believe I have seen some articles that suggest using explicit connections (for and id) may give better/broader support for assistive technologies.

Not sure I understand this? What do you mean by “the list”?

3

Thanks. In the example, there are div classes on the left that label the inputs (which appear on the right). They are associated to the inputs on the right with for and id. So if you click “name”, it highlights the name text box, for example.

But if you click the label for

24
24864×198 11.2 KB
“*how likely is that you…”, nothing happens. The label on the left “*how likely is that…” is not associated with the input on the right via a for/id (whereas the other inputs are):

<div class="rowTab">
      <div class="labels">
        <label for="userRating">* How likely is that you would recommend freeCodeCamp to a friend?</label>
      </div>
      <div class="rightTab">
        <ul style="list-style: none;">
          <li class="radio"><label>Definitely<input name="radio-buttons" value="1"  type="radio" class="userRatings" ></label></li>

as opposed to:

<div class="rowTab">
      <div class="labels">
        <label id="name-label" for="name">* Name: </label>
      </div>
      <div class="rightTab">
        <input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required>
      </div>
    </div>

Again, I don’t even know if you can associate a label to an entire list (this is what I meant by “the list”- the entire <ul> list) I know that the buttons within the list are associated with the labels for the buttons- but the list is not associated with the label for the entire radio button input (which is presented by using an <ul>)…

4

Those labels should not have the for attribute on them at all. It will cause a validation error because no input is associated with the label.

Error: The for attribute of the label element must refer to a non-hidden form control.

They don’t really even need to be label elements.

I did a PR on the project and I’m hoping to get it fixed. There are a few other issues with this project that needed to be fixed as well, some of which you have already pointed out. I just never got around to fixing this project when I was working on the other projects.

1 Like
5

Ok thank you. Is it appropriate for the other elements (such as the text/dropdowns) to be label elements and have the for attribute, because they are associated with an input element? i.e. you click on “email”, it selects the “email” text box? That’s appropriate correct?

6

Yes that is correct.

1 Like