Labels are used to provide necessary information to the user to ensure that the component’s purpose is clear. The use of labels to provide guidance on how to fill out the form will ensure that screen reader users are also provided with the required instructions. When the screen reader enters the form area the assistive technology may ignore all elements within the form except for the form labels, fields and legends. Therefore, it is important that each form field has an associated label to provide these instructions to the screen reader user.
It is recommended to always use HTML native form fields and labels whenever possible such as the <input>, <label> and <button> elements. The labels associated with the input elements are spoken by the screen readers when the fields receive focus and users with impaired motor skills will have a larger target area as they can click on the label to gain focus on the input field or button.
The labels should provide a clear and concise description to provide a clear purpose of the component. To be clear the label can contain instructions for the type of input needed or describe the formatting that is required for the input to be accepted when submitting the form. By describing the format then the user can avoid potential input errors before submitting. The labels can also be used to include a text or symbol which indicates that the field is required.
Using Labels with Form Fields
The <label> element should explicitly associate a form field with a label. The label is attached to the specific form element by using the “for” attribute on the label and the “id” attribute on the form element. The “id” and “name” attributes must both be provided to the form field. The id and the name value can be identical, but the “id” attribute must be unique to each form field.
When using input elements of “type” checkbox and radio the label element should always be placed after the <input> element.
Label elements should be associate with the following form elements:
- Input type = "text"
- Input type = "checkbox"
- Input type = "radio
- Input type = "file
- Input type = "password"
For some form controls the description is provided though different attributes and do not require an associate label element. Submit and reset buttons use the “value” attribute, image buttons use the “alt” attribute
- Input type = "submit"
- Input type = "reset"
- Input type = "image"
ARIA techniques should be used as a last resort. Please refer to the ARIA techniques web page for more information on ARIA.
Example 1: Date input field with formatting requirements
Below is an example of a form field with the associated label describing the information needed to be inputted in the text box.
<label for="date">Date (dd-mm-yyyy)</label>
<input type="text" name="date" id="date" />
Example 2: Using labels with radio buttons
<input type="radio" name="semester" id="fall" value="fall" />
<input type="radio" name="semester" id="winter" value="winter"/>
<input type="radio" name="semester" id="spring" value="spring"/>
<input type="radio" name="semester" id="summer" value="summer"/>
How to Test
Testing for form accessibility requires a variety assessment including form field validation, navigation, user interaction and submission in order to meet form accessibility standards. For a list of all items that must be considered, refer to the Best Practices for Accessible Forms page.
Automated Testing Tools
WebAIM WAVE Toolbar
- Activate the WAVE toolbar and navigate to the “Details” panel. In that panel
- Navigate to the “Features” section
- Review all form fields that are present in the webpage.
Web Content Accessibility Guidelines (WCAG 2.1)
- Labels or Instructions: Understanding SC 3.3.2
- G131: Providing descriptive labels
- G89: Providing expected data format and example
- G83: Providing text descriptions to identify required fields that were not completed
- G162: Positioning labels to maximize predictability of relationships
- H90: Indicating required form controls using label or legend
- H44: Using label elements to associate text labels with form controls