Form Label
Definition
A caption sitting next to a text box is only a label to someone who can see the layout. The label element makes the relationship explicit: write a label with a for attribute whose value matches the input's id, and the two are joined, wherever they sit on the page. That pairing gives the field its accessible name, which is the string assistive technology announces when focus lands there. Wrapping the input inside the label works too and needs no ids, though the explicit form survives refactoring better. WCAG covers this in 3.3.2 Labels or Instructions at level A, and 1.3.1 Info and Relationships at level A picks up the programmatic link itself. Placeholder text, a title attribute and a nearby paragraph are all weaker substitutes that fail in at least one common setup.
Why It Matters
An unlabelled field is announced as 'edit, blank' and nothing else, so filling in a four-field form becomes guesswork about which box wanted the postcode. Labels also enlarge the hit area: clicking the word Email moves focus into the box, which matters for anyone with a tremor and for everyone on a phone. Placeholders are the usual culprit — the hint vanishes the moment someone starts typing, so the person who paused to check a reference number comes back to an unmarked box, and the grey-on-white default often sits below a 4.5:1 contrast ratio as well. On a two-field signup, that difference is measured in abandoned submissions rather than in principle.
How It Works
Give the input an id, give the label a matching for value, and keep the visible words and the accessible name the same so speech-recognition users can say what they see, which is what 2.5.3 Label in Name at level A asks for. Where a visible label genuinely cannot appear, an aria-label attribute supplies the name instead, and aria-labelledby points at existing text elsewhere on the page. Mark required fields with the required attribute rather than a bare asterisk, and attach hint text and error messages with aria-describedby so they are read after the name instead of floating unconnected. Grouped controls — a set of radio buttons, a pair of date fields — go inside a fieldset with a legend, which gives the group its own name. Checkboxes take a label each, never one label for the row.
Real-World Example
A design studio gates a 12 MB portfolio PDF behind a lead capture form on 99helpers, shown before the download at studio-work.99helpers.site. The two fields were styled with placeholders only and no labels, and a keyboard user tabbing in heard 'edit, blank' twice. Adding a visible Name and Email address label above each box, each tied to its input by id, made the fields announce themselves and gave every reader something to click. Submissions rose because people stopped abandoning the form halfway through, not because anything about the file changed.
Common Mistakes
- ✕Using placeholder text as the only label — it disappears on the first keystroke, is often too low in contrast to read, and is not treated as a name by every browser and screen reader combination
- ✕Adding a label element but forgetting the for attribute, or letting the id drift when the markup is refactored — visually nothing changes, and the programmatic link is silently gone
- ✕Labelling a whole row of checkboxes once instead of labelling each box — the second and third options are then announced with no text of their own
Related Terms
Accessible Name
The accessible name is the short string that identifies an element to assistive technology — the words a screen reader speaks when focus lands on a link, button or field. Browsers work it out from several possible sources in a fixed order.
ARIA Label
aria-label is an attribute that gives an element an accessible name in words, for the cases where no visible text can do it. The first rule of ARIA is not to use ARIA: if a native HTML element already does the job, use that instead.
Semantic HTML
Semantic HTML means using the element that matches the meaning of the content — button, nav, h2, label, table — rather than styling a generic div or span to look the part.
Keyboard Navigation
Keyboard navigation is operating a page without a mouse: Tab and Shift+Tab to move between controls, Enter and Space to activate them, arrow keys inside composite widgets such as menus and radio groups.
Lead Capture Form
A short form shown in front of a hosted file or site: the visitor gives a name and an email, the content opens, and the answer lands in the owner's dashboard.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →