Attach a visible label to every field, mark required fields in text as well as colour, describe errors in words next to the field, and make sure the whole form can be completed with a keyboard.

Why forms come first

Most accessibility problems make a site harder to use. A broken form makes it impossible to do the thing you were there for.

That distinction matters commercially. Somebody who cannot read your service page may still phone you. Somebody who cannot complete your enquiry form has been stopped at the last step, after deciding to make contact.

Forms are also where several failures cluster, because they involve labels, colour, keyboard operation, error messages, and announcements all in one place.

Fix the form first, then work outward.

Every field needs a real label

A label is text attached to a field in the page structure, not just text positioned near it.

The attachment is what lets assistive technology announce which field somebody is in, and it also makes the label clickable, which enlarges the target for everybody.

Visually, put it above the field rather than beside it. Above survives narrow screens, keeps the eye in one column, and does not get cut off.

Placeholder text inside the box is not a label. It disappears when somebody types, which means anybody reviewing their answers or returning to a field has no idea what it was for, and that affects people with memory or attention difficulties as much as anybody using a screen reader.

Mark what is required, in words

A red asterisk alone communicates nothing to somebody who cannot see colour or is not looking at the shape.

Use the asterisk if you like, and state in text at the top what it means, or simply add the word required to the label.

Better still, ask for less. Every field you make required is a barrier, and a form asking for a company name, a second address line, and a phone number you never call is imposing effort on everybody to collect data you do not use.

Marking optional fields instead of required ones works well on short forms and reduces the visual noise considerably.

Errors have to say what to do

The most common failure and the most frustrating, because the person has done the work and been rejected without explanation.

The last two account for most abandoned resubmissions, and neither is an accessibility nicety.

Group what belongs together

A set of radio buttons or checkboxes needs a heading of its own, describing what the group is asking.

Without it, somebody hears the options announced with no question attached: yes, no, maybe, and no indication of what is being answered.

The same applies to a field split into several boxes, such as a date or a phone number in parts. Each box needs to be identifiable, and the group needs a label saying what the boxes together represent.

Visually this is usually already clear, which is why it gets missed. The structure has to carry the same information the layout does.

A worked example

A clinic's booking form had placeholder-only fields, a red border for errors, and a required marker explained nowhere.

The office manager tested it with a keyboard and a screen reader and could not complete it.

Fields were announced as edit blank. Submitting with a mistake produced a red outline she could not see with the screen off and no message anywhere. The form then cleared, so everything had to be retyped.

They added visible labels above each field, put the word required in the label text, wrote error messages in words beside each field, kept the entered values on failure, and moved focus to the first error.

None of it changed the visual design noticeably.

Completed bookings rose, and the reception staff reported fewer calls from people saying the online form had not worked.

Let the browser help

An underused feature that benefits far more people than it is usually credited for.

Marking fields with the standard names for common information lets a browser or password manager fill them automatically: name, email, phone, address, postcode.

For somebody with a motor impairment, or dyslexia, or who simply finds typing on a phone tedious, that turns a twelve-field form into two taps.

It costs one attribute per field and it is the single highest-value thing on this page for the effort involved.

It also improves completion rates generally, which is the argument that gets it approved.

Time limits and disappearing sessions

Worth checking because it is invisible until somebody hits it.

A form that expires after a period, or a booking that releases a slot while somebody is filling in details, penalises anybody who works more slowly.

That includes people using assistive technology, people with cognitive difficulties, and anybody who was interrupted.

Where a limit is genuinely necessary, warn before it expires and offer a way to extend it. Where it is not necessary, and on most enquiry forms it is not, remove it.

The same applies to anything that clears a partially completed form after inactivity.

Test it the way somebody would use it

Three passes, and each finds different problems.

Complete the form using only the keyboard, with no mouse, and check you can reach every field, see where you are, and submit.

Complete it with the screen off and a screen reader running, which will reveal unlabelled fields and unannounced errors immediately.

Then submit it deliberately wrong, and see whether the error tells you what to do, keeps your answers, and puts you back where the problem is.

The third pass finds more than the other two on most business forms.

The counter-case

There is a version of form accessibility that becomes counterproductive.

Excessive instructions, help text on every field, and lengthy explanations of formats make a short form feel like paperwork and reduce completion for everybody.

Some validation is also worth relaxing rather than explaining better. A phone number field rejecting spaces, brackets, or a country code is creating a problem in order to solve it politely, and accepting whatever somebody types is usually the better answer.

The target is a form that is short, clearly labelled, and forgiving. Clarity comes from asking for less and labelling it properly, not from adding guidance around fields that should not be there.

The check

  1. Give every field a visible label above it.
  2. Say required in words, not only in colour.
  3. Remove fields you do not genuinely use.
  4. Write errors in text, beside the field.
  5. Keep the answers and move focus on failure.
  6. Add autocomplete names to common fields.
  7. Submit it wrong, with the screen off.

Step seven is the test that finds everything the other six were meant to prevent.

Labels that vanish are covered in labels that disappear when you type.


Frequently asked questions

Why fix forms before anything else?

Because most accessibility problems make a site harder to use, while a broken form stops somebody completing the thing they came to do, after they had already decided to contact you.

Is placeholder text a label?

No. It disappears when somebody types, so anybody reviewing their answers or returning to a field has no idea what it was for. Put a visible label above the field.

How should required fields be marked?

In words as well as colour. A red asterisk alone communicates nothing to somebody who cannot see it. Better still, ask for fewer required fields.

What makes a good error message?

Text beside the field saying what is wrong and what an acceptable answer looks like, announced rather than only drawn, with the entered values kept and focus moved to the problem.

What is the highest-value quick win?

Adding standard autocomplete names to common fields. It turns a twelve-field form into two taps for anybody using a browser or password manager, and raises completion generally.

Can this be overdone?

Yes. Help text on every field makes a short form feel like paperwork. Relaxing strict validation, such as a phone field rejecting spaces, is usually better than explaining it.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

When did you last submit your own form wrong?

Do it with the screen off. If the error is a red border and your answers vanish, that is the whole problem.

Start a Conversation