Reduced motion is a feature that helps users with motion sensitivity or vestibular disorders by minimizing animations and motion on websites. It works by detecting the user’s operating system preference through CSS or JavaScript, allowing developers to conditionally apply or disable animations. Developers can use it to disable non-essential animations, simplify transitions, avoid parallax effects, and pause auto-playing videos. Implementation tips include testing with reduced motion enabled, combining it with other accessibility practices, and avoiding unnecessary large-scale animations.

Reduced motion is a media feature that allows users to specify their preference for reduced animation or motion on websites. It's part of the broader effort to make the web more accessible, especially for people who experience motion sensitivity or vestibular disorders.

Why Reduced Motion Matters

Some users can feel dizzy, nauseous, or disoriented when exposed to certain types of animations or transitions on websites. This is particularly true for complex effects like parallax scrolling, large-scale animations, or auto-playing videos with movement.

By respecting a user’s reduced motion preference, websites can provide a more comfortable browsing experience without sacrificing usability or content access.

• People with vestibular (balance) disorders
• Users prone to migraines or seizures triggered by flashing lights or rapid motion
• Anyone who simply finds excessive animation distracting

This feature isn't just about accessibility—it's also about user comfort and control.

How Browsers Detect Reduced Motion Preferences

Most modern operating systems have a setting where users can enable reduced motion. For example:

• On macOS: System Preferences > Accessibility > Display > Reduce Motion
• On iOS: Settings > Accessibility > Motion > Reduce Motion
• On Windows: Settings > Ease of Access > Display > Make motion in Windows simpler

When this setting is enabled, the browser picks it up and makes it available via the prefers-reduced-motion CSS media query or JavaScript.

In CSS, you can use it like this:

@media (prefers-reduced-motion: no-preference) {
  /* Add animations here */
  .fade-in {
    transition: opacity 0.5s ease;
  }
}

If the user has reduced motion enabled, the styles inside that block won’t apply, so animations are skipped entirely.

Practical Ways to Use prefers-reduced-motion

Here are some common applications of this media feature:

• Disable non-essential animations: Things like fade-ins, slide-ins, or bounce effects can be turned off.
• Simplify transitions: Replace complex transitions with simple fades or no transitions at all.
• Avoid parallax effects: These can be especially disorienting for sensitive users.
• Pause auto-playing videos: Especially those with moving scenes or visual effects.

You don’t need to remove all motion—just eliminate what might cause discomfort. Keep core functionality intact while toning down flashy visuals.

A Few Implementation Tips

• Always test your site with reduced motion enabled to see how it behaves.
• Don’t assume everyone wants everything turned off—use (prefers-reduced-motion: no-preference) to apply motion only when it’s safe.
• Combine with other accessibility practices, like semantic HTML and keyboard navigation support.
• If using a CSS framework or animation library, check if it has built-in support for reduced motion settings.

One small but important detail: avoid using large-scale transform animations (like scaling or rotating) unless necessary. Even subtle animations can help maintain a sense of continuity without triggering discomfort.

That’s the basics of prefers-reduced-motion. It’s not hard to implement, but it makes a real difference for users who need it.

The above is the detailed content of What is the prefers-reduced-motion media feature for accessibility?. For more information, please follow other related articles on the PHP Chinese website!