Status: This is an in-progress, unapproved draft.
Provide labels to identify all form controls including text fields, checkboxes, radio buttons, drop-down menus, and button elements. In most cases this is done by using the
<label> element, and in rare cases the
Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels in ways so that they are properly associated with form controls. Later sections explain how to provide instructions, check user input, and provide feedback to help users complete your form.
Associating labels implicitly
The most basic way to associate labels with form controls is to provide both the label and the form control within the same
Associating labels explicitly
You can also use the
for attribute of the
<label> element to associate labels with form controls. The value of the
for attribute must exactly match the value of the
id attribute for the referenced form element.
This approach is more robust because it explicitly associates the labels with the form elements within the code. It allows the labels and form controls to be displayed separately, for example on a mobile device when only one of them can be displayed at a time. It is also independent of the HTML code structure, which is particularly useful when the label text and form element are not included within the same parent element in the HTML code. For example, when the form is formatted to look like a table, as in the example below.
In left-to-right languages it is custom to visually position labels to the right of radio buttons and checkboxes, and to left or directly above other form fields. Maintaining this practice increases predictability and understandability of your form for all users.
In general, placing labels above the form fields helps reduce horizontal scrolling for people using screen magnification and for mobile device users. However, the usefulness of this approach depends on other design aspects, such as the placement of other nearby form fields and content, and needs to be assessed individually.
Labels for form controls help everyone better understand their purpose. In some cases the purpose may be clear enough from the context, when the content is rendered visually. In such cases the labels can be hidden visually though they still need to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
Single form control
In the example below, the search field is positioned directly beside the search button. The purpose of the form field is evident from the context in most situations. A label is provided to identify the form element within the code, but is visually hidden to avoid redundancy for those who don't need it.
Set of form controls
In the following example, the user is asked to provide the date of birth. There are three form controls, one of which is a pull-down menu with the text “January” visible. The other two form controls are text fields placed just before and after the pull-down menu. They have different sizes that match the 2-digit day of the month and 4-digit year numbers. There is also placeholder text provided to further indicate the purpose of these two fields. A single visible label "Date of birth" is sufficient to explain this related set of form controls in most situations.
To make the code more robust and address other situations, such as displaying the form controls individually on a mobile device, hidden labels have been provided for each form element. They are now identified as “Day”, “Month”, and “Year” within the code.
Note 1: The label “Date of birth” is associated with the first form field "Day", so that the focus is set on this first form field when the label is clicked. HTML allows form fields to be associated with more than one label.
Note 2: While the example above works, it is preferable to avoid such compounded groups of form fields where possible. In most situations forms are clearer and easier to understand when form controls are designed to be presented individually and with visible labels each.
Note on hiding elements
Just like web browsers, screen readers and other assistive technology hide elements from their users when they are styled using
display: none; and
visibility: hidden;. Use a styling that will display the elements yet make them virtually non-visible to hide them visually but keep them active for screen readers and other assistive technology. The CSS code used in the previous examples is provided below:
Using the title attribute
The example below uses the
title attribute of the form element to identify it. This approach is generally less reliable because some screen readers and assistive technology do not interpret the
title attribute as a replacement for the label element, possibly because the
title attribute is often used to provide non-essential information.
Related WCAG2.0 Resources
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)
- G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- G131: Providing descriptive labels
- G162: Positioning labels to maximize predictability of relationships
- G167: Using an adjacent button to label the purpose of a field
- H44: Using label elements to associate text labels with form controls
- H93: Ensuring that id attributes are unique on a Web page