WCAG 2.2.3: No Timing

Understanding WCAG 2.2.3 No Timing

WCAG 2.2.3 No Timing (Level A) is a success criterion introduced in WCAG 2.2. It addresses the critical need to eliminate or manage time limits for user interactions on web content, ensuring that users are not rushed and can complete tasks at their own pace. This criterion is fundamental to creating an inclusive web environment where all users, regardless of their abilities, can interact effectively without arbitrary pressure or the risk of losing their progress.

While earlier WCAG versions (2.0 and 2.1) included criteria related to timing (e.g., 2.2.1 Timing Adjustable), SC 2.2.3 specifically broadens the scope to cover all time limits imposed by content, aiming for a more comprehensive approach to user control over the pace of interaction.

Why No Timing Matters for Accessibility

Time limits can present significant barriers for a wide range of users, making web content inaccessible and frustrating. Removing or managing these limits is crucial for:

• Users with Cognitive Disabilities: Individuals with learning disabilities, ADHD, memory impairments, or other cognitive challenges may need more time to read, understand, process information, or formulate responses. Time limits can lead to anxiety, errors, and an inability to complete tasks.
• Users with Motor Disabilities: People who use alternative input methods (e.g., switch devices, head pointers, mouth sticks) or have limited dexterity may navigate and input information more slowly. Rushed interactions can prevent them from accurately selecting options or typing.
• Users with Low Vision or Blindness: Screen reader users, or those who rely on magnification, often take longer to perceive and navigate content. Time limits can cause them to miss critical information or fail to complete time-sensitive actions before a session expires.
• Users with Reading Disabilities: Dyslexic users or others who process text more slowly benefit from the ability to take their time without the pressure of an impending timeout.
• Users under Stress or Fatigue: Anyone can experience temporary cognitive or motor slowness due to stress, fatigue, or unfamiliarity with a task. Removing time constraints improves usability for all.
• Mobile Users with Intermittent Connectivity: Users on unreliable networks may experience delays in loading or submitting content, which time limits can exacerbate.

Ultimately, time limits can lead to user frustration, abandonment of tasks, loss of unsaved data, and exclusion from essential services or information. Providing control over timing fosters a more relaxed, efficient, and inclusive user experience.

Success Criteria and Requirements (WCAG 2.2.3)

The core requirement of WCAG 2.2.3 No Timing is that, except for real-time events, any time limits imposed by the content are either not present, or the user is allowed to adjust, remove, or extend the limit.

This criterion provides several ways to satisfy its requirements:

1. No Time Limit: The most straightforward way to comply is to simply not impose any time limits on user interactions.
2. Disable: The user is allowed to turn off the time limit before encountering it.
3. Adjust: The user is allowed to adjust the time limit over a wide range that is at least ten times the length of the default setting, before encountering it.
4. Extend: The user is warned before time expires and is given at least 20 seconds to extend the time limit with a simple action (e.g., pressing the spacebar), and they can extend the limit at least ten times.
5. Essential: The time limit is essential and extending it would invalidate the activity. (e.g., a real-time auction or game where the timing is an inherent part of the function).
6. Real-time Event: The time limit is for a real-time event (e.g., a live broadcast, a shared online meeting, a synchronized interactive simulation).
7. Security Session Timeout: The time limit is for a non-activity security session timeout, and the user is warned of the impending timeout at least 20 hours in advance.

It’s important to differentiate between ‘essential’ time limits, which are rare and truly integral to the function, and arbitrary time limits that serve no critical purpose for the user.

Practical Guidelines for Compliance

To ensure your web content complies with WCAG 2.2.3 No Timing, consider the following practical guidelines:

• Eliminate Unnecessary Time Limits: Review all interactions (forms, quizzes, content displays, sessions) and remove any time limits that are not strictly essential.
• Provide User Control for Necessary Limits: If a time limit is genuinely required (e.g., for security or resource management), always offer users options to manage it.
• Implement Extend/Refresh Options: For session timeouts, provide clear warnings before expiration and an easy way to extend the session. The warning should be prominent and timely (e.g., 60 seconds before expiration).
• Save User Progress: For multi-step forms or complex tasks, implement auto-saving functionality so users do not lose their work if they are interrupted or a session times out for unforeseen reasons.
• Avoid Auto-Advancing Content Without Controls: Carousels, slideshows, or other dynamic content that automatically changes should always include controls for users to pause, stop, and navigate manually.
• Clear and Accessible Warnings: Ensure any warnings about impending time limits are conveyed accessibly (e.g., visually prominent, programmatically announced for screen readers) and offer clear instructions on how to extend the time.
• Long Session Timeouts: If a non-activity security timeout is used, ensure it is sufficiently long (at least 20 hours as per the criterion’s exception) or provides ample warning to the user.

Examples of Correct and Incorrect Implementations

Correct Implementation Examples

Below are examples of how to implement user interfaces that comply with WCAG 2.2.3.

<div id="session-warning" role="alert" aria-live="polite" style="display:none;">
  <p>Your session will expire in <span id="countdown">60</span> seconds due to inactivity.</p>
  <button id="extend-session-button">Extend Session</button>
</div>

<script>
  let timeoutId;
  let countdownInterval;
  let timeLeft = 60;
  const warningDiv = document.getElementById('session-warning');
  const countdownSpan = document.getElementById('countdown');
  const extendButton = document.getElementById('extend-session-button');

  function startSessionTimer() {
    // Reset any previous timers
    clearTimeout(timeoutId);
    clearInterval(countdownInterval);
    timeLeft = 60; // Reset countdown for next warning

    // Simulate a long session timeout (e.g., 20 minutes of inactivity)
    timeoutId = setTimeout(() => {
      warningDiv.style.display = 'block';
      startCountdown();
    }, 1000 * 60 * 20); // Warning appears after 20 minutes
  }

  function startCountdown() {
    countdownSpan.textContent = timeLeft;
    countdownInterval = setInterval(() => {
      timeLeft--;
      countdownSpan.textContent = timeLeft;
      if (timeLeft <= 0) {
        clearInterval(countdownInterval);
        // Simulate logout or session end
        alert('Your session has expired. You have been logged out.');
        // Redirect or refresh page
        // window.location.reload(); 
      }
    }, 1000);
  }

  extendButton.addEventListener('click', () => {
    warningDiv.style.display = 'none';
    clearTimeout(timeoutId);
    clearInterval(countdownInterval);
    startSessionTimer(); // Restart the main session timer
    alert('Session extended!');
  });

  // Start the timer when the page loads or after user activity
  startSessionTimer();

  // Example of user activity resetting the timer
  document.addEventListener('mousemove', startSessionTimer);
  document.addEventListener('keypress', startSessionTimer);
  document.addEventListener('click', startSessionTimer);
</script>

<form action="/submit-application" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="comments">Comments:</label>
  <textarea id="comments" name="comments" rows="5"></textarea>

  <button type="submit">Submit Application</button>
</form>

<script>
  // No JavaScript for timing is applied to this form. Users can take as long as they need.
  // Consider implementing auto-save functionality for long forms as a best practice.
</script>

Incorrect Implementation Examples

These examples demonstrate common pitfalls that violate WCAG 2.2.3.

<!-- HTML content... -->

<script>
  // This script automatically logs out the user after 5 minutes of inactivity
  // without warning or an option to extend the session.
  let logoutTimer = setTimeout(() => {
    alert('You have been logged out due to inactivity.');
    window.location.href = '/logout'; // Redirect to logout page
  }, 1000 * 60 * 5); // 5 minutes

  // Reset timer on user activity (but still no warning/extension)
  document.addEventListener('mousemove', () => {
    clearTimeout(logoutTimer);
    logoutTimer = setTimeout(() => {
      alert('You have been logged out due to inactivity.');
      window.location.href = '/logout';
    }, 1000 * 60 * 5);
  });
  // Other event listeners omitted for brevity
</script>

<style>
  .carousel-container {
    overflow: hidden;
    width: 100%;
    height: 300px;
  }
  .carousel-slide {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .carousel-slide.active {
    display: block;
  }
</style>

<div class="carousel-container">
  <div class="carousel-slide active"><img src="slide1.jpg" alt="Slide 1"></div>
  <div class="carousel-slide"><img src="slide2.jpg" alt="Slide 2"></div>
  <div class="carousel-slide"><img src="slide3.jpg" alt="Slide 3"></div>
</div>

<script>
  let currentSlide = 0;
  const slides = document.querySelectorAll('.carousel-slide');
  const totalSlides = slides.length;

  function showSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.remove('active');
      if (i === index) {
        slide.classList.add('active');
      }
    });
  }

  function nextSlide() {
    currentSlide = (currentSlide + 1) % totalSlides;
    showSlide(currentSlide);
  }

  // This carousel auto-advances every 3 seconds without any pause/play or navigation buttons.
  setInterval(nextSlide, 3000); 

  showSlide(currentSlide);
</script>

Best Practices and Common Pitfalls

Best Practices

• Design for Timelessness First: Assume interactions should not have time limits unless there’s an undeniable, essential reason.
• Prioritize User Control: Always give users explicit control over any timing mechanisms. This includes options to pause, stop, extend, or disable.
• Save Progress Automatically: For multi-step processes or lengthy forms, implement auto-save features to prevent data loss, even if a user leaves the page or a timeout occurs.
• Clear and Early Warnings: If a timeout is unavoidable, provide ample warning (visual and programmatic) well in advance of expiration, explaining the consequence and how to extend the time.
• Generous Extension Options: When offering to extend time, provide options that are significantly longer than the default (at least 10 times) and easy to activate.
• Accessibility for Controls: Ensure all time control mechanisms (e.g., pause buttons, extend links) are keyboard-navigable and properly labeled for screen readers.

Common Pitfalls

• Hard-Coded Short Timeouts: Implementing fixed, short timeouts (e.g., 5-minute session expirations) without user intervention.
• Lack of Warning: Sessions expiring abruptly without any prior notification.
• Essential Misinterpretations: Declaring a time limit “essential” when it could easily be removed or managed by the user without undermining the activity’s purpose.
• Auto-Playing Content Without Pauses: Carousels, videos, or audio that start automatically and lack visible, accessible controls to pause or stop.
• Hidden Timers: Timers that run in the background and expire without any visual indication or announcement.
• Inaccessible Controls: Time extension buttons or pause controls that are not keyboard-focusable or are poorly labeled, making them difficult for assistive technology users to find and activate.

By adhering to WCAG 2.2.3 No Timing, you contribute to a more inclusive and user-friendly web, allowing everyone to interact with content confidently and at their preferred pace.