<label>: the accessibility glue

Two valid patterns

Explicit (preferred):

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

The for attribute matches the input's id. Clicking the label focuses the input. Screen readers announce "Email" when the input gets focus.

Implicit (label wraps input):

<label>
  Email
  <input type="email" name="email" />
</label>

Same accessibility behavior. No for/id pair needed. Use when you don't need to style the label and input separately.

Why labels matter (beyond looking nice)

1. Click target expansion. The label is now part of the click area — a 20% larger tap target. Mobile users especially appreciate this.
2. Screen reader announcement. Without a label, VoiceOver reads "edit text" — useless. With a label, "Email, edit text" — clear.
3. Voice control. Mac/iOS Voice Control says "Click Email" — only works with a label.

What's NOT a label

• <p>Email:</p> next to an input — visual only, not accessible.
• placeholder="Email" — disappears when typing, screen readers don't always announce it. NEVER use placeholder as the only label.
• aria-label="Email" — works for accessibility but loses click-to-focus and the visual label.

Use <label> for >95% of inputs. Reserve aria-label for icon-only buttons where a visible label would be redundant.