Respect reduced motion (Web HIG tip #9)
A slide-in panel looks smooth to most people. For someone with a vestibular disorder, it can bring on dizziness or nausea. Their OS already has a "Reduce motion" setting. Your CSS should listen to it.
Web HIG tip #9 (Quick #76 / HIG-A11Y-001): Respect prefers-reduced-motion — replace motion with instant state changes or minimal opacity fade.
Why it matters
Motion that's fine for one person can make another feel sick:
People with vestibular disorders, migraines, or motion sensitivity turn on "Reduce motion" so large on-screen movement stops making them unwell
Parallax, big slide-ins, zooming page transitions, and auto-playing carousels cause the most trouble
If the page ignores the setting, people have no way to stop it, so they leave
The fix is small: the browser already exposes the setting as a media query
The full HIG (§1.3, Reduced Motion & Animation Safety) makes this a mandatory HIG requirement, even though the matching WCAG criterion (2.3.3 Animation from Interactions) is Level AAA. Auto-playing carousels and looping motion also need a pause control under WCAG 2.2.2 Pause, Stop, Hide (Level A).
The rule of thumb
Ask: with "Reduce motion" turned on, does anything still slide, zoom, spin, or scroll by itself?
If yes, swap that motion for an instant change or a short fade.
/* Don't: the panel always slides in, whatever the user's setting */
.panel {
transform: translateX(100%);
transition: transform var(--duration-slow) var(--ease-out-momentum);
}
.panel.is-open {
transform: none;
}
/* Do: keep the slide by default, and swap it for a short fade when reduced motion is on */
@media (prefers-reduced-motion: reduce) {
.panel {
transform: none;
opacity: 0;
visibility: hidden; /* a closed panel must not catch clicks or focus */
transition: opacity var(--duration-base) linear,
visibility 0s linear var(--duration-base);
}
.panel.is-open {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
}
Motion started from JavaScript needs the same check:
document.querySelector("#to-pricing").addEventListener("click", () => {
// Check at click time, so a setting changed mid-session is respected
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
document.querySelector("#pricing").scrollIntoView({
behavior: reduceMotion ? "instant" : "smooth",
});
});
Use "instant", not "auto": "auto" follows your CSS scroll-behavior, so a site with html { scroll-behavior: smooth } would still glide.
Reduced motion doesn't mean no feedback. A button can still change color and a dialog can still fade in. What goes is the movement: sliding, scaling, bouncing, parallax, and smooth scrolling.
Do this instead
Wrap slide, scale, and parallax effects so they're replaced under
prefers-reduced-motion: reduceUse an instant state change or a minimal opacity fade as the reduced version, so the user still sees that something changed
Turn off parallax, auto-playing carousels, decorative looping animations, and View Transitions morphing when reduced motion is on. Immersive storytelling surfaces have a narrow exception (§1.5), and they still need a calm equivalent
Check the same setting in JavaScript before smooth scrolling or starting an animation
Name the properties you animate instead of using
transition: all(Quick #85, tip #6), so it's clear what your reduced-motion rules need to cover
Quick check for your app
Turn on reduced motion: in Chrome DevTools, press Cmd/Ctrl+Shift+P, run "Show Rendering", and set "Emulate CSS media feature prefers-reduced-motion" to reduce, or use your OS setting. Then open a menu and a dialog, trigger a page transition, and click an in-page link. Nothing should slide, zoom, or smooth-scroll, and every state change should still be visible. A media query existing isn't the same as the motion actually calming down, so test it.
HIG.md §1.3 also includes a global CSS safety net that cuts animation and transition durations and turns off smooth scrolling under reduced motion. Treat it as a backstop, not a replacement for a calm version of each effect.
The Web HIG is a behavioral contract for how the web should behave, not a component library. Design systems define how it looks. The Web HIG defines how it behaves.