How to Build Accessible HTML Forms
Connect every field to a label, group related controls, explain errors clearly, and make the full flow work from a keyboard.
The short version
A form is accessible when people can understand, complete, correct, and submit it without guessing.
Give every control a real label
Placeholder text is a hint, not a label. It disappears when someone types and often has weak contrast. Use a label whose for value matches the input id, or wrap the control inside the label.
Choose the most specific input type available. Email, url, tel, date, and number fields give browsers and assistive technology more useful information and can trigger better mobile keyboards.
<label for="work-email">Work email</label>
<input
id="work-email"
name="email"
type="email"
autocomplete="email"
aria-describedby="email-help"
required
>
<p id="email-help">We will send the review link here.</p>Group choices and explain constraints
Use fieldset and legend for related radio buttons or checkboxes. Put format requirements and limits beside the field before submission, then keep error messages close to the field when validation fails.
- Do not rely on color alone to identify an error.
- Move focus to an error summary when a long form fails.
- Keep entered values after validation.
- Make the submit button say what happens next.
Test the whole path with a keyboard
Tab through the form from the first field to the final action. Focus must remain visible, the order must match the visual flow, and custom widgets must support the same keyboard behavior users expect from native controls.
Native HTML controls solve a surprising amount of this work. Customize them only when the product requirement is worth the added accessibility and maintenance cost.