Accessible forms are easier for everyone to complete. They help screen reader users, keyboard users, people on small screens, and anyone moving quickly through a task.
This tutorial covers a few patterns that make forms more reliable without adding much complexity.
Use Real Labels
Placeholders are not labels. They disappear as soon as someone types, and they are easy to miss.
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required>
The for attribute connects the label to the input. Clicking the label focuses the field, and assistive technology can announce the label correctly.
Add Helpful Descriptions
Use aria-describedby when a field needs extra guidance.
<label for="password">Password</label>
<input
id="password"
name="password"
type="password"
autocomplete="new-password"
aria-describedby="password-help"
required
>
<p id="password-help">Use at least 12 characters.</p>
The description stays available after the user starts typing.
Connect Errors to Fields
Error messages should be specific and programmatically linked.
<label for="postal-code">Postal code</label>
<input
id="postal-code"
name="postal-code"
autocomplete="postal-code"
aria-invalid="true"
aria-describedby="postal-code-error"
>
<p id="postal-code-error">Enter a five-digit postal code.</p>
Avoid vague messages like “invalid input.” Tell the user what to fix.
Keep Focus Predictable
When validation fails after submit, move focus to a summary at the top of the form.
<div tabindex="-1" role="alert" id="form-errors">
<p>Please fix the following fields:</p>
<ul>
<li><a href="#postal-code">Postal code must be five digits.</a></li>
</ul>
</div>
The summary helps users understand the whole form state before jumping into individual fields.
Test With the Keyboard
A quick keyboard pass catches many issues:
- Can every interactive element receive focus?
- Does the focus order match the visual order?
- Is the focus indicator visible?
- Can the form be submitted without a mouse?
- Do errors appear near the relevant field?
Conclusion
Accessible form patterns are mostly about clarity. Real labels, connected descriptions, specific errors, and predictable focus make forms more humane and easier to maintain.