For example, text displayed adjacent to a checkbox may be visually associated with the checkbox, so it is understood as the checkbox label by users who can perceive that visual association.
However, unless the text is programmatically associated with the checkbox, assistive technology users will experience a checkbox without a label.
- Wrapping the checkbox and the labeling text in a label element as follows gives the checkbox an accessible name.
+ Wrapping the checkbox and the labeling text in a label element as follows gives the checkbox an accessible name. This is often called implicit labeling.
<label>
<input type="checkbox" name="subscribe">
subscribe to our newsletter
</label>
- A form control can also be associated with a label by using the for attribute on the label element.
- This allows the label and the form control to be siblings or have different parents in the DOM, but requires adding an id attribute to the form control, which can be error-prone.
- When possible, use the above encapsulation technique for association instead of the following for attribute technique.
+ A form control can also be associated with a label by using the for attribute on the label element. This is often called explicit labeling.
+ This allows the label and the form control to be siblings or have different parents in the DOM, but requires adding a unique id attribute to each form control.
<input type="checkbox" name="subscribe" id="subscribe_checkbox">
<label for="subscribe_checkbox">subscribe to our newsletter</label>+ While both techniques are equally valid, explicit labeling is currently better supported by assistive technology. When possible, use explicit labeling instead of implicit labeling. +
Using the label element is an effective technique for satisfying Rule 2: Prefer Visible Text.
It also satisfies Rule 3: Prefer Native Techniques.