Skip to content

Accessibility

How to support prefers-reduced-motion

For people with vestibular disorders, parallax and large motion cause genuine nausea and dizziness — which is why every major OS has a system-level setting. The setting is already switched on for these visitors; the site just has to read it. One media query covers the whole stylesheet, and it is WCAG 2.3.3.

What 13x checks

This is rule accessibility.reduced-motion in the public registry: Motion respects prefers-reduced-motion. It runs on every audit, against the pages we actually fetched, and its result is derived from the response rather than estimated.

Surface
Accessibility
Score weight
4 of the readiness score
Scope
Runs on every audited page
Applies
Only where the market or the page shape makes it relevant

Registry version 2026-07-30. Every rule is published, and the audit is deterministic — the same page produces the same finding every time.

The fix

The same text the audit hands you when this check fails on your own site.

Honour the operating-system setting that says "reduce motion". It is already switched on for the people who need it — the site only has to read it.

The blanket version, which is a reasonable default for a whole site:

css code
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Near-zero rather than none on purpose: a duration of 0s prevents animationend from firing, and any JavaScript waiting on that event never continues.

Where motion carries meaning, replace it rather than removing it — a fade instead of a slide keeps the state change legible without the movement:

css code
.panel {
  transition: transform 300ms;
}

@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: opacity 150ms;
    transform: none;
  }
}

The setting exists because parallax and large motion cause real nausea and dizziness for people with vestibular disorders. Do not gate it behind an in-app toggle nobody finds — read the system preference.

If you animate in JavaScript, check the same signal:

js code
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!reduce) startAnimation();

Framework-specific versions

Where the change differs enough to be worth writing out separately.

Does your site have this problem?

13x checks this and 112 others against your live URL in about 30 seconds. No account, and every finding comes with the fix for your framework.

No signup. Results in 30 seconds.

More accessibility checks