If an element with one of the above roles that supports naming from child content is named by using aria-label or aria-labelledby, content contained in the element and its descendants is hidden from assistive technology users unless the descendant content is referenced by aria-labelledby.
It is strongly recommended to avoid using either of these attributes to override content of one of the above elements except in rare circumstances where hiding content from assistive technology users is beneficial.
In addition, in situations where visible content is hidden from assistive technology users by use of one of these attributes, thorough testing with assistive technologies is particularly important.
The HTML label element enables authors to identify content that serves as a label and associate it with a form control.
When a label element is associated with a form control, browsers calculate an accessible name for the form control from the label content.
-
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.
<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.
+ HTML provides two ways of associating a label with a form control.
+ The one that provides the broadest browser and assistive technology support is to set the for attribute on the label element to the id of the control.
+ This way of associating the label with the control is often called explicit association.
<input type="checkbox" name="subscribe" id="subscribe_checkbox">
<label for="subscribe_checkbox">subscribe to our newsletter</label>
+ The other way, which is known as implicit association, is to wrap the checkbox and the labeling text in a label element.
+ Some combinations of assistive technologies and browsers fail to treat the element as having an accessible name that is specified by using implicit association.
+
<label>
+<input type="checkbox" name="subscribe">
+subscribe to our newsletter
+</label>
Using the label element is an effective technique for satisfying Rule 2: Prefer Visible Text.
It also satisfies Rule 3: Prefer Native Techniques.