Accessible Multi-Step Form Wizards: Progress Tracking, Validation & State Management

Multi-step form wizards break long, overwhelming transactions (onboarding flows, e-commerce checkouts, mortgage applications) into manageable bite-sized steps. When engineered correctly, they reduce cognitive load. When engineered poorly, they lose user data, trap focus, and leave screen readers unaware of user progress.

Architectural Principles for Accessible Multi-Step Forms

1. Single vs Multi-URL Routes: Each major step should update the browser URL (`/checkout/step-2`) or use the History API so users can use the browser's native Back button safely.
2. Page Title Updates: Update the `<title>` dynamically on each step transition (e.g. "Step 2 of 4: Shipping Address | Checkout").
3. Focus Shift on Transition: Automatically shift focus to the main `<h1>` or step container heading when advancing to the next step.

Accessible Step Progress Indicators

Progress bars must be marked semantically so screen reader users understand how many steps exist and which step is currently active:

<nav aria-label="Checkout Progress" class="wizard-steps">
  <ol class="steps-list">
    <li class="step completed">
      <span class="step-num">1</span>
      <span class="step-title">Account Details</span>
      <span class="sr-only">(Completed)</span>
    </li>
    <li class="step active" aria-current="step">
      <span class="step-num">2</span>
      <span class="step-title">Shipping Address</span>
      <span class="sr-only">(Current Step)</span>
    </li>
    <li class="step future">
      <span class="step-num">3</span>
      <span class="step-title">Payment</span>
    </li>
  </ol>
</nav>

Step Validation and Error Focus Management

If validation errors occur when clicking "Continue":

• Do not advance to the next step.
• Render an error summary box at the top of the form with `role="alert"`.
• Shift keyboard focus to the first invalid field and link error text via `aria-describedby`.

Preserving Form State during Back Navigation

Under WCAG 3.3.7 (Redundant Entry), previously entered information (names, addresses, billing preferences) must be automatically populated and preserved if the user clicks "Back" to revise an earlier step.