The short answer
Most form accessibility problems come from a handful of shortcuts: placeholder text used instead of a label, errors shown only in colour, custom controls that keyboards cannot reach.
Each has a straightforward correct version that takes no longer to build.
The basics that matter most
| Requirement | Common mistake |
|---|---|
| Visible label per field | Placeholder used instead |
| Label attached to its input | Text sitting nearby, unlinked |
| Errors announced | Colour change only |
| Keyboard reachable | Custom control that traps focus |
| Focus visible | Outline removed for appearance |
Placeholder-only labels fail twice: they vanish once typing starts, and they are not reliably announced. A visible label is better for everyone.
Errors have to be findable
- Say what is wrong in words, next to the field.
- Link the message to the field programmatically.
- Announce it so a screen reader user hears it.
- Move focus to the first problem field.
- Summarise at the top if several fields failed.
Moving focus to the first problem is the step most often missed, and without it somebody using a screen reader has to hunt through the whole form.
Do not remove the focus outline
Removing focus styling for appearance makes the form unusable by keyboard, because there is no way to see where you are.
If the default outline does not suit the design, replace it with something clearly visible rather than removing it.
Test it properly
- Complete the whole form using only the keyboard
- Complete it with a screen reader running
- Check at high zoom and large text settings
- Check colour contrast on labels, errors and placeholder text
- Try it one-handed on a phone
The keyboard test takes two minutes and catches most problems. It is the single highest value check available.