Accessible Web Forms: WCAG Requirements & Best Practices

Why Are Forms Critical?

Forms are the most frequent conversion points – contacts, purchases, registrations. If a form is not accessible, you lose not only users with disabilities but also 15-20% of all mobile users (Baymard Institute).

10 WCAG Requirements for Forms

1. Every field must have a label ```html <!-- ✓ Correct --> <label for="email">Email</label> <input id="email" type="email">

<!-- ✗ Incorrect --> <input placeholder="Email"> `

A placeholder is not a label. When the user starts typing, the context disappears.

2. Associate error messages with the field ```html <input id="email" aria-describedby="email-error" aria-invalid="true"> <span id="email-error">Please enter a valid email address</span> ```

3. Don't use colour as the only indicator A red border is not enough – add an icon and text.

4. Group related fields ```html <fieldset> <legend>Billing Address</legend> <!-- fields --> </fieldset> ```

5. Provide enough time If a form has a time limit (e.g., banking links), the user must be able to extend it.

6. Don't require duplicate entries (New in WCAG 2.2) If a user entered their email during registration, pre-fill it in the contact field as well.

7. Login without cognitive tests (New in WCAG 2.2) CAPTCHAs requiring users to find traffic lights in images are out. Use: - [hCaptcha Accessibility](https://www.hcaptcha.com/accessibility) - Magic links (via email) - WebAuthn / passkeys

8. Target size Buttons and checkboxes should be at least **24×24 pixels** (WCAG 2.2), preferably 44×44 (Apple HIG).

9. Keyboard support Every field, button, and checkbox must be accessible via Tab. Custom dropdowns (`<div>`) are frequently broken.

10. Success messages for screen readers ```html <div role="status" aria-live="polite"> Thank you! Your message has been sent. </div> ```

Estonia-Specific Errors

• Personal Identification Code (isikukood) – allow both 11 digits and spaced formatting.
• Phone number – accept +372, 372, or just the 7-8 digits.
• Address search – do not require the user to understand the Land Board (Maa-amet) API.

Tools for Testing

• WAVE – quick overview.
• NVDA (Windows, free) – screen reader.
• VoiceOver (Mac/iOS, built-in).
• axe DevTools – detailed recommendations.

Further Reading

• WCAG 2.2 Guide
• 12-Step WCAG Audit
• Web Design UX/UI

Need help auditing your forms? Check out our website maintenance service.