Forms are among the most problematic elements for users with disabilities. A few simple adjustments can radically transform their experience.
An inaccessible form is often a closed door for millions of users. Visually impaired people, keyboard-only users, screen reader users — all encounter avoidable obstacles when a form has been poorly designed. The good news is that the fixes are rarely complex.
The first rule is simple: every field must have a visible label linked via the for attribute. A placeholder is not
a label. It disappears as soon as the user starts typing, leaving those who struggle to remember without context. Use
<label for="email">Email address</label> consistently — never a placeholder alone.
Error messages deserve special attention. They must be explicit ("Password must contain at least 8 characters" not
"Error"), close to the relevant field, and announced to screen readers via aria-describedby or role="alert".
The field in error must be marked with aria-invalid="true". For multi-step forms, indicate progress with an
aria-label attribute on the progress element.
For keyboard navigation, the tab order must follow the logical reading direction. The tabindex attribute can force
this order if necessary, but it is better to build a well-ordered DOM. Submit buttons must be real <button type="submit"> elements, not clickable <div>s that are invisible to the keyboard.
- Link every field to a label via
for/id - Do not rely on placeholder as the only indication
- Announce errors with
aria-describedby - Test the entire flow using only the keyboard