WCAG 2.2.6 Timeouts: How to Warn Users About Session Expiration

What This Criterion Requires

WCAG 2.2.6 requires that users are warned about the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours. Many websites implement session timeouts for security or resource management purposes, automatically logging users out or clearing form data after a period of inactivity. This creates a significant barrier for users with disabilities who may take considerably longer to complete tasks. People who use screen readers, switch devices, or voice input often need more time to fill out forms, read content, and navigate pages. Cognitive disabilities, learning disabilities, and age-related conditions can also substantially increase the time needed. When a session expires without warning, users may lose partially completed forms, shopping carts, or application progress, forcing them to start over. This criterion ensures that users know upfront how long they have, so they can plan accordingly or request more time.

Why It Matters

Session timeouts disproportionately affect people with disabilities because assistive technology use inherently takes more time. A screen reader user filling out a multi-step application form may spend several times longer than a sighted mouse user on the same task. Users with motor disabilities who use switch access or head-tracking devices navigate much more slowly. People with cognitive disabilities may need to take breaks, re-read instructions, or consult reference materials while completing a task. When these users lose their work because of an undisclosed timeout, the impact goes beyond frustration. It can prevent them from completing essential tasks like applying for benefits, filing tax returns, or making healthcare appointments. Even for users without disabilities, unexpected data loss from timeouts erodes trust and damages user experience. Providing clear timeout warnings is a simple practice that benefits everyone.

Common Failures and How to Fix Them

// Server-side session config with no client-side warning
app.use(session({
  secret: 'key',
  cookie: { maxAge: 900000 } // 15 minutes, no warning
}));

// Server-side session with client-side warning
app.use(session({
  secret: 'key',
  cookie: { maxAge: 900000 }
}));

// Client-side: warn user 2 minutes before expiry
setTimeout(() => {
  const dialog = document.getElementById('timeout-warning');
  dialog.showModal(); // "Your session expires in 2 minutes. Extend?"
}, 780000); // 13 minutes

// Also display timeout duration at the start of the form
// <p>Note: This form session will expire after 15 minutes of inactivity.</p>

<div class="cart-items">
  <!-- Cart items rendered here, cleared after 30 min by server -->
</div>

<div class="cart-notice" role="status">
  <p>Items in your cart are saved for 24 hours. 
  <a href="/account/login">Sign in</a> to save them permanently.</p>
</div>
<div class="cart-items">
  <!-- Cart items rendered here -->
</div>

<!-- No timeout information provided anywhere -->

<!-- Timeout notice in page header or near forms -->
<div role="status" aria-live="polite" class="timeout-info">
  <p>For security, your session will expire after 20 minutes of inactivity. 
  You will receive a warning 2 minutes before expiration with an option to extend.</p>
</div>

How to Test

1. Identify all pages and forms that implement session timeouts or inactivity timers by reviewing server configuration and client-side JavaScript.
2. Check whether the timeout duration is clearly communicated to users before they begin the task (e.g., at the top of a form or in an introductory message).
3. Verify that a warning dialog appears before the timeout occurs, giving users the option to extend their session.
4. Test that the warning dialog is accessible: it should be a modal that receives focus, is announced by screen readers, and can be operated with a keyboard.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist

Further Reading

• Accessible Forms Guide
• Accessible Ecommerce Checkout Guide
• Wcag Explained Plain English

Related WCAG Criteria

• WCAG 2.2.1
• WCAG 2.2.2