a11y/input-label

Why

A field without a programmatic label is announced only as "edit text": the user does not know what to type. A placeholder disappears on input, often has low contrast and is not reliably used as the accessible name.

Fix

Pair a visible <label for="email"> with <input id="email">, or wrap the field in the label. When the design has no visible label (a search field next to its button), use aria-label or aria-labelledby; keep a visible label wherever you can.

Examples

<!-- bad -->
<input type="email" placeholder="Email">
<!-- good -->
<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">

Sources

• WCAG 2.2, Understanding SC 3.3.2 Labels or Instructions
• WCAG 2.2, Understanding SC 1.3.1 Info and Relationships
• WAI Forms Tutorial, labeling controls
• MDN, the label element

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/input-label