2.2.1 Timing Adjustable

What this rule means

WCAG 2.2.1 requires that when content imposes a time limit, users must be given the ability to turn it off, adjust it, or extend it. For each time limit, at least one of the following must be true: the user can turn it off before encountering it, the user can adjust it to at least 10 times the default, or the user is warned before time expires and given at least 20 seconds to extend it with a simple action (like pressing a key), with the ability to extend at least 10 times.

There are limited exceptions: real-time events where a time limit is essential (like an auction), situations where the time limit is longer than 20 hours, and essential time limits that cannot be changed without invalidating the activity. Session timeouts for security purposes must still provide a warning and extension mechanism.

Why it matters

Users with disabilities often need significantly more time to complete tasks. A blind user navigating a complex form with a screen reader may take 5-10 times longer than a sighted user. Users with cognitive disabilities may need more time to read and understand content. Users with motor impairments may type or navigate much more slowly than expected by default timeout values.

Session timeouts that silently expire can cause users to lose all their work — a particularly devastating experience for someone who has spent 30 minutes carefully completing a form using assistive technology. Adjustable timing ensures that no user is unfairly penalized for needing more time.

Related axe-core rules

There are no automated axe-core rules for this criterion. Time limits are implemented in server-side logic and client-side JavaScript, making them difficult to detect through automated DOM analysis. Manual testing with deliberately slow interaction is required.

How to test

Testing requires identifying all time-limited functionality and verifying that users can control the timing.

1. Identify all time limits in the application: session timeouts, form submission deadlines, auto-advancing carousels, temporary notifications.
2. For each time limit, verify that the user can turn it off, adjust it, or extend it.
3. If extension is the mechanism: verify a warning appears at least 20 seconds before expiry.
4. Verify the extension action is simple (pressing any key, clicking a button) and can be performed at least 10 times.
5. Test session timeout behavior: does the application warn before expiring? Can users extend their session?

• Check that auto-advancing content (carousels, slideshows) can be paused or have adjustable timing.

How to fix

Implement a timeout warning dialog that allows users to extend their session before it expires.

Session timeout warning

const SESSION_TIMEOUT = 15 * 60 * 1000; // 15 minutes
const WARNING_BEFORE = 60 * 1000; // Warn 60 seconds before
let timeoutId, warningId;

function startSessionTimer() {
  clearTimeout(timeoutId);
  clearTimeout(warningId);

  warningId = setTimeout(() => {
    showTimeoutWarning();
  }, SESSION_TIMEOUT - WARNING_BEFORE);

  timeoutId = setTimeout(() => {
    expireSession();
  }, SESSION_TIMEOUT);
}

function showTimeoutWarning() {
  const dialog = document.getElementById('timeout-dialog');
  dialog.showModal();
  dialog.focus();
  startCountdown(60);
}

function extendSession() {
  // Reset the timer
  startSessionTimer();
  document.getElementById('timeout-dialog').close();
  // Ping the server to refresh the session
  fetch('/api/extend-session', { method: 'POST' });
}

Timeout warning dialog HTML

<dialog id="timeout-dialog" role="alertdialog"
  aria-labelledby="timeout-title"
  aria-describedby="timeout-desc">
  <h2 id="timeout-title">Session Expiring</h2>
  <p id="timeout-desc">
    Your session will expire in
    <span id="countdown">60</span> seconds.
    Any unsaved changes will be lost.
  </p>
  <button onclick="extendSession()" autofocus>
    Continue Session
  </button>
  <button onclick="logout()">
    Log Out
  </button>
</dialog>

Adjustable auto-advance timing

<!-- Carousel with timing controls -->
<div role="region" aria-label="Featured content">
  <div class="carousel-slides"><!-- slides --></div>
  <div class="carousel-controls">
    <button onclick="prevSlide()"
      aria-label="Previous slide">&#8592;</button>
    <button onclick="toggleAutoAdvance()"
      aria-label="Pause auto-advance"
      id="pause-btn">&#10074;&#10074;</button>
    <button onclick="nextSlide()"
      aria-label="Next slide">&#8594;</button>
  </div>
  <label>
    Auto-advance speed:
    <select onchange="setSpeed(this.value)">
      <option value="0">Off</option>
      <option value="10000">Slow (10s)</option>
      <option value="5000" selected>Normal (5s)</option>
      <option value="3000">Fast (3s)</option>
    </select>
  </label>
</div>

Common mistakes

• Session timeouts that expire silently without warning, causing users to lose unsaved work.
• Timeout warnings that appear for only a few seconds and cannot be extended.
• Form submission deadlines with no option to request more time.
• Auto-advancing carousels or slideshows with no pause button or timing controls.
• Countdown timers on quiz or survey pages without extension options.
• Redirect timers on intermediate pages (e.g., "You will be redirected in 5 seconds") without a way to cancel.