Preserve User Data Across Re-authentication

Disabilities Affected: Cognitive, Mobility

Success Criterion: 2.2.5

Level: AAA

When an authenticated session expires, the user must be able to continue the activity without loss of data after re-authenticating.

Why It Matters

Users, especially those with cognitive impairments, may take longer to complete tasks within a logged-in session. If the session times out (even with warnings per WCAG 2.2.1), forcing them to log back in should not cause them to lose all the data they had entered or the state of their current activity (e.g., items in a shopping cart, partially filled form). Preserving data across re-authentication prevents significant frustration and data loss.

Fixing the Issue

Design authenticated sessions so that data entered by the user is preserved if the session expires. When the user re-authenticates, restore their previous state and data automatically. Techniques include:

Saving form data periodically using browser local storage or server-side drafts.
When a session expires, redirect to a login page that, upon successful login, redirects back to the original page with the data pre-filled.
For shopping carts, ensure cart contents are associated with the user account and persist across sessions.

Good Code Example

(Conceptual) Saving form data to local storage and restoring after potential re-login:

Markup
Preview

<form id="long-form" action="https://www.accessitree.com" method="post"  target="_blank">
  <div><label for="field1">Field 1:</label></div>
  <input type="text" id="field1" name="f1">
  <div><label for="field2">Field 2:</label></div>
  <textarea id="field2" name="f2"></textarea><br>
  <div><button type="submit">Submit</button></div>
</form>

<script>
  const form = document.getElementById('long-form');
  const field1 = document.getElementById('field1');
  const field2 = document.getElementById('field2');
  const formStorageKey = 'longFormData';

  // Save data periodically or on input change
  form.addEventListener('input', () => {
    const formData = {
      f1: field1.value,
      f2: field2.value
    };
    try {
      localStorage.setItem(formStorageKey, JSON.stringify(formData));
      console.log('Form data saved');
    } catch (e) {
      console.error('Could not save form data to local storage', e);
    }
  });

  // On page load, check for saved data (simulates loading after re-auth)
  window.addEventListener('load', () => {
    try {
       const savedData = localStorage.getItem(formStorageKey);
       if (savedData) {
         const formData = JSON.parse(savedData);
         field1.value = formData.f1 || '';
         field2.value = formData.f2 || '';
         console.log('Form data restored');
         // Optionally clear storage after restoring
         // localStorage.removeItem(formStorageKey);
       }
    } catch (e) {
       console.error('Could not restore form data', e);
    }
  });

  // Clear storage on successful submission
  form.addEventListener('submit', () => {
     try {
        localStorage.removeItem(formStorageKey);
     } catch (e) { /* Ignore */ }
  });
</script>

Field 1:

Field 2:

Bad Code Example

Session timeout leads to data loss:

Markup
Preview

<form action="https://www.accessitree.com" method="post">
   <textarea name="essay"></textarea>
   <div><button type="submit">Submit</button></div>
</form>

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult