ReferenceBeginner3-5 min reference
Forms Accessibility
Forms are where accessibility breaks most often and where it matters most — they're the gate to signing up, checking out, and getting help. The fixes are small and mechanical. This sheet is the checklist; for the surrounding semantics see ARIA Roles and WCAG, and for functional coverage see How to test forms (all linked below).
The checklist
| Concern | Do | Fails when |
|---|---|---|
| Label | Every input has a <label for> (or aria-label) | Placeholder is the only label |
| Required | required attr + visible indicator | "*" with no programmatic cue |
| Error | aria-describedby ties error to field; aria-invalid="true" | Error shown by red border only |
| Error summary | Focus moves to a summary on submit | Errors appear silently |
| Grouping | <fieldset> + <legend> for radios/checkboxes | Related controls ungrouped |
| Autocomplete | autocomplete tokens (email, name) | Missing, harder for AT/users |
| Input type | Correct type (email, tel, number) | Everything is type="text" |
| Instructions | Tied via aria-describedby before the field | Hint only visual / after submit |
Error handling that works
- On submit, set
aria-invalid="true"on each bad field. - Link the message:
aria-describedby="<error-id>". - Move focus to an error summary (or the first bad field).
- Never rely on colour alone — include text and an icon.
Common mistakes
- Placeholder text used as the label (disappears on input, low contrast).
- Errors conveyed only by a red outline.
- Required marked visually but not programmatically.
- Radio/checkbox groups with no
fieldset/legend, so the question isn't announced. - Custom selects/date pickers that aren't keyboard- or screen-reader-operable.
// Related resources