Multi-Step Form

Live Example

<!-- Progress indicator -->
<ol class="steps" role="list" aria-label="Form steps">
  <li data-active="true"><i>1</i> <span>Account</span></li>
  <li><i>2</i> <span>Profile</span></li>
  <li><i>3</i> <span>Confirm</span></li>
</ol>

<!-- Each step is a semantic section -->
<form novalidate>
  <section id="step1" aria-label="Account details">
    <h3>Account Details</h3>
    <label for="email">Email</label>
    <input type="email" id="email" required>
  </section>

  <section id="step2" aria-label="Profile" hidden>
    ...
  </section>

  <nav aria-label="Step navigation">
    <button type="button" class="secondary" id="prev">← Previous</button>
    <button type="button" class="primary" id="next">Next →</button>
  </nav>
</form>

Step Navigation JavaScript

const steps = document.querySelectorAll('#msf-steps li');
const sections = document.querySelectorAll('#msf-form section');
let current = 0;

function goTo(n) {
  // Hide all, show target
  sections.forEach((s, i) => s.hidden = i !== n);
  // Update step indicators
  steps.forEach((s, i) => {
    s.removeAttribute('data-active');
    s.removeAttribute('data-completed');
    if (i < n) s.dataset.completed = 'true';
    if (i === n) s.dataset.active = 'true';
  });
  current = n;
  // Show/hide prev/next/submit
  document.getElementById('msf-prev').disabled = n === 0;
  document.getElementById('msf-next').hidden = n === steps.length - 1;
  document.getElementById('msf-submit').hidden = n !== steps.length - 1;
}

document.getElementById('msf-next').addEventListener('click', () => goTo(current + 1));
document.getElementById('msf-prev').addEventListener('click', () => goTo(current - 1));

Semantic Structure

Accessibility

• Each step section has aria-label describing its purpose
• Use aria-live="polite" to announce step changes
• Focus the first input when advancing to a new step
• Validate each step before allowing forward navigation
• Progress indicator must be perceivable without colour — numbers + labels