FFCheckPrivacyCheck
♿ Accessibility

Making forms accessible (WCAG 3.3 + 4.1.2)

Labels, error messages, help text, autocomplete, required fields. #1 place where even sighted users abandon bad design.

Last reviewed: 25 May 2026
Forms are notorious UX killers — bad form causes 20-50% drop-off. For accessibility it's often equally critical to visitor volume. WCAG requirements + best practices: (1) Labels linked (WCAG 1.3.1 + 3.3.2): every input field gets a <label for="id">. NOT placeholder as label (disappears once typed + not for screen reader). (2) Required fields clear (3.3.2): visually (asterisk, "(required)" text) AND for screen reader (aria-required="true"). Not only colour — colour-blind don't see red. (3) Error messages (3.3.1 + 3.3.3): inline at field + summary at top + for screen reader (aria-describedby + role="alert"). Describe how to fix, not just "error". (4) Autocomplete (1.3.5 AA): for name/address/email/phone explicit autocomplete="given-name", "address-level2", etc — helps browsers + screen readers + people with cognitive impairments. (5) Help text: on complex fields text explaining why + how (e.g. "Enter 9 digits without spaces"). Linked to field via aria-describedby. (6) Logical grouping: <fieldset> + <legend> for related radios + checkboxes. (7) Prevent loss on error (3.3.4 AA for financial): no data wipe on submit error. For financial/legal data: confirmation step. Test: walk through form only with Tab + screen reader. Do you get clear info at each step? If not = bug.

Sources

🔎 Common search variants

Recognise your own search? Our answer above covers these too.

  • accessible form wcag
  • aria label form
  • autocomplete form
  • error message wcag