Module 8: Accessibility · Lesson 4 of 7
How to Connect a Label to an Input in HTML (for and id)
All lessons in Module 8
Goal: Find and fix form fields whose labels are missing or not connected.
Learn
A label helps only when it is connected to its field. Then a screen reader announces "Email, edit text" as the field gets focus, and a click on the label puts the cursor in the field. Without the connection the user hears "edit text" and nothing else. Edit what? The HTML standard calls the connected field the labeled control (opens in a new tab) of its label.
You can connect them in two ways:
- Use for and id:
<label for="email">plus<input id="email">. The values have to match exactly, letter for letter. - Wrap the field:
<label><input type="checkbox"> Remind me</label>. This suits checkboxes and radios.
Watch for two traps. A placeholder is no label, since it vanishes once you type. And a <p> beside a field is plain text that only looks like a label.
The short version
<label for="x">connects to the field withid="x". The match is exact and case-sensitive.- Putting the field inside
<label>connects them too, with no id needed. - A connected label gives the field its spoken name and makes the label text clickable.
- Each id on a page has to be unique, or labels end up pointing at the wrong field.
Example
<form>
<label for="email">Email</label>
<input type="email" id="email" name="email">
<label>
<input type="checkbox" name="news"> Send me the newsletter
</label>
</form>Your task
Every field in this bike repair form is broken for screen reader users. Click each label in the preview. If the field doesn't get focus, the label isn't connected. Fix them:
- The name field only has a placeholder. Add
<label for="fullname">Full name</label>and give the inputid="fullname". - The email label says
for="mail", but the input's id isemail. Make them match. - "Bike type" is a
<p>. Turn it into a label connected to the select (its id isbike). - For the reminder checkbox, wrap the checkbox and its text in a
<label>.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<label for="email">Email</label>
<input type="email" name="email">Right
<label for="email">Email</label>
<input type="email" id="email" name="email">for looks for an id, and the name only matters for what the form sends to the server.
Wrong
<label for="email">Your email</label>
<input type="email" id="email">
<label for="email">Friend's email</label>
<input type="email" id="email">Right
<label for="your-email">Your email</label>
<input type="email" id="your-email">
<label for="friend-email">Friend's email</label>
<input type="email" id="friend-email">When an id appears twice, both labels connect to the first field, and the second field ends up with no name.
Go deeper
The label text becomes the field's accessible name, the name assistive technology uses. Voice control users depend on it as well. They say "click Email" to reach the field. WCAG 2.2 asks that the accessible name contains the visible label text (success criterion 2.5.3, Label in Name (opens in a new tab)), and a connected label gives you exactly that.
Groups of radio buttons or checkboxes need labels at two levels: one per option, plus a question for the whole group. Wrap the group in <fieldset> and put the question in <legend>. A screen reader then announces Bike type, group before Road, radio button. You built one in the lesson on buttons and fieldsets.
A label also makes the click target bigger. Tap the words next to a small checkbox and it toggles, which anyone on a phone will thank you for.
Sometimes a design really has no room for visible text, say a search field right next to a Search button. Then aria-label="Search" on the input is an acceptable fallback. A visible label still wins.
To check, select a field in Chrome or Firefox DevTools and open the Accessibility panel. It shows the computed name, so you see straight away whether the label is connected.
Frequently asked questions
How do you associate a label with an input in HTML?
Give the input an id and put the same value in the label's for attribute: <label for="city">City</label> and <input id="city">. You can also wrap the input inside the label. Both ways, screen readers announce the label text when the field gets focus, and a click on the label moves the cursor into the field or toggles the checkbox. The first lesson on HTML labels covers the basics.
Is a placeholder enough instead of a label?
No. A placeholder disappears the moment someone starts typing, so people forget what the field was for, and the pale gray text is often too faint to read. Some assistive technology doesn't treat it as a dependable name either. WCAG 2.2 asks for visible labels or instructions (opens in a new tab) (3.3.2). Give every field a visible <label> and save the placeholder, if you want one, for a short example such as [email protected].
Should I use for and id or wrap the input in the label?
Either. Both are valid HTML and both create the connection. for and id hold up best and let you place the label and field anywhere, which helps in layouts like tables. Wrapping is shorter and popular for checkboxes and radio buttons. You can even combine the two: a wrapping label with a matching for works fine.
