Add labels to inputs and other controls
Overview
Labels tell the user what to put into a text input, a checkbox/radio button, or what will happen if a button is pressed. Labels also provide a benefit of putting the user in the field if they click on an actual label for a text input.
Best Practices
Labels must be programmatically connected to their input
This means a label's for="" attribute must match the related input's ID value exactly.
<label for="name">
Name (4 to 8 characters):
</label>
<input type="text" id="name" name="name"
required size="10">
Note: even if the input ID was spelled uppercase ("Name"), the label won't be appropriately tied since the label is looking for an input with an ID of "name" in lowercase.
Labels need to be clear and concise
If labels are tied appropriately to their corresponding input, the label will be announced to screen readers again as they enter the input. A visitor that uses speech recognition may also need to speak the entire label in order to choose the intended input.
The label should have just enough information for users to understand how to fill out the field.
Labels should be close to the input
Some users may have to use zoom controls or increase their browser font size to use web content. If the screen doesn't reflow properly and a user zooms in, the label may disappear from the screen, leaving the user to wonder what goes in the field.
If the label is near the input, the instructions will still be clear.
Inputs that need <label>
- Text entry (
input type="text", textarea, input type="date", etc.) - Radio buttons (
input type="radio") - Checkboxes (
input type="checkbox") - Selects (
select)
Controls that don't need <label>:
- Buttons or links—these controls are self-naming through their tag value
input type="submit"—the value attribute provides the accessible name (i.e.input type="submit" value="Submit")- Hidden inputs (
input type="hidden")
Pattern Examples
Note: the following fields are not submittable.
<label for="example-input" class="example-label">Name (required)</label><input id="example-input" type="text" />
<input checked="checked" id="shakesp" name="hamlet" type="radio" value="a" /><label for="shakesp">William Shakespeare</label><input id="kipling" name="hamlet" type="radio" value="a" /><label for="kipling">Rudyard Kipling</label>
Guidance on placeholders
You may see examples of form inputs that have placeholder text, like in the example below:
Having only placeholders as the input's name creates a number of accessibility issues:
- They typically don't meet color contrast requirements.
- They disappear once you type in the input, which is problematic for users with memory-related disabilities.
- Assistive technologies don't treat placeholders as true HTML labels.
A more accessible approach is to keep the label visible for all users. If form inputs are simple, a label element should be enough to explain the purpose of the field without needing a placeholder. If needed, helper text can be associated through code so it is announced when entering a field:
First and last