Accessible Motion Design: Respect Reduced-Motion Preferences
Animation can show where an element came from, make a state change easier to follow, and help an interface feel responsive. Large zooms, parallax, continuous movement, and rapid transitions can also cause discomfort or make it harder to concentrate. Accessible motion design gives people a way to reduce nonessential movement without losing important information.
The goal is not to make every interface static. It is to make motion intentional, provide alternatives, and respect preferences that people have already set on their devices.
Identify what the motion is doing
Inventory motion by purpose. Is it communicating a state change, guiding attention, indicating spatial continuity, or serving only as decoration? This distinction helps teams decide what can be removed and what needs a different way to communicate.
Pay particular attention to large areas of movement, scaling or panning, parallax, auto-playing loops, and animations triggered by a user's action. A decorative effect is usually easier to remove than an animation that communicates whether a menu opened or a file was saved.
Do not treat “subtle” as a universal guarantee. Motion sensitivity varies. Offer a preference that changes the experience rather than expecting users to tolerate an effect because the designer considers it small.
Respect the system preference
The CSS prefers-reduced-motion media feature detects when a person has requested less motion in their operating-system accessibility settings. Use it as a default adaptation, not as the only option if your product also offers an in-app motion setting.
.panel {
transition: transform 220ms ease, opacity 220ms ease;
}
@media (prefers-reduced-motion: reduce) {
.panel {
transition: opacity 120ms linear;
}
}
In the reduced-motion version, preserve an indication that the panel appeared while removing the larger movement. For some effects, an immediate state change is clearer and simpler than a replacement animation.
Apply the preference consistently to transitions, auto-playing content, animated charts, decorative background movement, and motion in dialogs. A preference that only changes one component is difficult for people to predict.
Keep feedback when movement is removed
If motion signals that an action succeeded, provide another cue: a changed label, a status message, a visible selected state, or an updated value. Reduced motion should not mean reduced information.
Avoid motion that is the only cue for focus, progress, or hierarchy. A user should be able to understand the page without following an animated object across the screen. Make sure transitions do not delay access to the next task or keep controls moving as someone tries to activate them.
Know the accessibility requirement
WCAG 2.2 Success Criterion 2.3.3, Animation from Interactions, is Level AAA. It addresses motion animation triggered by interaction unless the animation is essential. It is not a blanket requirement that every animation on every page be disabled, nor should it be mislabeled as AA.
Other accessibility criteria have different scopes, including requirements addressing flashes. Teams can choose a reduced-motion design-system policy that exceeds minimum conformance, but should describe the policy accurately.
Test with preferences enabled
Test with the operating-system reduced-motion setting enabled, then verify the interface still communicates state and supports the full task. Include keyboard interactions, route changes, dialogs, loading states, and repeated use—not only the homepage animation.
For motion principles and interaction design, see the motion design UX guide and neurodiverse UI patterns.