Back

label

Form elements must have labels

Why it matters

Without a programmatic label, a screen reader announces a form field only as its element type, e.g. "edit text," leaving a blind user with no idea what to enter.

How to fix it

Associate a visible <label> with its input via a matching for/id pair, or wrap the input inside the label. If a visible label isn't appropriate, use aria-label or aria-labelledby instead.

Example

<label for="email">Email address</label>
<input id="email" type="email" />
Technical reference (Deque University)
Form elements must have labels | Pallyfi Accessibility Guidance