Accessibility
How to make a form accessible
Give every field a real label element, mark required fields in text rather than colour alone, associate errors with their inputs programmatically, and make the whole form completable by keyboard. Placeholders are not labels.
Before you start
- Access to the form markup
- A screen reader for testing
The steps
-
Step 1: Add a label to every field
A label element with a for attribute matching the input id. Visible, not hidden.
-
Step 2: Remove placeholder-only labels
The placeholder vanishes on typing, so the user loses the label exactly when they need it.
-
Step 3: Group related fields
fieldset and legend for radio groups and checkbox sets.
-
Step 4: Set autocomplete attributes
name, email, tel, street-address. It reduces effort for everyone and is a WCAG 2.2 requirement.
-
Step 5: Mark required fields in text
required plus aria-required, and the word "required" — not only a red asterisk.
-
Step 6: Associate error messages
aria-describedby pointing at the message, and aria-invalid on the field.
-
Step 7: Announce errors
A live region, or move focus to the first error, so a screen reader user knows something failed.
-
Step 8: Test by keyboard alone
Complete the entire form without a mouse, including submission and error recovery.
Label in Name
If a button reads "Send message" visually, its accessible name must contain that text. A voice-control user saying "click send message" needs the words to match — an aria-label of "Submit" on a button reading "Send message" breaks that outright.
Why this matters commercially
An inaccessible form does not lose you an abstract percentage of users; it loses you the specific enquiry from the person who could not complete it. Forms are where accessibility failures cost money most directly.
The background behind this
Website accessibility, without the compliance theatre covers the reasoning in about 5 minutes — free, ungated, written from client work.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada, Ireland and Pakistan. These procedures are the ones I run on client work, written down rather than invented — including the ones where the honest answer is that the fix is not available on your current hosting.