WCAG Principle: Operable
Guideline 2.2: Time Enough (Provide users enough time to read and use content))
Conformance Level: A (Minimal Requirement)
What is Success Criterion 2.2.2?
For moving, blinking, scrolling, or auto-updating information, all of the following are true:
- Moving, blinking, scrolling
For any moving, blinking, or scrolling information that starts automatically, lasts more than five seconds, and 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; and
- Auto-updating
For any auto-updating information that starts automatically and is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
The goal of this criterion is to give users control over content that moves, blinks, scrolls, or auto-updates on a web page. This helps users, particularly those with cognitive disabilities, to interact with web content at their own pace and convenience. Examples of such content are:
- Moving banners or advertisements.
- Auto-playing videos.
- Scrolling news tickers.
- Auto-refreshing content like weather updates or stock prices.
How does it make your website accessible?
Meeting success criterion 2.2.2 ensures website accessibility by giving users control over dynamic content. This, in turn, creates a more user-friendly and inclusive web experience for them.
Who benefits?
- Users with cognitive disabilities for whom controlling these distractions improves comprehension and focus.
- People with attention-related challenges such as those with attention deficit disorders.
- Users who prefer a more static web experience.
- Users with visual impairments who use screen readers.
How to Meet Success Criterion 2.2.2
Common mistakes on websites:
- Auto-playing videos without user consent.
- Lack of controls to pause or stop moving content.
- Content that moves or updates too quickly without user control options.
How to fix these mistakes:
- Implement clear and accessible buttons or controls that allow users to pause, stop, or hide dynamic content. These controls should be easy to find and use.
- Ensure that dynamic content remains static by default and only becomes dynamic when users choose to interact with it. This limits unexpected distractions.
- Limit the duration of auto-updating or moving content to five seconds or less.
- For auto-updating content, provide users with options to control the frequency of updates to give them more flexibility.
Helpful tips for developers:
- Provide users a way to pause moving or scrolling content to reduce distraction or read it, and restart the content movement as needed.
- Ensure that control buttons have descriptive labels, such as “Pause Animation” to make their purpose clear to all users.
- Use script to scroll content, and provide a mechanism to pause it.
- Use technologies to include blinking content that can be turned off via user agent features. These include Graphics Interchange Format (GIF) and Animated Portable Network Graphics (APNG).
How to test if your website meets the criterion:
On a page with moving or scrolling content,
- Check that the web page or user agent includes a mechanism to pause the moving or scrolling content.
- Use the mechanism to stop the moving or scrolling content.
- Ensure that the movement or scrolling comes to a complete halt and does not restart automatically.
- Check if there is a mechanism within the web page or user agent to restart the paused content.
- Use the provided restart mechanism to resume the moving content from where it was previously stopped.
If steps 1, 3, step 4, or 5 are true, then the content meets this success criterion.
Bad and Good Examples (Code snippet)
bad Code Snippet
<!DOCTYPE html>
<html>
<head>
<title>News Ticker Example</title>
<style>
.marquee {
width: 100%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
</style>
</head>
<body>
<div class="marquee">
<p>Latest news: New technology breakthroughs!</p>
</div>
</body>
</html>
In the code example above, the marquee (scrolling text) starts automatically and displays along with other content on the webpage. However, there is no control mechanism provided for users to pause, stop, or hide the scrolling text. This can be a significant barrier for users with cognitive disabilities, attention disorders, or visual impairments who use screen readers. Also, the marquee is set to move continuously (for more than five seconds), which can be distracting for some users.
Good Code Snippet
<!DOCTYPE html>
<html>
<head>
<title>Accessible News Ticker</title>
<style>
.marquee {
width: 100%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
</style>
<script>
function toggleMarquee() {
var marquee = document.querySelector('.marquee p');
if (marquee.style.animationPlayState === 'running') {
marquee.style.animationPlayState = 'paused';
} else {
marquee.style.animationPlayState = 'running';
}
}
</script>
</head>
<body>
<div class="marquee">
<p>Latest news: New technology breakthroughs!</p>
</div>
<button onclick="toggleMarquee()">Pause/Resume News Ticker</button>
</body>
</html>
In this optimized example, the added button (<button onclick="toggleMarquee()">Pause/Resume News Ticker</button>) allows users to pause and resume the scrolling news ticker. This gives users control over the moving content, which is crucial for accessibility.
Also, the toggleMarquee Javascript function in the <script> tag toggles the animation play state between ‘paused’ and ‘running’. This means that when the user clicks the button, it will either pause the scrolling if it is currently moving or resume it if it is paused. In all, the initial behavior of the marquee remains the same, ensuring the design’s integrity while adding an essential feature for accessibility.
Frequently Asked Questions
Does this criterion affect how animations are used in web design?
Yes. Web designs with animations should include mechanisms for users to pause or stop them, especially if they are non-essential.
Can automated carousels be compliant with success criterion 2.2.2?
Yes, but they must include clear controls to pause and navigate the carousel content at the user’s own pace.
Are there specific guidelines for implementing pause/stop controls visually?
Yes, there are. As a rule of thumb, pause/stop controls should be clearly visible, labeled, and accessible. This ensures that users can easily identify and use them, regardless of their abilities.
Are there tools available to help ensure compliance with this criterion?
Yes, there are various accessibility testing tools and browser extensions that can help identify issues related to this criterion. However, manual testing and user feedback are also important for comprehensive compliance.
