Every control needs a label
The programmatic label is what screen readers announce. Three valid patterns:
-
<label for="id">Email</label> <input id="id">— best. -
<label>Email <input></label>— wrapping, also fine. -
aria-label="Email"— only when a visible label is impossible.
Placeholders are not labels.
Group related controls
Radios and checkboxes belong in a
<fieldset> with a
<legend>. Screen
readers announce the legend before each option.
Errors must be programmatic
-
Move focus to the first invalid field, or expose a summary with
role="alert". -
Associate the error message with the field via
aria-describedby. - Never rely on color alone — include an icon and text.
Autocomplete tokens
Use the
autocomplete attribute
on all common fields (email, given-name,
family-name,
street-address,
postal-code,
cc-number). WCAG 1.3.5
requires it, and password managers depend on it.
Required indication
Mark required fields visually
and programmatically (required
or
aria-required="true"). An asterisk alone is not enough.