2.2.1 Timing Adjustable

Level: A | Principle: Operable | Since: WCAG 2.0 | Automation: Manual

What This Means

When a time limit is set by the content, the user must be able to do at least one of the following: turn off the time limit, adjust it to at least 10 times the default, or be warned before time expires and given at least 20 seconds to extend it. The exception is when the time limit is longer than 20 hours, or when timing is essential (such as a real-time auction).

Users with disabilities often need more time to read, understand, and interact with content.

Who This Affects

Users with cognitive disabilities — need more time to read and comprehend content
Screen reader users — sequential reading takes longer than visual scanning
Users with motor disabilities — need more time to navigate and interact
Users with low vision — reading magnified content is slower

Common Pitfalls

1. Session timeout with no warning

// Bad: session expires silently after 15 minutes
setTimeout(() => {
  window.location.href = '/login';
}, 15 * 60 * 1000);

2. Auto-advancing carousel with no pause

// Bad: carousel advances every 5 seconds with no way to stop it
setInterval(() => {
  showNextSlide();
}, 5000);

3. Form that clears after a timeout

// Bad: form data lost after inactivity
setTimeout(() => {
  form.reset();
  alert('Session expired. Please start over.');
}, 10 * 60 * 1000);

How to Fix

Session timeout with warning and extension

// Good: warn user 60 seconds before timeout and allow extension
let timeout = 15 * 60 * 1000;
let warningTime = timeout - 60 * 1000;

setTimeout(() => {
  const extend = confirm('Your session will expire in 60 seconds. Click OK to extend.');
  if (extend) {
    resetTimeout(); // restart the timer
  }
}, warningTime);

Provide timeout settings

<!-- Good: let users control the timeout -->
<label for="timeout-setting">Session timeout:</label>
<select id="timeout-setting">
  <option value="15">15 minutes</option>
  <option value="30">30 minutes</option>
  <option value="60">60 minutes</option>
  <option value="0">No timeout</option>
</select>

Auto-redirect with meta refresh

<!-- Bad: auto-redirects after 30 seconds -->
<meta http-equiv="refresh" content="30;url=/next-page">

<!-- Good: provide a link and let the user decide -->
<a href="/next-page">Continue to next page</a>

How to Test

Identify all time-limited functionality on the page: session timeouts, auto-advancing carousels, countdown timers, and auto-refreshing content.
For session timeouts, wait for the timeout to approach and verify a warning appears at least 20 seconds before expiration with an option to extend.
For auto-advancing content, verify there is a visible pause/stop control that is keyboard accessible.
Check the page source for <meta http-equiv="refresh"> tags that auto-redirect.
Verify users can either turn off, adjust (to at least 10x the default), or extend each time limit.
Pass: Every time limit can be turned off, adjusted, or extended with a warning, or it exceeds 20 hours.
Fail: Any time limit expires without warning, cannot be extended, or auto-redirects without user control.

axe-core Rules

| Rule | What It Checks | |------|---------------| | meta-refresh | Ensures <meta http-equiv="refresh"> is not used for delayed redirect |