2.2.5 Re-authenticating

Level: AAA | Principle: Operable | Since: WCAG 2.0 | Automation: Manual

What This Means

When an authenticated session expires, the user must be able to re-authenticate and continue the activity without any loss of data. If a user was filling out a form, writing a comment, or partway through a multi-step process, all their data must be preserved after they log back in.

Session timeouts are sometimes unavoidable for security reasons. This criterion does not prohibit them — it requires that the user experience is seamless across the timeout. The user logs back in and picks up exactly where they left off.

This is critical because users with disabilities often take significantly longer to complete tasks. A user navigating with a switch device, or carefully composing content with a screen reader, may exceed the session timeout through no fault of their own.

Who This Affects

Users with motor disabilities — input takes significantly longer, increasing timeout risk
Screen reader users — reading and navigating forms takes more time
Users with cognitive disabilities — processing and composing responses is slower
All users — anyone who steps away and returns to a form should not lose their work

Common Pitfalls

1. Session expires and form data is lost

<!-- Bad: form data disappears after session timeout -->
<form action="/submit" method="POST">
  <textarea name="essay" rows="10"></textarea>
  <button type="submit">Submit</button>
</form>

<!-- Good: save form state and restore after re-authentication -->
<form action="/submit" method="POST" id="essay-form">
  <textarea name="essay" rows="10"></textarea>
  <button type="submit">Submit</button>
</form>
<script>
  // Auto-save form data to server or localStorage
  const form = document.getElementById('essay-form');
  form.addEventListener('input', () => {
    localStorage.setItem('essay-draft', form.elements.essay.value);
  });
  // Restore on page load
  const saved = localStorage.getItem('essay-draft');
  if (saved) form.elements.essay.value = saved;
</script>

2. Multi-step process resets to step 1 after re-auth

<!-- Bad: redirect to step 1 after login -->
<script>
  // After re-authentication
  window.location.href = '/checkout/step-1';
</script>

<!-- Good: return to the step where the user left off -->
<script>
  // After re-authentication, restore previous step
  const lastStep = sessionStorage.getItem('checkout-step');
  window.location.href = `/checkout/step-${lastStep || 1}`;
</script>

How to Test

Log in to the site and begin filling out a long form or multi-step process.
Wait for the session to expire (or manually clear the session cookie in DevTools > Application > Cookies).
Attempt to continue or submit. Verify the site prompts you to re-authenticate rather than silently losing data.
Log back in and confirm all previously entered data is preserved and you are returned to the same step.
Pass: After re-authentication, all entered data is preserved and the user resumes from where they left off.
Fail: Any data is lost after session expiration, or the user is returned to the beginning of the process after re-authenticating.

How to Fix

Save form state to the server or localStorage periodically as the user types
When a session expires, show a re-authentication prompt (modal or redirect) instead of silently losing data
After successful re-authentication, restore the user to their exact previous state
For multi-step flows, save the current step and all entered data server-side
Encrypt any sensitive data stored in localStorage and clear it after successful submission