Accessible HTML forms

Give every control a name.

A label tells people what to enter. It also gives assistive technology a reliable name for the control.

The principle

The design may hide a label visually. It must never remove the control’s accessible name.

Default pattern

Use a visible label.

A placeholder disappears as soon as someone types. A label stays available and, when associated with the input, can be clicked to move focus into the field.

Don’tPlaceholder only

The visual hint disappears during typing, and the input has no programmatic name.

<input
  type="email"
  placeholder="Email address">
DoPersistent, associated label

The visible text and accessible name both remain “Email address.”

<label for="email">Email address</label>
<input id="email" name="email" type="email">

Compact design

No room to show it?

Keep the native label and hide it visually. If that is not practical, aria-label can name the input directly. Placeholder text remains an optional hint—not the name.

Example shop

Try it

The label exists—even when you cannot see it.

  • The input is named by a visually hidden <label>.
  • The search region is named “Site search.”
  • The icon-only button is named “Submit search.”
  • The placeholder only describes what can be searched.
Preferred: visually hidden native label
<label class="visually-hidden" for="search">
  Search this site
</label>
<input id="search" type="search">
Alternative: direct accessible name
<input
  type="search"
  aria-label="Search this site">

Quick test

Four ways to check.

  1. Click the visible label. Focus should move into its input.
  2. Type into the field. Its purpose should remain clear after the placeholder disappears.
  3. Navigate with Tab. Every control should have a visible focus indicator.
  4. Inspect the accessibility tree or use a screen reader. Confirm each control has a concise name.
01Visible label first.
It supports more people and persists during input.
02Hide, don’t delete.
A compact design still needs a programmatic label.
03Placeholder ≠ label.
Use it only for a short, optional hint.