WCAG 2.2.1: Timing Adjustable

Introduction to WCAG 2.2.1 Timing Adjustable

WCAG Success Criterion 2.2.1, known as “Timing Adjustable,” is a Level A criterion that addresses the critical need for users to control time limits imposed by web content. This criterion ensures that users are not rushed or disadvantaged by automatic timeouts, session expirations, or other time-sensitive functionalities.

The core principle is to provide users with sufficient time to read and interact with content. If a time limit is set, users must be able to turn it off, adjust it, or extend it, unless the time limit is genuinely essential to the functionality or relates to a real-time event where time is an inherent and unchangeable aspect.

Compliance with this criterion significantly improves the user experience for a wide range of individuals, preventing frustration, data loss, and an inability to complete tasks.

Why Timing Adjustable Matters (Accessibility Impact)

Time limits on web pages and applications can create significant barriers for many users. Ensuring time adjustability is crucial for:

• Users with Cognitive Disabilities: Individuals with learning disabilities, ADHD, or other cognitive impairments may require more time to process information, read content, or complete complex forms. Unexpected timeouts can lead to confusion, anxiety, and an inability to finish tasks.
• Users with Motor Disabilities: People who use assistive technologies like switch controls, head pointers, or voice input may take longer to navigate, type, or activate controls. Short time limits can cause them to lose their progress or miss critical information.
• Users who are Blind or Have Low Vision: Screen reader users need time to listen to content, navigate elements, and understand the page structure. Rapid timeouts can interrupt their workflow and prevent them from completing interactions.
• Users with Reading Disabilities or Non-Native Speakers: Individuals who read at a slower pace, or who are processing information in a second language, require more time to comprehend text and make decisions.
• Users with Temporary Disabilities or Fatigue: Anyone can experience a temporary reduction in cognitive or motor function due to illness, injury, or fatigue. Flexible time limits accommodate these temporary states.

Without adjustable timing, users may be unable to complete online purchases, fill out forms, participate in online activities, or even read essential information before being logged out or having their session expire, leading to significant frustration and exclusion.

Success Criterion 2.2.1: Requirements

The official WCAG 2.2.1 (Timing Adjustable) Success Criterion states:

If a time limit is set by the content, at least one of the following is true:

1. Turn Off: The user is allowed to turn off the time limit before encountering it; or
2. Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or
3. Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (e.g., "press the spacebar"), and the user is allowed to extend the time limit at least ten times; or
4. Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or
5. Essential Exception: The time limit is essential and extending it would invalidate the activity; or
6. 20 Hour Exception (WCAG 2.1 addition): The time limit is longer than 20 hours.

Understanding the Options:

• Turn Off: The most straightforward approach, allowing users to completely disable the countdown or timeout. This is ideal when the time limit serves no essential purpose other than convenience.
• Adjust: Providing options to increase the time limit significantly. A "wide range" is specified as at least ten times the default, meaning if the default is 5 minutes, users should be able to set it to 50 minutes or more.
• Extend: A common solution for session timeouts. Users receive a clear warning (e.g., a modal dialog) before the time expires, with an option to extend the session for a specified period (at least 20 seconds, repeatable at least 10 times).

Exceptions Explained:

• Real-time Exception: Applies to scenarios like online auctions, timed games, or live broadcasts where the concept of time is inherent to the event itself. Extending time would fundamentally alter the nature of the activity.
• Essential Exception: Covers situations where extending the time would break the core functionality or purpose, such as a timed online exam or a security mechanism that requires re-authentication after a short period. The key is that the time limit cannot be bypassed or extended without compromising the activity’s validity.
• 20 Hour Exception: This clarification, introduced in WCAG 2.1, notes that time limits exceeding 20 hours are generally considered long enough not to pose a significant accessibility barrier.

Practical Guidelines for Compliance

To implement WCAG 2.2.1 effectively, consider the following practical guidelines:

• Minimize Time Limits: The best approach is often to avoid unnecessary time limits altogether. If a task doesn’t absolutely require a time constraint, remove it.
• Provide Options Early: If a time limit must exist, provide options to turn it off, adjust it, or understand how to extend it before the user encounters the timeout. Don’t surprise users with sudden expirations.
• Clear and Prominent Warnings: For extendable time limits, warnings must be highly visible, clearly explain the situation (e.g., "Your session will expire in 60 seconds"), and present an obvious action to extend (e.g., "Click here to extend session").
• Simple Extension Mechanism: The action to extend the time limit should be simple, such as a single click, key press, or tap. Avoid complex multi-step processes.
• Persistence of Settings: If a user adjusts a time limit, their preference should ideally be remembered for future sessions, especially on the same device.
• Consider User Preferences: Where possible, allow users to set global preferences for time limits within an application or website.
• Review "Essential" Claims Carefully: Don’t label a time limit as "essential" unless it genuinely meets the WCAG definition. Many seemingly essential time limits can be modified without invalidating the activity. For example, a banking transaction might have a timeout for security, but the warning and extension option can still be provided.

Examples of Correct and Incorrect Implementations

Correct Implementation: Session Timeout with Warning and Extend Option

An online banking portal has a 5-minute session timeout for security. Before the session expires, a modal dialog appears, giving the user an option to extend.

<div id="session-timeout-modal" role="alertdialog" aria-modal="true" aria-labelledby="timeout-title" class="hidden">
  <h2 id="timeout-title">Session Expiring Soon!</h2>
  <p>Your session will expire in <span id="countdown">60</span> seconds due to inactivity.</p>
  <p>Would you like to extend your session?</p>
  <button id="extend-session-btn">Extend Session</button>
  <button id="logout-btn">Log Out</button>
</div>

#session-timeout-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  text-align: center;
  display: none; /* Controlled by JavaScript */
}
#session-timeout-modal.visible {
  display: block;
}
#extend-session-btn, #logout-btn {
  padding: 10px 15px;
  margin: 10px;
  cursor: pointer;
}

let sessionTimer;
let warningTimer;
const defaultSessionTime = 300; // 5 minutes in seconds
const warningTime = 60; // 60 seconds before timeout
let currentSessionTime = defaultSessionTime;
let extendCount = 0;
const maxExtendCount = 10;

const modal = document.getElementById('session-timeout-modal');
const countdownSpan = document.getElementById('countdown');
const extendBtn = document.getElementById('extend-session-btn');
const logoutBtn = document.getElementById('logout-btn');

function startSessionTimer() {
  clearTimeout(sessionTimer);
  clearTimeout(warningTimer);
  currentSessionTime = defaultSessionTime;
  extendCount = 0;
  sessionTimer = setTimeout(showWarning, (currentSessionTime - warningTime) * 1000);
  console.log('Session timer started. Warning in ' + (currentSessionTime - warningTime) + ' seconds.');
}

function showWarning() {
  modal.classList.add('visible');
  let timeLeft = warningTime;
  countdownSpan.textContent = timeLeft;

  warningTimer = setInterval(() => {
    timeLeft--;
    countdownSpan.textContent = timeLeft;
    if (timeLeft <= 0) {
      clearInterval(warningTimer);
      performLogout(); // Or submit data, etc.
    }
  }, 1000);
  console.log('Warning displayed. Time left: ' + warningTime + ' seconds.');
}

function extendSession() {
  if (extendCount < maxExtendCount) {
    extendCount++;
    modal.classList.remove('visible');
    clearInterval(warningTimer);
    startSessionTimer(); // Reset the session timer
    console.log('Session extended. Total extensions: ' + extendCount);
  } else {
    alert('Maximum session extensions reached. Please log out and log back in.');
    performLogout();
  }
}

function performLogout() {
  modal.classList.remove('visible');
  console.log('User logged out.');
  alert('Your session has expired. You have been logged out.');
  // Redirect to login page or clear session data
}

extendBtn.addEventListener('click', extendSession);
logoutBtn.addEventListener('click', performLogout);

// Initialize the session timer when the page loads
startSessionTimer();

// Optional: Reset timer on user activity (e.g., mouse move, key press)
document.addEventListener('mousemove', () => { /* startSessionTimer(); */ });
document.addEventListener('keypress', () => { /* startSessionTimer(); */ });

Incorrect Implementation: Unannounced Auto-Logout

A website automatically logs users out after 10 minutes of inactivity without any warning or option to extend the session. All user input is lost.

Correct Implementation: Timed Quiz with Adjustable Time

An online learning platform offers quizzes with a default time limit (e.g., 30 minutes). Before starting the quiz, students can choose to increase the time or even take it untimed if their instructor allows.

<div class="quiz-start-options">
  <h2>Quiz: Introduction to WCAG</h2>
  <p>Default time limit: 30 minutes.</p>

  <div class="time-settings">
    <label for="time-adjustment">Adjust Time Limit:</label>
    <select id="time-adjustment">
      <option value="30">30 Minutes (Default)</option>
      <option value="45">45 Minutes</option>
      <option value="60">60 Minutes</option>
      <option value="90">90 Minutes (3x default)</option>
      <option value="300">300 Minutes (10x default)</option>
      <option value="0">Untimed (if allowed)</option>
    </select>
  </div>

  <button id="start-quiz-btn">Start Quiz</button>
</div>

Best Practices and Common Pitfalls

Best Practices:

• Prioritize "No Time Limit": If possible, design content and interactions without any time limits. This is the most accessible approach.
• Proactive Controls: Always provide options for time adjustment or extension before the user begins a task or encounters the timeout.
• Clear and Consistent UI: Ensure that controls for adjusting or extending time are clearly labeled, easy to find, and function consistently across your site or application.
• User Testing: Test your time-sensitive features with real users, especially those using various assistive technologies and individuals with cognitive or motor impairments, to identify any usability issues.
• Graceful Handling of Timeouts: If a timeout does occur despite warnings, ensure that user data is saved if possible, or provide clear instructions on how to recover or restart.

Common Pitfalls:

• Hidden or Obscure Controls: Placing the "extend session" button in an inaccessible location or using unclear language.
• Insufficient Extension Time: Providing only a few seconds to extend, or allowing only one or two extensions, which is not enough for many users.
• Ambiguous Warnings: Vague messages like "Your session is ending" without specific timeframes or clear calls to action.
• Mislabeling "Essential" Time Limits: Claiming a time limit is essential when it could reasonably be adjusted or removed without invalidating the activity (e.g., a simple marketing survey).
• Lack of Persistence: Failing to remember a user’s chosen time settings, forcing them to re-adjust for every session or task.
• Over-reliance on JavaScript: While JavaScript is often used for timers, ensure that the warning and extension mechanism is robust and accessible, even for users with certain browser configurations.