Web checklist

Checkpoint 2.2b: Pause, stop, hide

For moving, blinking, scrolling, or auto-updating information, all of the following are true:

  1. 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.
  2. 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.

Rationale

The intent of this checkpoint is to avoid distracting users during their interaction with a Web page.

Moving, blinking and scrolling refers to visible content that conveys a sense of motion. Common examples include videos, 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 all these types of content are the same, except that:

Content that moves or updates automatically 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 and have difficulty concentrating on other parts of the Web page. The five-second limit is long enough to get a user's attention, but short enough for a user to wait out the distraction before reading the page.

Required development and unit test techniques


To comply with this checkpoint, you must meet all of the following techniques.

These techniques are defined in WCAG 2.0 Level A Success Criterion 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.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

At this time WAI-ARIA examples are only fully supported in Firefox version 3.6 or later and version JAWS 12 or later. If your product needs to be accessible in Internet Explorer and mobile Safari/VoiceOver, one or more of the required HTML/CSS specific techniques must be implemented, as well as a WAI-ARIA technique. When WAI-ARIA becomes an approved W3C recommendation and Internet Explorer and mobile Safari/VoiceOver fully support it, then WAI-ARIA techniques alone will be sufficient to comply with this checkpoint.

Applications that provide WAI-ARIA must add the following statement to the checkpoint comments column of the Web Accessibility Checklist:

Note: This product uses WAI-ARIA to comply with this checkpoint. WAI-ARIA is supported on Windows using Firefox version 3.6 or later and JAWS version 12 or later, and supported on iOS v5.0 and later using Safari and VoiceOver.

General examples

  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, you must implement at least one of the following examples.

    General example 1

    Enable the user to pause the content and restart it from the point at which it was paused. For example, a Web page that contains a link labeled "How to tie a necktie" that 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.

    General example 2

    Create content that blinks for less than five seconds. For example, an animated image is used to highlight automobiles for sale. Within the list, there is an image of a red tag followed by the phrase "On sale" to indicate items being offered at a reduced price. The image of the red tag blinks when the page is loaded and stops within five seconds.

    General example 3

    Use a technology to include blinking content that can be turned off via the user agent. For example, a Web page contains a blinking banner intended to draw the user's attention. The banner is an animated GIF image that 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.

    General example 4

    Set animated GIF images to stop blinking after N cycles (within five seconds). For example, a Web page contains a simple blinking image. If the image has two frames, a frame rate of .5 seconds, and three repetitions, then the animation has a duration of (2 * 0.5 * 3) seconds or exactly three seconds, and therefore meets the requirement.

    General example 5

    Provide a link, button, or other mechanism that reloads the page without blinking any content. For example, the top of a Web page has blinking text warning users that they should not submit the page without registering first. 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.

    General example 6

    Do not use the blink element, because the blink element causes the text that is inside the element to blink at an undetermined rate. In addition, it continues to blink as long as the page is displayed and cannot be disabled by the user.

    The following code example is a failure of this checkpoint:

    <p>Advertisement <blink>On Sale Now! </blink></p>

    Note: If blinking content is needed on the Web page, you must provide a way for the user to pause, stop or hide it. Refer to checkpoint 2.3a Flashing Content or Below Threshold to find additional accessibility compliance requirements for blinking content.

    For additional information, refer to WCAG 2.0 F47: Failure of Success Criterion 2.2.2 due to using the blink element (link resides outside of ibm.com).

    General example 7

    Do not use the blink value of the text-decoration property, because the blink property causes the text within the elements to blink at an undetermined rate. In addition, it continues to blink as long as the page is displayed and cannot be disabled by the user.

    The following code example is a failure of this checkpoint:

    <p>Advertisement<span style="text-decoration:blink">On Sale Now!!</span></p>

    Note: If blinking content is needed on the Web page, you must provide a way for the user to pause, stop or hide it. Refer to checkpoint 2.3a Flashing Content or Below Threshold to find additional accessibility compliance requirements for blinking content.

    For additional information, refer to WCAG 2.0 F4: Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds (link resides outside of ibm.com).

    Required unit tests for general development technique 1

    Refer to the required unit tests for script development technique 1.


Script examples

  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, you must implement at least one of the following examples.

    Script example 1

    Use a script to scroll content and provide a mechanism to pause it. For example, a news ticker on the ibm.com homepage that automatically updates every 30 seconds with a news article. A script needs to be available that allows users to pause the update or scroll the content.

    For additional information, refer to the WCAG 2.0 examples of using a Web page control that stops moving, blinking, or auto-updating content (link resides outside of ibm.com).

    Script example 2

    Use scripts to control blinking and stop it in five seconds or less. For example, a Web page has blinking text to draw attention to some important information. A script can control the blinking so that it stops within five seconds of loading the page.

    For additional information, please refer to the WCAG 2.0 examples of using scripts to control blinking and stop it in five seconds or less (link resides outside of ibm.com).

    Script example 3

    Until recently, screen readers generally had trouble reading frequently changing dynamic Web content, such as stock ticker quotes or news feeds. As a result, dynamic content was 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 automatically updating, developers must provide a mechanism 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.

    Start stock ticker. Pause ticker. Stock quotes.

    The HTML code to render the ticker is as 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 to stop the flow of quotes. When the checkbox is unchecked, the ticker resumes displaying quotes.

       


       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 and Implementing Live Regions in the WAI-ARIA Best Practices (links reside outside of ibm.com).

    Required unit tests for script development technique 1

    Manually perform the following unit tests.


Recommended development techniques

Although you do not have to implement the recommended techniques in order to comply with this checkpoint, you should review them because they can improve the accessibility and usability of the application.

Refer to WCAG 2.0 Additional Techniques (Advisory) for Success Criterion 2.2.2 (link resides outside of ibm.com) for a list of techniques and examples.


Copyright 2012, 2013  IBM Corporation

Last updated January 1, 2013.

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.