The Developer's Guide to Accessible Forms

Labels, errors, autocomplete, ARIA, and keyboard navigation

A comprehensive technical guide to building forms that work for everyone. Covers the most common form accessibility failures and how to fix them.

What's inside

Label association patterns (for, aria-label, aria-labelledby)

Error handling with aria-invalid and aria-describedby

Autocomplete attributes for identity and payment fields

Keyboard navigation in custom form components

WCAG 2.2 Accessible Authentication requirements

Get this guide and future updates

Enter your email to download the guide and receive accessibility insights. No spam, unsubscribe anytime.

Labels and associations

Every form input needs a programmatically associated label. Here are the three ways to do it and when to use each.

Use <label for='id'> as the default pattern

Use aria-label for visually hidden labels (icon-only search fields)

Use aria-labelledby to reference existing visible text

Never rely on placeholder text as the only label

Group related fields with <fieldset> and <legend>

Form errors must be identified in text, not just colour. Users need to know what went wrong and how to fix it.

Set aria-invalid='true' on fields with errors

Link error messages with aria-describedby

Don't rely on red borders alone - add visible error text

Move focus to the first error on form submission

Provide inline validation as users complete fields

WCAG 2.2 requires that authentication doesn't rely on cognitive function tests. Proper autocomplete attributes are essential.

Add autocomplete='username' and autocomplete='current-password' to login forms

Add autocomplete='new-password' to registration forms

Never block paste on password fields (breaks password managers)

Add autocomplete to name, email, phone, and address fields

Provide alternatives to CAPTCHA (audio, non-interactive)

Want to check your site against these criteria?

Lumi scans your site with five engines and gives you actionable fixes for every issue.

How to monitor, report, and communicate accessibility across client sites

What's required, who's affected, and how to prepare