Difference between for and aria-labeled-by

Question

Can sommeone explain me the difference between using the for-attribute on a label and using the aria-labelled-by-attribute on the input.

As far as I know aria-labelled-by allows multiple elements (e.g.radio buttons) to be labelled by the same label whether for relies on the id of the elements which should be unique and can therefore only assigned to one element.

So in which case should I use for and in which case aria-labelled-by?

Answer 1

The main difference is that for attribute has the functional purpose. for attribute is used to chain the label with specified form field of some id. For example:

<div>
  <input type="checkbox" id="checkboxId" />
  <label for="checkboxId">My cool checkbox with clickable label</label>
</div>

<div>
  <input type="checkbox" id="checkboxId2" />
  <label>My cool checkbox without clickable label</label>
</div>

As you can see, the label with specified for attrubute has ability to toggle checkbox of id that is specified in this for attribute.

---

The ARIA attributes are mainly used to make you application accessible for people with some kind of disabilities (e. g. to make you application suitable with screen-readers, etc.). The ARIA attributes have no direct functional purposes, they are only about accessibility

<input aria-labeledby="myLabel" type="checkbox" id="checkboxId" />
<label id="myLabel">My cool label</label>