Motion With Respect: Supporting Reduced Motion
This website uses motion: sections that rise gently into view, a timeline that draws itself as you scroll, product images that drift and fade. Done well, motion guides attention and makes a page feel crafted. Done carelessly, it distracts, slows people down and, for some, causes real discomfort.
People with vestibular disorders can experience dizziness or nausea from large movements, parallax effects and zooming animations. Others simply find constant motion distracting. Operating systems let people ask for less motion with a reduced motion setting, and browsers pass that preference to websites. We design every animation to respect it.
What the reduced motion setting does
When someone turns on reduced motion in their phone or computer's accessibility settings, browsers expose a preference that websites can read. A website that respects it can turn off or simplify animations for that person, while everyone else still sees the full design.
It is one of the easiest accessibility features to support, and one of the most often ignored.
Content must not depend on animation
The most important rule is that content must be visible and usable without any animation. A common mistake is to hide content until an animation reveals it. If the animation never runs, because motion is reduced, a script fails or the page is read by a search engine or screen reader, the content stays hidden.
We design reveal effects so the content is present in the page from the start. The animation only changes how it appears, not whether it appears. With reduced motion turned on, the content is simply there.
What we turn off
When reduced motion is requested, our designs remove or simplify:
- Elements sliding, rising or zooming into view
- Continuous movement, such as scrolling marquees and drifting images
- Animated progress effects tied to scrolling
- Parallax effects where layers move at different speeds
- Decorative looping animations
Subtle changes that convey meaning, such as a button changing color on hover or focus, remain, because they help rather than distract.
Motion should not delay the main content
There is a performance side to motion too. Search engines measure how quickly the largest visible element on a page appears. If that element, often a hero image, starts invisible and fades in only after a script runs, the page looks slower to both people and search engines.
We learned this directly while building this site. Our hero visuals originally used the same reveal animation as other sections, which kept them hidden until a script ran. We changed them to appear immediately with a light fade done in CSS alone, so the main content shows up as fast as possible. You can read more in fast pages: images, lazy loading and layout shift.
Fewer, better animations
Respecting reduced motion is easier when there is less motion to manage in the first place. We try to use animation where it adds meaning: drawing attention to a new section, showing progress through a timeline or signaling that something changed. Animation used only because it is possible tends to make pages feel busy and slow.
A good rule of thumb is that motion should finish quickly, move short distances and never block someone from reading or clicking. If an animation makes people wait, it is getting in the way.
Pause controls for continuous motion
Anything that moves continuously for more than a few seconds, such as a scrolling logo strip, should be pausable or should stop when people interact with it. Hovering over our moving product strip pauses it, and with reduced motion, it does not move at all.
Test with the setting turned on
Supporting reduced motion is easy to verify: turn the setting on in your device's accessibility options and use the site. Everything should still be readable and usable, and nothing should move unexpectedly. We include that check when we review designs with motion, alongside keyboard checks described in keyboard focus is a feature.
Frequently asked questions
What is prefers-reduced-motion?
It is a browser setting, based on the operating system's accessibility preferences, that tells websites a person wants less motion so animations can be reduced or removed.
Do animations affect accessibility?
Yes. Large or continuous motion can cause discomfort for people with vestibular disorders and can distract others. Respecting reduced motion settings helps.
Can animations hurt page speed scores?
They can if important content starts hidden and waits for a script to animate it in. Showing main content immediately avoids that delay.
Related Posts
Accessible Forms: Labels, Errors and Focus
Forms are where people sign up, pay, register and ask for help. Here is how we make them clear and usable for everyone, including people using screen readers or keyboards.
Writing Error Messages People Can Act On
An error message is often the moment someone decides whether to keep trusting software. Here is how we write messages that explain what happened and what to do next.
Checking Every Screen at Phone Width
Many people manage their organizations from a phone. Here is why we check every screen at phone width, what usually breaks and how we fix it before customers notice.
Fast Pages: Images, Lazy Loading and Layout Shift
Most slow pages are slow because of images, fonts and late-loading content. Here are the practical habits we use to make pages appear quickly and stay stable.
CSS Cascade Layers and Why Our Page Builder Depends on Them
A heading that is white in the editor and dark on the live page is a cascade problem. Here is how CSS cascade layers keep our page builder's styles in charge.
Comments (0)
No comments yet. Be the first to share your thoughts!