Descriptive labels help users understand the purpose of a form control. Labels should be associated with their controls so that when the input is focused, the label is announced by screen readers.
Examples
✓ An explicit label
The HTML label element can be used to provide a label or "accessible name" for an interactive form element. However, it does not work on its own: You have to code a relationship between the label and the input. An "explicit" label is achieved by using the for attribute to associate the label with the input's id, like so:
<label for="firstname">Your first name</label>
<input id="firstname" type="text" />
Now, when the screen-reader user focuses the input, it will announce the label's text content, "your first name" (as well as information about the input’s type and state). Note that the value of the label’s for attribute must match the id of the form field that it refers to.
✓ An implicit label
Another option, which might better suit your style of markup, is to use "implicit" labeling. The same result is achieved without an explicit for relationship explicitly but instead by placing the form field inside its label element:
<label>Your first name
<input id="firstname" type="text" />
</label>
Note that in both cases, clicking the label will result in the input element being focused, ready to receive input.
✗ Bad example
HTML5 provides the placeholder attribute for showing hints about what to enter into the field. In this case, a suitable placeholder might be "Example: John". It is not appropriate to use the placeholder as the input's sole label because:
- It is not as robust or as well supported in screen readers
- The placeholder disappears on focus, potentially confusing sighted keyboard users
- The default display color of the placeholder text may have insufficient contrast against the form field’s background color.
<!-- Don't do this without also giving the field a label: -->
<input id="firstname" type="text" placeholder="your first name" />