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 (1) starts automatically, (2) lasts more than five seconds, and (3) 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.
- Auto-updating: For any auto-updating information that (1) starts automatically, (2) lasts more than five seconds, and (3) 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.
On this page:
Rationale
The intent of this checkpoint is to avoid distracting users during their interaction with a Web page.
"Moving, blinking and scrolling" 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. "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 requirements for moving, blinking and scrolling content and for auto-updating content are the same except that:
- authors have the option of providing the user with a means to control the frequency of updates when content is auto-updating and
- there is no three second exception for auto-updating since it makes little sense to auto-update for just three seconds and then stop
Content that moves or auto-updates can be a barrier to anyone who has trouble reading stationary text quickly as well as anyone who has trouble tracking moving objects. It can also cause problems for screen readers.
Moving content can also be a severe distraction for some people. 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. Five seconds was chosen because it is long enough to get a user's attention, but not so long that a user cannot wait out the distraction if necessary to use the page.
Required development techniques
Compliance with this checkpoint requires all of the following techniques be met.
These techniques are defined in the WCAG 2.0 Level A Success Criterion for Guideline 2.2.2 (link resides outside of ibm.com).
1. Pause, stop, hide information: Provide a mechanism that will pause, stop, restart, and hide content that is moving, blinking, scrolling or auto-updating information.
Examples for General developers
1. Pause, stop, hide information: Provide a mechanism that will pause, stop, restart, and hide content that is moving, blinking, scrolling or auto-updating information.
To comply with this technique, all of the following examples must be implemented.
Example 1
Allow the content to be paused and restarted from where it was paused. An example is a Web page that contains a link labeled "How to tie a necktie" which links to a Flash animation. Text immediately preceding the link informs the user that pressing the spacebar will pause the animation and restart it again.
Example 2
Create content that blinks for less than 5 seconds. An animated image is used to highlight automobiles for sale. Within the list, an image of a red tag followed by the phrase "On sale" is used to indicate items being offered at a reduced price. The image of the red tag blinks on loading of the page and stops within five seconds.
Example 3
Use a technology to include blinking content that can be turned off via the user agent. A page contains a blinking banner intended to draw the user's attention to it. The banner is an animated gif image which repeats indefinitely. The user presses the "escape" key, which causes the user agent to stop the animation of all animated gif images on the page.
Example 4
Set animated gif images to stop blinking after n cycles (within 5 seconds). An example is a simple blinking image. If the image has 2 frames, a frame rate of .5 seconds, and 3 repetitions, then the animation has a duration of (2 * 0.5 * 3) seconds, or exactly 3 seconds, and therefore meets the requirement.
Example 5
Provide a link, button, or other mechanism that reloads the page without blinking any content. A Web page has blinking text at the top warning users that they should not submit the page without first registering. A link at the very top of the page reloads the page with the blinking text replaced with text that is styled to be highly visible but does not blink.
Examples for Script developers
1. Pause, stop, hide information: Provide a mechanism that will pause, stop, restart, and hide content that is moving, blinking, scrolling or auto-updating information.
To comply with this technique, all of the following examples must be implemented.
Example 6
Use script to scroll content, and provide a mechanism to pause it. An example would be a news ticker on the ibm.com homepage that automatically updates every 30 seconds with a news article. A script needs to be available to pause the update or scroll the content.
For a detailed example of how this can be done, please refer to the WCAG 2.0 examples for Using a script to scroll content, and providing a mechanism to pause it (link resides outside of ibm.com).
Example 7
Use scripts to control blinking and stop it in five seconds or less. An example would be a web page that used blinking text to draw attention to some important information. A script would be used to control the blinking so that it stopped within five seconds of loading the page.
For a detailed example of how this can be done, please refer to the WCAG 2.0 examples for Using scripts to control blinking and stop it in five seconds or less (link resides outside of ibm.com).
Example 8
Note that WAI-ARIA examples are not supported by all browsers. If your product needs to be accessible in multiple browsers one or more of the required HTML/CSS specific techniques must be implemented as well as a WAI-ARIA technique.
Until recently, screen readers generally had trouble reading frequently changing dynamic Web content such as stock ticker quotes or news feeds. Therefore, dynamic content was sometimes completely inaccessible to screen reader users.
With the advent of WAI-ARIA live regions, Web application developers can easily make dynamic content accessible to screen reader users. However, when live region information is auto-updating, a mechanism must be provided to stop and restart the flow of information so as not to overwhelm a screen reader user. For example, the following stock ticker widget provides a "pause ticker" checkbox to pause the flow of stock quotes displayed by the ticker.
The HTML to render the ticker follows. The aria-live attribute on the fieldset element enables a screen reader to announce quotes as they appear in the ticker.
<input type="button" id="startQuotes" name="startQuotes" value="Start stock ticker"
onclick="showQuotes();">
<input type="checkbox" id="tickerOff" name="tickerOff"
onclick="toggleTicker(this)">
<label for="startQuotes">Pause ticker</label>
<fieldset id="quote" aria-live="polite"><legend>Stock Quotes</legend></fieldset>
The showQuote() function starts the flow of quotes into the ticker box. When the "pause ticker" checkbox is checked, toggleTicker() is called which stops the flow of quotes. When the checkbox is unchecked, the ticker resumes displaying quotes.
<script type="text/javascript">
var t;
function showQuote(){
if (document.getElementById('tickerOff').checked ==
false) {
var quotes = new Array("IBM 97.75", "GLW 7.87", "C
8.75", "WB 5.98", "SUN 3.65", "RIG 72.25");
var quoteStr =
document.createTextNode(quotes[Math.floor(Math.random() * 6)]);
var msgContainer = document.createElement('div');
msgContainer.appendChild(quoteStr);
document.getElementById('quote').appendChild(msgContainer);
t = setTimeout("showQuote()", 1000);
}
}
function toggleTicker(ele){
if (ele.checked == true) {
clearTimeout(t);
}
else {
showQuote();
}
}
</script>
For more information on WAI-ARIA live regions see the Live Regions section of the WAI-ARIA specification (link resides outside of ibm.com) and Implementing Live Regions in the WAI-ARIA Best Practices (link resides outside of ibm.com).
Recommended development techniques
The techniques above are required; the following techniques are recommended to enhance accessibility:
1. See WCAG 2.0 Additional Techniques (Advisory) for 2.2.2 (link resides outside of ibm.com) for a list of techniques and examples.
Required test techniques
The following test tools and techniques are required to test this checkpoint.
Test tools:
Install the following tools to test this checkpoint:
Required accessibility verification test techniques:
Use the following accessibility verification test (AVT) techniques to validate the Web content. It is recommended that these tests be performed in order.
| Action | Result | |
|---|---|---|
|
Test the Web site with a Web syntax analyzer to verify the compliance criteria as follows.
|
Pass:
|
| Action | Result | |
|---|---|---|
|
Verify the compliance criteria for this technique as follows.
|
Pass:
|
®2009 IBM Corporation
Last updated September 01, 2009.
W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.