element is invisible to users (unless it’s styled with CSS, or behavior is
label to a form control’s descriptive text makes no
difference to its visual appearance. However, there are other benefits to
be gained by explicitly linking the text to the form control using the
- It provides a usability improvement for mouse users. In the
majority of current web browsers, the text that’s associated with a
given form control (by being contained within the
</label>tags) also becomes a clickable area. Thus, if the form control is something small, like a checkbox or radio button, you can massively increase the “hit area” for the mouse user by applying a
- It improves accessibility. By adding a
labelto all controls, you make the controls’ purpose clear to users of assistive technology (for example, visually impaired users reading the page through a screen reader). If the form controls aren’t linked to their associated text descriptions in this way, the assistive technology may need to hazard a guess as to which control goes with which description, depending on the layout of the web page and/or the source order of the markup to make its interpretation.
Note that there are two ways (implicit and explicit association)
in which you can use the
label element, both of which
are detailed in the section on the
attribute. Explicit association, using the
attribute, is the safer option.
element links the text “Not Applicable” with the form control that has the
<input type="radio" name="radFriendship" value="Not_Applicable" id="b"/> <label for="b">Not_Applicable</label>
Use This For …
used to link the descriptive text for a given form control directly to
Every browser listed supports this element type.
Safari 2 and earlier versions didn’t support the feature that allows users to click on a label to focus on the associated form control, but thankfully, this functionality was added in version 3.