Operable · 2.3 Seizures and Physical Reactions

Animation from Interactions WCAG 2.3.3 · Level AAA

Users must be able to disable motion animation triggered by an interaction, such as scrolling or clicking, unless the animation is essential to the functionality or the information conveyed. Changes in color, opacity or blur alone are not motion animation.

Level
AAA
Since
WCAG 2.1
Principle
Operable
Guideline
2.3 Seizures and Physical Reactions
Try the live demo All criteria Checklist

Live demo

Move the pointer over a moving scene

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Move the pointer over the picture and watch the hills slide. In Passes, tick Reduce motion to stop them; in Fails nothing stops them.

Live example

Passes

Cabins by the lake

Book a quiet cabin in the hills. Prices start at $90 a night.

What happened

    Why it passes

    The hills move with the pointer, but the Reduce motion box stops them, and so does a system setting to reduce motion.

    Why it fails

    The layers slide with every movement of the pointer and there is no way to turn it off, which can bring on dizziness or nausea for people with vestibular disorders.

    Examples

    Code that fails, and the fix

    Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 2 lines

    Fails

    Parallax that ignores reduced motion

    Live preview

    JavaScript
    window.addEventListener("scroll", () => {  const y = window.scrollY;  hills.style.transform = "translateY(" + y * 0.4 + "px)";  clouds.style.transform = "translateY(" + y * 0.2 + "px)";});

    The layers move at different speeds on every scroll. Nothing on the site turns this off, and the system setting to reduce motion is ignored.

    Passes

    Parallax only when motion is welcome

    Live preview

    JavaScript
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");window.addEventListener("scroll", () => {  if (reduceMotion.matches) return;  const y = window.scrollY;  hills.style.transform = "translateY(" + y * 0.4 + "px)";  clouds.style.transform = "translateY(" + y * 0.2 + "px)";});

    People who ask their system to reduce motion get a still page, and everyone else keeps the effect. A setting on the site can offer the same choice.

    02

    Fails

    Cards that spin into view

    Live preview

    CSS
    .offer-card {  opacity: 0;  transform: scale(0.6) rotate(-8deg);  transition: transform 0.8s, opacity 0.8s;}.offer-card.in-view {  opacity: 1;  transform: none;}

    As the user scrolls, each card grows and turns into place. The motion is decoration, and there is no way to switch it off.

    Passes

    Fade instead of motion

    Live preview

    CSS
    @media (prefers-reduced-motion: reduce) {  .offer-card {    transform: none;    transition: opacity 0.3s;  }}

    When reduced motion is requested, the cards only fade in. A change of opacity alone is not motion animation, so this meets the criterion (technique C39).

    Why it matters

    Who it helps

    Motion such as parallax, zooming or sliding transitions can cause dizziness, nausea and headaches for people with vestibular disorders, and it can distract people with attention-related disabilities.

    W3C: Understanding 2.3.3

    • Level AAA

      Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.

    • In WCAG versions

      Added in WCAG 2.1 in June 2018, and kept in 2.2.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      No law on this site requires Level AAA criteria for whole sites.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Scroll, click and hover across the page and note any motion animation they trigger, such as parallax, zoom, slide-in or spinning effects.
    2. Turn on the operating system setting to reduce motion, or use the site's own control, and confirm the non-essential motion stops.

    Common failures

    Where it breaks

    • Parallax scrolling effects ignore the reduced motion setting and the site offers no other way to turn them off.
    • Content flies, zooms or rotates into view on scroll, and the animation cannot be disabled.

    On the Accessibility Checklist

    Related