Skip to main content

Accessibility discovery

Tell us you have moved

The scenario

You work on a support desk. Margaret has phoned in to change her address and you are filling the form in for her while she waits on the line. She is 63, she has moved to Swansea, and she has already been passed between two departments.

Your task

  1. Fill the form in with Margaret's details exactly as she gives them to you.
  2. Submit it. Keep going until it is accepted, and count how many attempts it takes.
  3. Now switch to the accessible version and do exactly the same thing.
Time
10 minutes
Barrier
Unlabelled controls and unusable error messages
Success criterion
WCAG 2.2 — 3.3.2 Labels or Instructions and 3.3.3 Error Suggestion

Change of address

Version

Update your details

DOB *

Attempts: 0

Before you switch versions: without scrolling back up, what did the second box in the date row want — the month or the day? Now imagine being told the answer by a screen reader, which reads it as “edit, blank”.

What this exercise is showing

Nine things are wrong with the first form, and none of them are obvious to somebody who already knows the answers:

  • No labels. Placeholder text vanishes the moment you type, so the only description of the field disappears exactly when you need to check it. A screen reader announces most of these as “edit, blank”.
  • A silent character limit. The name field stops at 15 characters, so Margaret Okonkwo-Bell becomes “Margaret Okonkw” and nothing tells you.
  • Three unlabelled date boxes with no hint about order or format.
  • Hidden format rules. The postcode is rejected if it contains a space. Nothing says so, before or after.
  • Required marked with an asterisk only, in pale grey, with no key explaining it.
  • No autocomplete, so nothing can be filled in from the browser or a password manager.
  • An error message that names no field and is not announced, because it is not a live region and focus never moves to it.
  • Errors shown with a red border alone, which anyone who cannot see colour will miss entirely.
  • Clear sits next to Submit, the same size and colour, first in the tab order.

Questions for the group

  • How many attempts did the room take on each version? Say the numbers out loud.
  • What did it feel like to be told “there was a problem” and nothing else, with Margaret still on the line?
  • Now picture this form as a benefits claim, a hospital appointment, or the last step before a payment fails.

What good looks like

  • Every control has a visible label that stays visible. Placeholders are decoration, never instruction.
  • Formats and rules are stated before the field, not discovered through failure.
  • Errors appear in a summary at the top that takes focus, each one linking to its field, and again next to the field itself in words.
  • The form takes what people type and normalises it. Spaces in a postcode are the form's problem, not the user's.
  • Autocomplete attributes are filled in, which is 1.3.5 Identify Input Purpose and a genuine kindness to anyone typing with one finger.