Input with Label

<span>Email Address</span>
<input type="email" id="email">

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

label(for="email") Email Address
input(type="email" id="email" name="email" autocomplete="email")

<label htmlFor="email">Email Address</label>
<input type="email" id="email" name="email" autoFocus={false} />

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

<div class="space-y-2">
  <label for="email" class="block text-sm font-medium text-slate-700">Email Address</label>
  <input 
    type="email" id="email" name="email" 
    class="block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:line-height-6"
  />
</div>

The Standard

A <label> element tells users (and assistive technologies) what a form field is for. Without it, a screen reader user lands on an input and hears… silence.

WCAG Criteria

• 1.3.1 Info and Relationships (Level A): Information and relationships conveyed through presentation must be programmatically determined.
• 3.3.2 Labels or Instructions (Level A): Labels or instructions are provided when content requires user input.

❌ The Bad (Inaccessible)

What’s Wrong?

1. No Association: The <span> is visually near the input, but there’s no programmatic link.
2. Screen Reader Silence: Users hear “edit text” with no indication of what to type.
3. Click Target: Clicking the text doesn’t focus the input.

✅ The Good (Accessibility-Ready Code)

Why This Works

1. Programmatic Link: The for="email" attribute connects the label to the id="email" input.
2. Screen Reader Clarity: Users hear: “Email Address, edit text.”
3. Click Target: Clicking the label focuses the input—a free usability win.

<label for="username">Username</label>
<input type="text" id="username" autocomplete="username">

Technical Deep Dive

The Accessibility Tree

Role: textbox
Name: "Email Address"
State: focusable