WCAG 2.2 Demo Suite

2.3.3 Level AAA Guideline 2.3 Seizures and Physical Reactions Added in WCAG 2.1 Partly detectable automatically

Animation from Interactions

Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or information.

Who this affects

Users with vestibular disorders, for whom parallax scrolling, zoom transitions, and sliding page changes cause dizziness, nausea, and migraine.

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.3.3

Open the failing example in a new tab

fail.html — the problem

<h1>Spring festival</h1>

<!-- FAILURE 1: a large hero that scales and rotates on hover.
     FAILURE 2: panels that slide and scale on hover.
     FAILURE 3: smooth scrolling on every in-page jump, which sends the whole
     viewport sliding hundreds of pixels.

     Who this affects: people with vestibular disorders. Large movement in the
     peripheral field creates a mismatch between what the eyes report and what
     the inner ear reports, and the result is dizziness, nausea and migraine
     that can last for hours. It is a physical response, not a preference. -->
<div class="hero">Three days of events</div>

<p><a href="#end">Jump to the programme</a></p>

<div class="panel"><h2>Friday</h2><p>Opening night readings.</p></div>
<div class="panel"><h2>Saturday</h2><p>Workshops and signings.</p></div>

<div class="spacer"></div>
<h2 id="end">Programme</h2>
<p>The full programme.</p>

Meets 2.3.3

Open the passing example in a new tab

pass.html — the fix

<h1>Spring festival</h1>

<div class="hero">Three days of events</div>

<p><a href="#end">Jump to the programme</a></p>

<div class="panel"><h2>Friday</h2><p>Opening night readings.</p></div>
<div class="panel"><h2>Saturday</h2><p>Workshops and signings.</p></div>

<div class="spacer"></div>
<h2 id="end">Programme</h2>
<p>The full programme.</p>

<!-- Where to find the setting, so you can actually test this:
       macOS    System Settings > Accessibility > Display > Reduce motion
       Windows  Settings > Accessibility > Visual effects > Animation effects
       iOS      Settings > Accessibility > Motion > Reduce Motion
       Android  Settings > Accessibility > Remove animations
       Firefox  about:config > ui.prefersReducedMotion = 1

     What counts as motion animation for 2.3.3: parallax scrolling, large
     scaling and rotation, elements flying in, page transitions that slide the
     whole viewport, and smooth scrolling over long distances.

     What does not: a fade, a colour change, or a small movement that does not
     imply motion through space. Fades are the safe substitute.

     The exception is narrow - animation ESSENTIAL to the functionality, such
     as a progress indicator or an animation that is itself the content. -->

How to test it

Set the operating system to reduce motion and confirm the site honours prefers-reduced-motion by removing or replacing large movement, not merely shortening it.

  • Automated

    The presence of a prefers-reduced-motion media query can be detected in CSS; whether it covers every animation cannot.

    No axe rule maps to this criterion. It has to be checked by a person.

  • 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