Guideline 2.2 - Enough Time

Provide users enough time to read and use the content.

Success Criterion 2.2.1 - Timing Adjustable

If you're setting time limits on certain actions, you need to ensure that the time limits give adequate time for users with disabilities to interact with the content whenever possible.

A time limit is any process that happens without user initiation after a set time or periodically.

This includes, but isn't limited to:

• content updates (for example, AJAX feeds and page reloads)
• changes to content
• the expiration of a window of opportunity for a user to react to a request for input
• content advancing or updating at a rate beyond the user's ability to read and/or understand it (for example, animated/moving content)

Therefore, this success criterion requires that for each time limit, that is set by the content, at least one of the following is true:

• the user is allowed to turn off the time limit before encountering it, and/or
• the user is allowed to adjust a time limit before encountering it over a wide range that is at least 10x the length of the default setting, and/or
• the user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (such as pressing the space bar), and the user is allowed to extend the time limit at least ten times, and/or
• an exception applies

There are three exceptions to this Success Criterion:

• real-time exceptions: the time limit is a required part of a real-time event, and no alternative to the time limit is possible
• essential exception: the time limit is essential, and extending it would invalidate the activity
• 20-hour exception: the time limit is longer than 20 hours

Essential time limits are defined as follows:

If removed, it would fundamentally change the information or functionality of the content, and they cannot be achieved in another way that would conform.

Examples

• Webshops commonly reserve stock once a product has been added to a cart to make sure a product's stock isn't sold while a user holds it in their cart. This is especially true for ticket sales and other quickly-sold products.
  • In these cases, holding a product in a cart longer can invalidate the nature of the site, so this is a case where the timing is essential and cannot be extended without invalidating the activity.
  • However, sites should move as much of the process out of the time-critical period as possible, for instance, by allowing users to enter their payment info outside of the time-critical flow.
  • ASOS does a great job of this. When you add an item to your cart, you get the message about the time limit: "It's in your bag. We'll hold it for an hour". If you start checkout within an hour, the time limit no longer applies, and you can check out with ample time. If you don't start checkout within an hour, the items you've added to your cart are added back to the inventory pool and saved to your Saved Items so you can easily re-add the item to your cart once you get back to it.
• Banking apps usually have a session timeout for security reasons.
  • The George web banking app by Erste Bank does a good job of this. You're presented with a 5-minute timer near the logout button. Hovering over the button shows a message: "In case you're inactive, we'll log you out in xx:yy minutes". If the timer gets close to ending, the logout button turns into a red button showing the remaining time. Any activity on the page, such as moving the cursor, resets the timer to 5 minutes.
• Auction sites would be unfair if timers were extendable on the user level. They fall under the exceptions to this success criterion.
• News sites often have a feed providing live coverage for breaking news or important developing events.
  • They may provide an option to pause updates, giving the user enough time to go through the current content.
  • They might not auto-refresh but instead provide a button to show new updates, as most social media apps do.
  • They might add new content dynamically but keep the currently visible content in the viewport and indicate that new content has been loaded.

Techniques

Follow these techniques to comply with the success criterion:

If there are session time limits, you can:

• provide a checkbox on the first page of a multipart form that allows users to ask for a longer session time limit or no session time limit

The checkbox can allow the user to request a specific amount of additional time (for example, 15 minutes) or an indefinite extension.

• provide a way for the user to turn the time limit off

An example of using this technique would be news sites providing a pause option for auto-updating live feeds or a "Remember me" checkbox on login pages.

If a time limit is controlled by a script on the page, you can:

• provide a way for the user to turn the time limit off
• provide the user with the means to set the time limit to 10 times the default
• provide a warning when the time limit is about to expire and allow the user to extend the default time limit

An example of the last technique is the banking app we've covered in previous examples.

If there are time limits on reading, you can:

• allow content to be paused and restarted from where it was paused
• provide a way for the user to turn the time limit off
• for auto-scrolling content, using a script to scroll and providing a mechanism to pause
• provide a mechanism allowing users to display moving, scrolling, or auto-updating text in a static window or area

Failures

Common mistakes that are considered[h][i] failures by WCAG include:

• using a meta redirect with a time limit or a meta refresh

<!-- meta redirect: a bad idea to use this at all! -->
<meta http-equiv="refresh" content="5; url=https://example.com/redirected" />
<!-- meta refresh -->
<meta http-equiv="refresh" content="60" />

• using server-side techniques to automatically redirect pages after a time-out

This often relies upon setting the non-standard HTTP header Refresh using server-side languages. As setting non-standard HTTP headers is problematic at best, we strongly suggest against this.

<?php
header('Refresh: 60; url=https://google.com');
?>

Tips and notes

A lot of the auto-scrolling functionality referred to here is similar in behavior to the marquee element, which we advise against using in most cases. There are exceptions to this, of course - it would make sense for a stock ticker component to auto-scroll. Follow good judgment when deciding on auto-scrolling content, and follow the techniques mentioned to ensure auto-scrolling content is accessible to users with disabilities.

Note:

This success criterion helps ensure that users can complete tasks without unexpected changes in content or context resulting from a time limit. This success criterion should be considered in conjunction with success criterion 3.2.1, which limits changes in content or context due to user action.

Find out techniques and failures for this success criterion

Success criterion 2.2.2 - Pause, Stop, Hide

For any moving, blinking, or scrolling information that:

• starts automatically
• lasts more than 5 seconds
• is presented in parallel with other content

there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential.

For any auto-updating information that:

• starts automatically
• is presented in parallel with other content

there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential.

"Moving, blinking, and scrolling" refers to content in which the visible content conveys a sense of motion. Examples include motion pictures, synchronized media presentations, animations, real-time games, and scrolling stock tickers. "Auto-updating" refers to content that updates or disappears based on a preset time interval. Common time-based content includes audio, automatically updated weather information, news, stock price updates, and auto-advancing presentations and messages.

The same definition of "essential" as in the previous success criterion applies here. Note that while there may be an overlap between these terms, there is an important difference between blinking, which refers to content that causes a distraction problem and can be allowed for a short time as long as it stops or can be stopped; and flashing, which refers to content that can trigger a seizure (occurring more than three times per second and large or bright enough), where no exceptions apply.

Techniques and examples

WCAG recommends the following techniques:

• allow content to be paused and restarted from where it was paused
• using a control in the Web page that stops moving, blinking, or auto-updating content
• creating content that blinks for less than 5 seconds

In general, we recommend using good taste in animations to prevent distractions. We also recommend supporting prefers-reduced-motion, which we'll discuss in later success criteria.

Examples of this success criterion in practice include:

• An auto-scrolling stock ticker may have a pause mechanism. On restarting, it resumes from the stopped point with a note that the display is delayed. Ideally, it also provides a mechanism to advance to the most recently traded stock.
• A real-time game (for instance, a multiplayer FPS) has unpausable movement considered essential functionality.
• A loading animation on a splash screen can run more than 5 seconds on slow connections, but as it is the only content on the page, it doesn't need to provide a pause/stop/hide mechanism.

Failures and notes

Avoid some common failures:

• including scrolling content where movement is not essential without including a pause/stop/hide mechanism
  • An example of this would be a news site "breaking news" ticker or almost any use of the marquee element
• using the blink element
• using text-decoration: blink or a script causing blinking without a mechanism to stop it in less than 5 seconds

Notes:

Content that is updated periodically by software or streamed to the user agent is not required to preserve or present information that is generated or received between the initiation of the pause and resuming presentation, as this may not be technically possible, and in many situations could be misleading to do so.

An animation that occurs as part of a preload phase or similar situation can be considered essential if interaction cannot occur during that phase for all users and, if not indicating progress, could confuse users or cause them to think that content was frozen or broken.

Find out more techniques and failures for this success criterion