Read time: 1 minute 10 seconds
Are forms as simple as possible and only ask what’s needed to complete the task?
- Mateo is in a hurry to fill out a medical insurance form for a sick daughter.
- Janet has dementia and needs to validate identification to submit an application.
Steps to take
- Follow our form standards and data dictionary as an ongoing point of reference.
- Present fields in a single-column layout. This keeps visual momentum moving down the page so users don’t have to reorient themselves with multiple columns. (Exceptions to this rule are short, logical fields that may be presented on the same row like state and post code.)
- Ensure form fields are visibly labelled.
- Make sure form fields have clearly defined boundaries or outlines. This is so people with cognitive disability know the size and location of the click target.
- Don't use placeholder text in form fields. Placeholder text causes usability issues because it disappears when content is entered into the form field. Hints and instructions should be persistent and placed outside of the field.
- Provide highly visible and specific error states. Use multiple cues like color, icons, bold font weight, heavy border or outline, and helpful text to make sure users don’t overlook this critical information.
- Watch World Wide Web Consortium's (W3C) short notifications and feedback video (1 minute 7 seconds):
Video link: https://www.youtube.com/watch?v=E1fEv4Vpexg
- Five simple tips for designing accessible web forms (Vision Australia)
- Form structure guide (GOV.UK)
- Form elements (GOV.UK)
Web Content Accessibility Guidelines
- 1.1.1 Non-text Content
- 1.3.1 Info and Relationships
- 3.2.1 On Focus
- 3.3.2 Labels or Instructions
- 4.1.2 Name, Role, Value