Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases this is done by using the
<label> element and in some cases the
Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels so that they are properly associated with form controls. Later sections explain how to provide instructions, validate user input, and provide feedback to help users complete your form.
Labels and their related form control must be associated with each other either implicitly or explicitly. This allows the browser to do things like use the label as a larger clickable area to access or activate the control, and ensures assistive technology can refer to the correct label when presenting a form control.
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
<label> element. In the following example, the
<input> element of type
text allows users to provide their first name. This input field is embedded inside a
<label> element with the text "First name:", to indicate the purpose of the input field to the user:
Associating labels explicitly
for attribute of the
<label> element to explicitly associate labels with their 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 the controls 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 designed to look like a table.
Associating labels to buttons
… using the
When using the
<input> element to create buttons, the label is set in the
value attribute of the element.
Note: If the image button (
<input type="image">) is used, the label is set in the
alt attribute, for example:
<input type="image" src="searchbutton.png" alt="Search">.
… using the
<button> element gives more flexibility as the label is set inside the element which can include markup to be more specific.
In left-to-right languages it is customary to visually position labels to the right of radio buttons and checkboxes, and to the 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 proximity of other nearby form fields and content, and needs to be assessed individually. The aim should be to maintain a close visual relationship between the label and the form control.
A label for a form control helps everyone better understand its purpose. In some cases the purpose may be clear enough from the context when the content is rendered visually. In such cases a label can be hidden visually though it still needs 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.
Hiding the label element
<label> element is provided to identify the form element within the code, but is visually hidden to avoid redundancy for those who don't need it.
aria-label provides the label to assistive technology.
Set of form controls
In the following example, the user is asked to provide date of birth. There are three form controls; a small text field for day of month, a pull-down menu for month, and a slightly larger text field for year. The text controls also use placeholder text 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.
Hiding the label element
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 for each.
The code can be simplified by using
aria-label, with the same outcome as above. It is however less flexible, for example, if the labels need to be shown or hidden depending on the screen size.
Note on hiding elements
Screen readers and other assistive technology, as with web browsers, hide elements from their users when they are styled using
display: none; and
visibility: hidden;. Use CSS that will display the elements yet make them virtually invisible 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:
title attribute can be used to identify form elements. This approach is generally less reliable and not recommended 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. The information of the
title attribute is shown to visual users as a tool tip when hovering over the form field with the mouse.
aria-label attribute can also be used to identify form elements. This approach is generally well understood by screen readers and other assistive technology, but, unlike the
title attribute, does not convey the information to visual users.
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
- H65: Using the title attribute to identify form controls when the label element cannot be used
- H93: Ensuring that id attributes are unique on a Web page