Form <input> elements must have labels
Each form element must have a programmatically associated label element.
Why it Matters
Programmatically associate labels with all form controls. The recommended method for most circumstances is to use the
label element and an explicit association using the
<label for="firstname">First name:</label> <input type="text" id="firstname">
The label can also be implicit by wrapping the
<label> element around the input:
<label>First name: <input type="text"></label>
An alternative method (sometimes used when adding a
<label> tag would break functionality or styles, or when multiple labels apply to the same input), is to use
<div id="firstname">First name:</div> <input type="text" aria-labelledby="firstname">
<!--visual labels may be elsewhere in the content, such as in table headers--> <div id="temperature">Temperature:</div> <div id="high">High:</div> <div id="low">Low:</div> <!-- the inputs --> <input type="text" aria-labelledby="temperature low"> <input type="text" aria-labelledby="temperature high">
If the input is already labeled visually some other way, such as through a magnifying glass icon on a search submit button, it may be acceptable to use
aria-label to create an invisible text label for screen readers to read.
<input type="text" aria-label="Search">
Also ensure that all
id elements are unique on each page, and that the label text makes sense to someone listening to them with a screen reader.
Form elements that should have labels
- Text entry fields, e.g.
- Radio buttons,
- Select menus,
The only exceptions for this requirement are:
- Buttons — buttons are self-labeling
- Hidden inputs — Inputs with the type attribute value of hidden (e.g.,
type="hidden"). These inputs are hidden and unavailable for user input. They therefore need no label.
When adding labels, be sure to avoid the following:
First name: <input type="text" name="fname">
This markup renders to produce a textbox with the words “First name:” next to it. Sighted users have no problem associating the text with the input field. Nevertheless, this connection is not as clear for non-sighted users, especially as forms grow longer and more complex. This ambiguity can make errors more likely, especially when the information required is more complex than a first name.
For detailed instructions on how to implement these various labelling methods, see the Automated Checks that run as a part of this rule.
Finally, ensure that each
input element has only one label. Note that if any of your
input elements have help text, be sure this text differs from the
label element text.
How to Fix the Problem
The Algorithm (in simple terms)
Ensures that every form element has a programmatically associated label.