FeaturesPricingAudit GuideFree StatementDashboard →

Warn Users Before Session Timeout

Learn how to implement accessible session timeout warnings that give users time to respond.

6 min read
moderate severityWCAG Level AWCAG 2.1 Success Criterion 2.2.1Manual review needed

What Is It?

Session timeout warnings alert users before their session expires, usually with a modal or notification. Users can then click to extend their session or save their work.

Affected users: Users with cognitive disabilities, users with motor disabilities, slow readers, screen reader users, users on slow connections

Why It Matters

Users with cognitive disabilities or motor disabilities may need extra time to save work. Blind users navigating with screen reader need time to notice and respond to timeout warning.

How to Detect This Issue

Use application and let it idle. Check if timeout warning appears with enough time to respond. Check warning is announced to screen readers. Verify 'Extend' button is keyboard accessible.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
Session ends silently, user loses unsaved work
After (accessible)
<div role="alertdialog" aria-labelledby="timeout-title" aria-describedby="timeout-message">
  <h2 id="timeout-title">Session Expiring</h2>
  <p id="timeout-message">Your session will end in 2 minutes due to inactivity. Click "Continue" to stay signed in.</p>
  <button onclick="extendSession()">Continue</button>
  <button onclick="logout()">Sign Out</button>
</div>

Use role="alertdialog" for timeout warnings. Provide at least 2-5 minutes before timeout. Make buttons accessible and clearly labeled.

React / Next.js

Before
Session manager silently logs out user
After
const [showTimeout, setShowTimeout] = useState(false); const [timeRemaining, setTimeRemaining] = useState(300); // 5 min
return (<>\n  {showTimeout && (
    <div role="alertdialog" aria-label="Session timeout warning">
      <p>Your session expires in {Math.floor(timeRemaining / 60)} minute(s)</p>
      <button onClick={() => extendSession()}>Stay Signed In</button>
      <button onClick={() => logout()}>Sign Out</button>
    </div>
  )}
</>);

Show warning dialog with countdown timer. Provide clear action buttons. Announce updates to screen readers.

WordPress

Before
Dashboard session ends without warning
After
Use plugin like "Session Timeout" that displays countdown before logout, allows extend with button

Install WordPress session timeout plugin with accessibility features. Ensure countdown is readable and buttons are keyboard accessible.

Shopify Liquid

Before
Checkout session expires, user loses cart without warning
After
Implement session timeout warning 5-10 minutes before expiration with "Continue Shopping" button and clear explanation

For checkout flows, provide extended timeout and visible, accessible warning. Announce timeout risk clearly.

Common Mistakes

✗

Timeout warning disappears too quickly for users to read

✗

Warning only shown visually, not announced to screen readers

✗

Insufficient time before timeout (less than 2 minutes)

✗

Session expires even while user is interacting (should extend on activity)

✗

Warning modal can't be dismissed with keyboard or screen reader

Frequently Asked Questions

How much time should users get before timeout?
Minimum 2 minutes for cognitive disabilities. 5-10 minutes is better. Adjust based on sensitivity of data (banking: longer; low-risk: shorter).
Should activity reset the timeout counter?
Usually yes. Keyboard and mouse activity extends session. But some security-sensitive apps timeout regardless of activity (user explicitly clicks 'Stay Signed In').
What role should timeout warning use?
role="alertdialog" if user must respond to dismiss it. role="alert" if it's an announcement they can ignore. Make the choice intentional based on necessity.
Should the warning be dismissable?
Yes, provide a 'Stay Signed In' button and a 'Sign Out' button. Users should always have control. Don't force-logout without interaction.

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides