Multi-page Forms

Where possible, divide long forms into multiple smaller forms that constitute a series of logical steps or stages. This helps make long forms less daunting and easier to understand, particularly for people who are less experienced using computers or who have various cognitive disabilities. The following basic principles should apply for multi-step forms:

  • Repeat overall instructions on every page.
  • Split the form up according to its logical groups of controls. For example, in an online shop, shipping and payment information are typically separated.
  • Make it easy to recognize and to skip optional stages. For example, highlight optional steps in the main heading of the web page and provide an option to skip.
  • If possible, don’t set a time limit to fill out the form. If a time limit is required, provide a feature that allows the user to adjust or extend the time limit.

Indicating progress

If possible, the first step of a form should explain how many steps will follow. Each step should inform the user about the progress they are making.

Using the page title

The <title> element is the first item read by many people, such as screen reader users. Changing the title of the page to include the progress gives immediate feedback. This information should precede other information provided in the title, such as the name of the step or any error notifications.

Example:
Step 2 of 4: Shipping Address – Complete Purchase – Galactic Teddy Bears Shop
Code snippet:
<title>Step 2 of 4: Shipping Address – Complete Purchase – Galactic Teddy Bears Shop</title>

Using the main heading

Using the main heading to inform users is a good way to provide the same information for people scanning the page visually, as the main heading usually is prominent in the document.

Example:

Shipping Address (Step 2 of 4)

Code snippet:
<h1>Shipping Address (Step 2 of 4)</h1>

Using the HTML5 progress element

HTML5 provides a progress element that can be used to inform users about the progress. This can be particularly useful in situations where the number of steps depends on user input, such as in a survey where steps are skipped depending on how questions were answered.

Example:
Survey (Step 2 of circa 7)
Survey (Step 3 of circa 7)
Survey (Step 6 of circa 7)
Survey (Finished)
Code snippet:
Survey <progress max="7" value="1">(Step 2 of circa 7)</progress><br>

Survey <progress max="7" value="3">(Step 3 of circa 7)</progress><br>

Survey <progress max="7" value="6">(Step 6 of circa 7)</progress><br>

Survey <progress max="7" value="7">(Finished)</progress>

The progress element, like other form elements, is a component from the operating system rendered directly on the website. Those components are animated in some operating systems which would violate WCAG 2.0’s 2.2.2 Pause, Stop, Hide success criterion that requires that users are able to disable an animation that starts automatically, lasts more than 5 seconds and is presented in parallel with other content.

The animation can be stopped by using custom styling with browser-specific CSS as shown below.

Code snippet:
/* Microsoft IE */
progress {
  color: #036;
}

/* Apple Safari and Google Chrome */
progress::-webkit-progress-bar {
	background-color: #036;
}

/* Mozilla Firefox */
progress::-moz-progress-bar {
	background-color: #036;
}

Using step-by-step indicator

If a form has a known number of steps to be completed, a step-by-step indicator can help users orient themselves. In the example below, we use an ordered list with a list item for every step. Visually hidden text is used to indicate the current and completed steps. If possible, provide a link to steps already completed, so the user can review them. In this case, any data already entered in the current step should be saved.

Example:
  1. Completed: Billing Address
  2. Current: Shipping Address
  3. Review Order
  4. Payment
  5. Finish Purchase
Code snippet: HTML
<div class="tlwrapper">
	<ol class="timeline">
		<li class="timeline-past">
				<span class="visuallyhidden">Completed: </span>
				<a href="billing.html">Billing Address</a>
		</li>
		<li class="timeline-current">
			<span class="visuallyhidden">Current: </span>
			<span>Shipping Address</span>
		</li>
		<li><span>Review Order</span></li>
		<li><span>Payment</span></li>
		<li><span>Finish Purchase</span></li>
	</ol>
</div>

These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels:

Success Criteria:

  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

  • 2.2.1 Timing Adjustable: For each time limit that is set by the content, at least one of the following is true:

    • Turn off: The user is allowed to turn off the time limit before encountering it; or
    • Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or
    • Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or
    • Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or
    • Essential Exception: The time limit is essential and extending it would invalidate the activity; or
    • 20 Hour Exception: The time limit is longer than 20 hours.
    (Level A)

  • 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)

Techniques: