Accessible Form Labels

Why It Matters

Visual proximity is not enough. An input must be programmatically associated with its label text so assistive technology can announce it when the input receives focus.

Method 1: Explicit Label (Best)

The for attribute matches the input's id.

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

Method 2: Implicit Wrapping

<label>
  Search
  <input type="search" />
</label>

Method 3: visually-hidden Label

If design constraints hide the label visibly, keep it in the code.

<input aria-label="Search site" />

Note: Visible labels are always preferred for cognitive accessibility.

Avoid

Using placeholder as a label. Placeholders disappear when typing and often have poor contrast.