Accessible Forms – Inclusive Design for User Input
Forms are one of the most interactive and error-prone areas of the web. An accessible form is one that can be used independently by all users, including those with visual, motor, or cognitive disabilities. This includes screen reader compatibility, keyboard navigation, and proper error handling – all mandated by WCAG guidelines.
WCAG Requirements for Accessible Forms
| Requirement | Description |
|---|---|
| Labeling | Every field must have a programmatically linked <label> |
| Focus order | Logical and intuitive (matches reading order) |
| Error identification | Clear, programmatically exposed error messages |
| Validation feedback | Must be perceivable and assistive (use ARIA where needed) |
| Keyboard accessibility | Full form usability without a mouse |
Best Practices
- Use <label for="id"> and matching field IDs
- Do not rely on placeholder as the only label
- Mark required fields visually and textually (e.g. * + explanation)
- Provide errors both visually and via aria-live
- Use <fieldset> and <legend> for grouped fields (e.g. radio sets)
- Avoid tabindex manipulation unless absolutely necessary
- Always test with real assistive tech (e.g. NVDA, VoiceOver)
You can find out more about our services in the area of digital accessibility here.
