Pausing:
Understanding SC 2.2.2
2.2.2 Pausing: Moving, blinking, scrolling, or auto-updating information on a Web page that lasts for more than three seconds can be paused by the user unless the movement, blinking, scrolling, or auto-updating is part of an activity where the changes are essential. Moving or blinking content that is pure decoration can be stopped or hidden by the user. (Level AA)
Note 1: For requirements related to flickering or flashing content, refer to Guideline 2.3.
Note 2: Since any content that does not meet this Success Criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other Success Criteria or not) must meet this Success Criterion. See Conformance Requirement 5: Non-Interference.
Note 3: Content that is updated from a process, real-time or remote stream 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.
Intent of this Success Criterion
The intent of this Success Criterion is to provide an option to temporarily stop content from advancing or updating at a rate beyond the user's ability to read and/or understand the content as it changes.
"Moving" refers to content in which the visible content conveys a sense of motion. Common examples include motion pictures, synchronized media presentations, animations, real-time games, and scrolling stock tickers.
"Time-based" 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.
Editorial Note: Success Criterion 2.2.2 and 2.2.3 were combined, the original intent for 2.2.2 is pasted below for reference.
The intent of this Success Criterion is to avoid distracting users during their interaction with a Web page. Certain groups, particularly those with attention deficit disorders, find blinking content distracting, making it difficult for them to concentrate on other parts of the Web page. Three seconds was chosen because it is long enough to get a user's attention, but not so long that a user cannot wait it out if necessary in order to use the page and the blinking blocks their ability to focus on the page.
Note: In some cases, what we refer to as “blinking" and what we refer to as “flashing" may overlap slightly. We are using different terms for the two because one causes a distraction problem which you can allow for a short time as long as it stops (or can be stopped) whereas the other is a seizure trigger and cannot be allowed or it will cause a seizure. The seizure would occur faster than most users could turn it off. “Blink" therefore refers to slow repeating changes that would distract. Flash refers to changes that could cause a seizure if they were bright enough or persisted long enough. Blinking usually doesn't occur at speeds of 3 per second (or more), so blink and flash do not usually overlap. However, blinking can occur faster than 3 per second so there could be an overlap. See 2.3 for more information on flash.
Specific Benefits of Success Criterion 2.2.2:
People with reading disabilities, cognitive limitations, and learning disabilities who may need more time to read or comprehend information can have additional time to read the information by pausing the content.
In circumstances where a sign-language interpreter may be relating audio content to a user who is deaf, control over time limits is also important.
Providing content that stops blinking after three seconds or providing a mechanism for users to stop blinking content allows people with certain disabilities to interact with the Web page.
One use of content that blinks is to draw the visitor's attention to that content. Although this is an effective technique for all users with vision, it can be a problem for some users if it persists. For certain groups, including people with low literacy, reading and intellectual disabilities, and people with attention deficit disorders, content that blinks may make it difficult or even impossible to interact with the rest of the Web page.
Examples of Success Criterion 2.2.2
An essential animation can be paused without effecting the activity
A Web site helps users understand 'how things work' through animations that demonstrate processes. Animations have "pause" and "restart" buttons.
A stock ticker.
A stock ticker has "pause" and "restart" buttons. Pausing the ticker causes it to pause on the currently displayed stock. Restarting causes the ticker to resume from the stopped point but with a notice that the display is delayed. Since the intent of the stock ticker is usually to provide realtime information, there might also be a button that would advance the ticker to the most recently traded stock.
A game is designed so that users take turns rather than competing in real-time
One party can pause the game without invalidating the competitive aspect of it.
Example 1: A Web advertisement blinks to get viewers attention but stops after 3 seconds
Example 2: A form blinks an arrow near the submit button if a user finishes filling out the form but does not activate the submit button. The blinking stops after 3 seconds.
Example 3: An animation runs in the upper portion of the page but has a "freeze animation" button near the bottom of the animation.
Related Resources
Resources are for information purposes only, no endorsement implied.
(none currently documented)
Techniques and Failures for Success Criterion 2.2.2 - Pausing
Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. The techniques listed only satisfy the Success Criterion if all of the WCAG 2.0 conformance requirements have been met.
Editorial Note: Success Criterion 2.2.2 and 2.2.3 were combined, but the updated understanding document is still in progress. Original techniques pasted below for reference.
Sufficient Techniques
G4: Allowing the content to be paused and restarted from where it was stopped
Using script to scroll content, and providing a mechanism to pause it (future link)
Allowing purely decorative content to be stopped (future link)
Using a technology to include blinking content that can be turned off via the user agent (future link)
Using a control in the Web page that stops blinking content (future link) using one of the following techniques:
Setting animated gif images to stop blinking after n cycles (within 3 seconds) (future link)
Providing a link, button, or other mechanism that reloads the page without the blinking content (future link)
SCR22: Using scripts to control blinking and stop it in three seconds or less (Scripting)
Additional Techniques (Advisory) for 2.2.2
Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.
Providing a mechanism to stop all content that blinks within a Web page (future link)
Providing the user with a means to stop moving content even if it stops automatically within 3 seconds (future link)
Failures for SC 2.2.2
The following are common mistakes that are considered failures of Success Criterion 2.2.2 by the WCAG Working Group.
Key Terms
- activity where moving, blinking, scrolling, or auto-updating is essential
activity where moving, blinking, scrolling, or auto-updating is central to the design of the activity and removal would fundamentally change the functionality of the content
- blink
switch back and forth between two visual states in a way that is meant to draw attention
Note: See also flash (It is possible for something to be large enough and blink brightly enough at the right frequency to be also classified as a flash).
- paused
stopped by user request and not resumed until requested by user
- Web page
a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent
Note 1: Although any "other resources" would be rendered together with the primary resource, they would not necessarily be rendered simultaneously with each other.
Note 2: For the purposes of conformance with these guidelines, a resource must be "non-embedded" within the scope of conformance to be considered a Web page.
Example 1: A Web resource including all embedded images and media.
Example 2: A Web mail program built using Asynchronous JavaScript and XML (AJAX). The program lives entirely at http://example.com/mail, but includes an inbox, a contacts area and a calendar. Links or buttons are provided that cause the inbox, contacts, or calendar to display, but do not change the URL of the page as a whole.
Example 3: A customizable portal site, where users can choose content to display from a set of different content modules.
Example 4: When you enter "http://shopping.example.com/" in your browser, you enter a movie-like interactive shopping environment where you visually move about a store dragging products off of the shelves around you and into a visual shopping cart in front of you. Clicking on a product causes it to be demonstrated with a specification sheet floating alongside.