Form inputs must have a label

Rule label-control · Forms · impact critical · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A form control with no programmatic label is announced only by its type ("edit text"), so the user has no idea what to enter. A <label> (linked by for/id or by wrapping) also enlarges the click target.

How to fix#

Add <label for="id">…</label> matching the control’s id, wrap the control in a <label>, or as a last resort use aria-label / aria-labelledby.

Example#

<input type="email">

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

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

3.3.2 Labels or Instructions — Level A#

Inputs need labels or instructions so users know what to enter.

Understanding 3.3.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Section 508 Trusted Tester ACT

References#

• W3C — Form Labels