Animations without prefers-reduced-motion

motion/reduced-motion-ignored

WCAG success criterion: 2.3.3 (level AAA)
Outcome class: Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
Area: Accessibility, Visual Presentation
Default severity: low
axe-core rule: prefers-reduced-motion

Why we flag this

Users with vestibular disorders or photosensitivity cannot disable motion.

No @media (prefers-reduced-motion) in the stylesheets.

What the rule checks

Scope. Style rules outside a prefers-reduced-motion: reduce block that animate or transition a motion property (transform, translate, rotate, scale, position offsets, ...) on a selector matching an element of the page.

Expectation. One page-level review when at least one such rule is not switched off under @media (prefers-reduced-motion: reduce). Switched off means animation: none, a duration of at most about 50 ms (the usual 0.01ms reset), paused, or transition: none / transition-property: none, set for the same selector or by a universal reset. A reduce block that only shortens the movement (0.2s) does not switch it off. Colour and opacity fades are not motion. Rules whose selector matches nothing on the page are not evidence. Review, not a violation: whether the motion is triggered by interaction and is essential is a human decision.

Source. WCAG 2.2 SC 2.3.3 Animation from Interactions (Level AAA); Media Queries 5 'prefers-reduced-motion'

Detection: shared; needs dom, stylesheets.

Failing example

The check flags this for review. Corpus case reduced_motion_transform. The page may contain further findings for other rules.

reduced_motion_transform.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Reduced motion: transform animation without override</title>
    <style>
        /* #712: motion (transform) that prefers-reduced-motion does not reduce */
        .card { transition: transform 0.3s ease; }
        .card:hover { transform: translateY(-4px); }
        .slide-in { animation: slide-in 1s ease-out; }
        @keyframes slide-in { from { transform: translateX(-100%); } to { transform: none; } }
    </style>
</head>
<body>
    <main>
        <h1>Transform animation</h1>
        <div class="card">Card that lifts on hover</div>
        <div class="slide-in">Panel sliding in</div>
    </main>
</body>
</html>

Passing example

The check passes here and reports nothing. Corpus case reduced_motion_override. The page may contain further findings for other rules.

reduced_motion_override.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Reduced motion: transform animation with override</title>
    <style>
        /* #712: same motion, neutralised under prefers-reduced-motion: reduce */
        .card { transition: transform 0.3s ease; }
        .card:hover { transform: translateY(-4px); }
        .slide-in { animation: slide-in 1s ease-out; }
        @keyframes slide-in { from { transform: translateX(-100%); } to { transform: none; } }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { transition-duration: 0.01ms !important; }
            .slide-in { animation: none; }
        }
    </style>
</head>
<body>
    <main>
        <h1>Transform animation with reduced-motion override</h1>
        <div class="card">Card that lifts on hover</div>
        <div class="slide-in">Panel sliding in</div>
    </main>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.