WCAG 2.2.1: How to Fix Time Limit and Session Timeout Issues

Last updated: 2026-03-22

Level A Operable WCAG 2.2.1

What This Criterion Requires

WCAG 2.2.1 requires that for each time limit set by the content, the user can turn off the time limit before encountering it, adjust the time limit to at least ten times the default setting, or be warned before time expires and given at least 20 seconds to extend the time limit with a simple action, and be allowed to extend it at least ten times. There are exceptions for real-time events (auctions, live streams), essential time limits where extending would invalidate the activity, and time limits longer than 20 hours. Common time limits on the web include session timeouts that log users out after inactivity, auto-advancing carousels or slideshows, automatically updating content feeds, time-limited form submissions or checkout processes, and countdown timers for special offers. Each of these must provide a way for users to control the timing to ensure they have enough time to read and interact with content at their own pace.

Why It Matters

Many users with disabilities need significantly more time to complete tasks than the general population. Screen reader users navigate content sequentially and may take much longer to read a page or fill out a form. Users with cognitive disabilities or learning disabilities may need extra time to understand instructions and formulate responses. Users with motor disabilities may type slowly or need extra time to manipulate interface controls. Users who are deaf and reading captions or interpreting sign language videos may need more time to process multimedia content. When content imposes time limits without providing adjustment options, these users are effectively shut out. Session timeouts that log users out while they are still actively working through a long form are particularly frustrating, as all entered data may be lost. Auto-advancing carousels that change slides every few seconds may move past content before a screen reader user has finished reading the current slide.

Common Failures and How to Fix Them

Session timeout without warning or extension option

A web application automatically logs users out after a period of inactivity without providing any warning before the timeout occurs or any option to extend the session. Users who take longer to complete tasks lose their work.

Inaccessible 
<script>
  // Auto logout after 15 minutes with no warning
  setTimeout(function() {
    window.location.href = '/logout';
  }, 900000);
</script>
Accessible 
<script>
  let timeoutDuration = 900000; // 15 minutes
  let warningTime = 120000; // Warn 2 minutes before
  let timer;

  function startTimer() {
    timer = setTimeout(showWarning, timeoutDuration - warningTime);
  }

  function showWarning() {
    const dialog = document.getElementById('timeout-dialog');
    dialog.showModal();
    // Auto logout in 2 minutes if not extended
    timer = setTimeout(logout, warningTime);
  }

  function extendSession() {
    clearTimeout(timer);
    document.getElementById('timeout-dialog').close();
    startTimer(); // Reset the timer
  }

  startTimer();
</script>
<dialog id="timeout-dialog" role="alertdialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Session expiring soon</h2>
  <p>Your session will expire in 2 minutes due to inactivity.</p>
  <button onclick="extendSession()">Continue session</button>
  <button onclick="logout()">Log out</button>
</dialog>

Auto-advancing carousel with no pause control

A content carousel automatically advances every 5 seconds with no way for users to pause, stop, or control the timing. Users who read slowly or use assistive technology cannot finish reading each slide before it changes.

Inaccessible 
<div class="carousel">
  <div class="slide active">Slide 1 content with important information</div>
  <div class="slide">Slide 2 content</div>
  <div class="slide">Slide 3 content</div>
</div>
<script>
  setInterval(nextSlide, 5000); // Auto-advance every 5 seconds
</script>
Accessible 
<div class="carousel" aria-roledescription="carousel" aria-label="Featured content">
  <div class="carousel-controls">
    <button onclick="prevSlide()" aria-label="Previous slide">Previous</button>
    <button id="pause-btn" onclick="toggleAutoplay()" aria-label="Pause auto-rotation">Pause</button>
    <button onclick="nextSlide()" aria-label="Next slide">Next</button>
  </div>
  <div class="slide active" role="group" aria-roledescription="slide" aria-label="1 of 3">Slide 1 content</div>
  <div class="slide" role="group" aria-roledescription="slide" aria-label="2 of 3">Slide 2 content</div>
  <div class="slide" role="group" aria-roledescription="slide" aria-label="3 of 3">Slide 3 content</div>
</div>
<script>
  let autoplay = true;
  let interval = setInterval(nextSlide, 5000);
  function toggleAutoplay() {
    autoplay = !autoplay;
    if (autoplay) {
      interval = setInterval(nextSlide, 5000);
      document.getElementById('pause-btn').textContent = 'Pause';
    } else {
      clearInterval(interval);
      document.getElementById('pause-btn').textContent = 'Play';
    }
  }
</script>

How to Test

  1. Identify all time limits on the page including session timeouts, auto-advancing content, countdown timers, and automatically refreshing content.
  2. For session timeouts, verify that a warning dialog appears before the session expires and provides a way to extend the session with at least 20 seconds to respond.
  3. For auto-advancing content like carousels, verify that pause, stop, or manual navigation controls are provided and are keyboard accessible.
  4. Test that time limit controls work correctly with keyboard and screen reader, and that extending a timeout resets the timer rather than just adding a small amount of time.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria