Use steps when the questions form distinct sections or later questions depend on earlier answers.
Problem
There is a lot of information to collect.
Split a form into steps when
- An application has separate identity, eligibility, and review stages.
- Branching can keep irrelevant questions out of the user's path.
Keep a form on one page when
- The form is short enough to scan and complete without losing context.
- Users need related fields visible together to answer accurately.
Example
This reduced example demonstrates moving between steps without losing answers.
Implementation
- Explain what users need before they start. Give each step a clear heading, retain essential instructions, and make optional stages easy to skip.
- Validate the current step on Continue. When replacing a step without a page load, move focus to its heading or another useful starting point so the change is clear.
- Preserve answers when users go back. Reuse information already supplied in the same process unless re-entry is essential, needed for security, or the earlier information is no longer valid.
- When an earlier answer changes the route, recheck dependent answers before accepting the submission.
- Consider save-and-return for lengthy tasks. If the flow has a time limit, provide the WCAG-required way to turn it off, adjust it, or extend it unless an exception applies.
- For consequential submissions, review and correction is one safeguard; suitable error checking or reversibility may also meet the relevant WCAG requirement. Confirm successful completion.
Tradeoffs
Steps reduce the amount visible at once but add navigation and hide the total workload. A progress indicator is optional; show a total only when it remains reliable as answers change the route.
Verification
Can a keyboard or screen reader user recognize the new step, go back, correct an answer, and continue without losing valid work?