Form labels
Associate clear labels or instructions with every form control that require user input
Why it matters
Labels and instructions help users know how to successfully complete a form. Labels are needed to identify the controls and understand the required input. Labels should describe the purpose of the form control. When the labels are marked up correctly, people can interact with them using only the keyboard, using voice input, and using screen readers. Also, the label itself becomes clickable, increasing the target area and making it easier to select small radio buttons or checkboxes.
WCAG 2.0 reference: 3.3.3 Labels or Instructions, 2.4.6 Headings and Labels
Example 1
Associating labels explicitly. Use the <label> element to associate text with form elements explicitly. The for attribute of the label must exactly match the id of the form control. Another approach is to use WAI-ARIA attributes.
<div class="sds-input-container">
<input type="text" name="email" id="email" class="sds-text-field" placeholder=" ">
<label for="email" class="sds-label">Email</label>
</div>
Example of labels in a text-field
How to check for this
- Check that every form control has a label associated with it using the
<label>element, with theforandidattributes. Automated - Check that each label makes the component’s purpose clear. Manual
- Check that any fields that are required/mandatory are clearly indicated. Manual
- Check that any instructions for completing the form are before they are needed. Manual
Collaborators
- Designers