WCAG 2.2.1 — Timing Adjustable

What this requires

For any time limit set by the content, at least one of these must be true:

Turn off: the user can disable the time limit before reaching it.
Adjust: the user can adjust the time limit before reaching it, to at least ten times the default.
Extend: the user can extend the time limit with a simple action (a single keypress or click) and at least ten times.

Exceptions: real-time events (an auction), essential time limits (time-bound exam questions), and limits longer than 20 hours.

How AI coding tools fail this

When asked to add a session timeout or an OTP expiry, AI tools generate a fixed-duration timer with no extension UI. The user is silently logged out, or the OTP expires mid-typing, and the only way out is to restart.

The second pattern: confirmation prompts with auto-dismiss ("Delete will continue in 5… 4… 3…"). A motor-impaired or cognitive user who needs more time has no way to slow the countdown.

The third: form sessions that time out without warning. The user hits Submit on a long form and the page redirects to login, discarding the form data. See also 2.2.5.

Failing examples

A session timeout that logs the user out with no warning:

useEffect(() => {
  const id = setTimeout(() => logoutAndRedirect(), 15 * 60 * 1000);
  return () => clearTimeout(id);
}, []);

A "delete will continue in 5 seconds" countdown with no extend option:

<DialogCountdown
  seconds={5}
  onComplete={confirmDelete}
  message="Deleting in"
/>

Passing examples

Warn the user before the session expires, offer to extend, and require an explicit acknowledgement:

function useSessionTimeout(ms: number, onExpire: () => void) {
  const [warning, setWarning] = useState(false);
  useEffect(() => {
    const warnId = setTimeout(() => setWarning(true), ms - 60_000);
    const expireId = setTimeout(onExpire, ms);
    return () => {
      clearTimeout(warnId);
      clearTimeout(expireId);
    };
  }, [ms, onExpire]);

  return { warning, dismiss: () => setWarning(false) };
}

// In the UI:
{warning && (
  <Dialog>
    <h2>Your session is about to expire</h2>
    <p>You will be signed out in 60 seconds.</p>
    <button onClick={extendSession}>Stay signed in</button>
    <button onClick={signOutNow}>Sign out now</button>
  </Dialog>
)}

A delete dialog that requires explicit confirmation rather than counting down:

<Dialog>
  <h2>Delete this project?</h2>
  <p>This cannot be undone.</p>
  <button onClick={confirmDelete}>Yes, delete</button>
  <button onClick={cancel}>Cancel</button>
</Dialog>

Edge cases

Real-time events (auctions, live games) genuinely require timing and are exempt.
Security-driven session timeouts are essential and may set shorter limits — the criterion permits this, but the warning and extension UI is still required.
OTP and recovery code expiry typically falls under "essential"; the standard is to keep the expiry short and offer easy resending.
Auto-save is a great way to satisfy this criterion indirectly: if the work is saved continuously, a session timeout doesn't lose anything. See 2.2.5.
20-hour limit is the upper bound on the rule. A "log out after 24 hours of inactivity" timer doesn't need an extension UI.

How Jeikin handles this

The scanner flags setTimeout and setInterval calls with durations between 30 seconds and 20 hours that trigger destructive actions (logout, route change, data discard) without an associated warning component. The dashboard records each finding for manual review and captures the extension UI when present.

References

W3C — Understanding 2.2.1 Timing Adjustable (opens in new tab)