An accessible form is one that anyone can complete, whatever their device or ability. To design one, check the labels, errors, colour, field order and how forgiving the input is.
This lesson belongs to human computer interaction. Use the words from evaluating clarity, feedback and navigation when you explain your choices.
What is the fictional task?
A school badminton court is booked online. The form needs the student’s name, the date, the time slot and the number of players.
Here is a first design, with problems marked.
| Field | First design | Problem |
|---|---|---|
| Name | Box with placeholder text only | The hint disappears once typing starts |
| Date | Free text box | The format is unclear, so errors follow |
| Time | Free text box | Users can type a slot that does not exist |
| Players | Free text box | Can receive letters or 0 |
| Submit | Red box on errors, no words | Colour alone carries the message |
Worked example: the improved design
Each change has a reason.
- Visible labels above every field. A label stays on screen, while placeholder text vanishes when the user types.
- A date picker with an example. It prevents invalid formats, and a format hint such as “DD/MM/YYYY” shows the expected style.
- A list of real time slots. The user picks from valid choices, so no impossible slot can be entered.
- A number field limited to 1 to 4 players. The input type matches the data.
- An error message next to the field in words. “Please choose 1 to 4 players” says what to fix, and it does not depend on red.
- A logical tab order. Name, date, time, players, submit, so a keyboard user can complete it without a mouse.
- A note about required fields. “All fields are required” appears at the top.
The mistake: explaining with features only
A student writes: “I used a dropdown and a date picker.” That lists features but gives no reason. A stronger answer reads: “I used a list of time slots so the user cannot enter a slot that does not exist, which reduces errors.”
The pattern is the same as in evaluation: the choice, the reason and the benefit.
An accessibility checklist
- Every field has a visible label.
- Required fields are stated in words.
- Errors appear beside the field and say how to fix it.
- Colour is never the only signal.
- Text has enough contrast against its background.
- The keyboard order follows the reading order.
- Input accepts reasonable variations, such as spaces in a phone number.
Check yourself
The form has a “Phone” field. A user types 012 345 6789 and sees the message “Invalid”. Give two improvements and a reason for each.
Answer
Accept spaces. Remove or ignore spaces before checking the number, because people type phone numbers with spaces. This makes the input forgiving and avoids needless errors.
Improve the message. Replace “Invalid” with “Enter the phone number using digits only, for example 0123456789”. The user learns what to fix and no longer has to guess.
What to study next
A design also needs testing. Read explaining usability decisions to learn how to write the reasons, then see testing interaction and data validation for the technical side.
If you want a teacher to question your design choices, see online one-to-one Computer Science tuition.