WCAG 2.2 Demo Suite

2.2.2 Level A Guideline 2.2 Enough Time Added in WCAG 2.0 Partly detectable automatically

Pause, Stop, Hide

Moving, blinking, or scrolling content that starts automatically, lasts more than five seconds, and runs alongside other content can be paused, stopped, or hidden. The same applies to auto-updating content.

Who this affects

Users with attention-related disabilities cannot focus beside constant motion. Screen reader users lose their place when content updates beneath them. Users with vestibular disorders can be made physically ill.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 2.2.2

Open the failing example in a new tab

fail.html — the problem

<h1>Riverline Books</h1>

<!-- FAILURE 1: a scrolling ticker that runs forever with no pause control. -->
<div class="ticker"><span>Spring festival tickets on sale now — members save 20% — free delivery over £25 —</span></div>

<!-- FAILURE 2: blinking text. Impossible to ignore, impossible to stop. -->
<p><span class="blinker">Offer ends soon!</span></p>

<!-- FAILURE 3: an auto-advancing carousel with no pause, stop or hide control.
     It also moves while the user is trying to read the text beside it, and a
     screen reader user loses their place each time the content swaps. -->
<div class="carousel">
  <h2>Staff picks</h2>
  <p id="slide">Tidal Flats, by A. Marsh</p>
</div>

<!-- FAILURE 4: an auto-updating region with no way to freeze it. -->
<p>Baskets checked out in the last hour: <span id="count" role="status">14</span></p>

Meets 2.2.2

Open the passing example in a new tab

pass.html — the fix

<h1>Riverline Books</h1>

<!-- FIX 1: a real pause control, reachable by keyboard, placed before the
     moving content so it is found before the motion becomes a problem.
     aria-pressed exposes the state. -->
<p>
  <button type="button" class="button button--secondary" id="ticker-toggle"
          aria-pressed="false" onclick="toggleTicker(this)">Pause the news ticker</button>
</p>
<div class="ticker" id="ticker">
  <span>Spring festival tickets on sale now — members save 20% — free delivery over £25 —</span>
</div>

<!-- FIX 2: no blinking at all. Emphasis is carried by text and weight, which
     nobody has to switch off. -->
<p><strong>Offer ends 30 September.</strong></p>

<!-- FIX 3: the carousel starts paused and the user starts it, which is the
     safest default. If it must auto-play, the pause control has to be
     available before it starts moving. -->
<p>
  <button type="button" class="button button--secondary" id="carousel-toggle"
          aria-pressed="false" onclick="toggleCarousel(this)">Play staff picks slideshow</button>
</p>
<div class="carousel">
  <h2>Staff picks</h2>
  <p id="slide">Tidal Flats, by A. Marsh</p>
</div>

<!-- FIX 4: the auto-updating figure can be frozen. Note the exception 2.2.2
     allows: content that is part of an activity where the movement is
     essential - a progress bar, a live sports score the user asked for - is
     exempt. Decoration never is. -->
<p>
  Baskets checked out in the last hour: <span id="count" role="status">14</span>
  <button type="button" class="button button--secondary" id="count-toggle"
          aria-pressed="false" onclick="toggleCount(this)">Stop updating this figure</button>
</p>

How to test it

Look for carousels, animated banners, marquees, auto-refreshing feeds, and background video. Each needs a visible, keyboard-reachable pause control. Also verify prefers-reduced-motion is honoured.

  • Automated

    Some marquee and blink usage is detectable; CSS and script-driven animation and the presence of a working pause control are not.

    This demo's failure is not machine-detectable. axe's blink and marquee rules only match the obsolete <blink> and <marquee> ELEMENTS. Motion produced with CSS animations, or by JavaScript swapping content on a timer - which is how every carousel and ticker on the modern web is built - is completely invisible to a scanner. Nor can a scanner tell whether a pause control exists and works.

    Relevant axe rules:

    • blink
    • marquee

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification