Two years ago, I explored prefers-reduced-motion, a media query introduced in Safari 10.1 to improve web accessibility for users with vestibular disorders and epilepsy. The original article discussed the query's background, necessity, and implementation to prevent motion-induced issues.

This followed the excellent work of Orde Saunders on user queries and Val Head's insights on motion sensitivity in web animation.

Fast forward to 2019, and major desktop browsers now support this crucial feature! Safari led the way, followed closely by Firefox. Chrome joined later, with support starting from version 74.

Browser support details are available on caniuse.com (a number indicates support from that version onwards).

Desktop Browser Support

Mobile/Tablet Browser Support

While Microsoft Edge currently lacks support, its integration with Chrome is imminent. This transition offers a potential upside: Edge's strong accessibility features might be incorporated into Chrome.

Raising Awareness

While some websites and apps utilize prefers-reduced-motion, its adoption remains surprisingly limited outside the CSS and accessibility communities. This isn't entirely unexpected; CSS features are often undervalued, and accessibility even more so.

It's understandable that developers might overlook a relatively new feature, especially in a fast-paced industry. Market priorities heavily influence developer focus. However, prefers-reduced-motion is library-agnostic and integrates with OS-level settings, suggesting long-term relevance.

Its true value lies not in impressing recruiters but in enhancing the lives of affected users. This simple media query can prevent significant discomfort for users simply browsing or interacting with a website.

Impact on Affected Users

Disability is complex and multifaceted, encompassing a wide range of permanent, temporary, environmental, and situational factors. Many people mistakenly focus solely on visual impairments. The impact of disabilities varies greatly, and what helps one person might harm another.

For individuals with vestibular disorders, migraines, or seizure triggers, web browsing can be challenging. Unexpected animations can trigger debilitating symptoms. This is particularly problematic for those whose work relies heavily on web applications. They may lack control over their work devices or job options.

It's a misconception that everyone is aware of their condition or its triggers. The initial triggering event can sometimes heighten sensitivity. Facundo Corradini's article, "Accessibility for Vestibular Disorders," eloquently describes this experience.

Furthermore, not all assistive technology users are tech-savvy. They may be unaware of OS settings or browser extensions that mitigate motion. Consider users with locked-down corporate devices, those unfamiliar with their device's capabilities, or those using inexpensive or older devices that lack support for prefers-reduced-motion.

Assessing Potential Harm

Animation intended to encourage engagement can conversely drive users away. While difficult to quantify, this negative impact is real. Intentional harm is easier to measure, though addressing it presents further challenges.

Significant harm to a substantial user base affects branding. Excessive or poorly implemented animation can deter users, even if they can't articulate the reason.

We cannot and should not know the specific circumstances of every user. A proactive, considerate approach is essential.

Animation as Progressive Enhancement

Not all devices render animation equally well. Low-power devices may struggle, and specialized browsing modes (like Reader Mode) may alter or remove animation entirely. This underscores the importance of robust design.

Animation may not always behave as intended in zoomed viewports or Reader Mode. Important elements could be pushed out of view, resulting in a jarring visual experience.

Practical Implementation

To enhance awareness and consideration for animation's potential downsides, we can proactively incorporate a media query to disable animation for users who prefer it or have devices that can't handle it smoothly. This targets both prefers-reduced-motion and devices with slow screen refresh rates using the update media feature.

@media screen and
  (prefers-reduced-motion: reduce),
  (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

This forces all animations to complete imperceptibly. It functions for users requesting reduced motion or devices with slow refresh rates (e.g., e-ink screens). Maintaining animation-duration and transition-duration ensures functionality while preventing issues.

This approach aims to:

1. Increase awareness of the media features.
2. Encourage thoughtful consideration of animation's impact.
3. Promote more maintainable stylesheets.

Animation's Value

Beyond vestibular disorders and photosensitivity, cognitive disabilities must be considered. The World Health Organization estimates 300 million people worldwide are affected by depression, which can significantly impair interaction with the environment.

Animation can be beneficial for some cognitive disabilities, aiding comprehension and communication. Val Head's work highlights its potential to improve problem-solving, recall, and skill acquisition while reducing cognitive load.

Reduce, Don't Remove

We shouldn't eliminate animation entirely. prefers-reduced-motion suggests reduction, not removal. Using the CSS cascade, we can manage animation on a per-component basis. If animation is crucial to understanding, we can slow it down to avoid triggering issues.

CSS Custom Properties can streamline this process, even enabling a site-wide animation preference widget.

/* Default durations */
:root {
  --animation-duration: 250ms;
  --transition-duration: 250ms;
}

/* Contextual shortening */
@media (prefers-reduced-motion: reduce), (update: slow) {
  :root {
    --animation-duration: 0.001ms !important;
    --transition-duration: 0.001ms !important;
  }
}

@media (prefers-reduced-motion: reduce), (update: slow) {
  * {
    animation-duration: var(--animation-duration);
    animation-iteration-count: 1 !important;
    transition-duration: var(--animation-duration);
  }
}

/* Update duration for critical animation */
@media (prefers-reduced-motion: reduce), (update: fast) {
  .c-educational-concept {
    --animation-duration: 6000ms !important;
    animation-name: educational-concept;
    animation-duration: var(--animation-duration);
  }
}

Testing slowed animation requires input from users susceptible to motion-related issues. A better approach is to gather information about past triggers and compare them to the implemented animation.

Neurodivergence

Shell Little, an Accessibility Specialist, provides valuable insights on neurodivergence:

Web animation can be beneficial for some neurodivergent users, but the same animation can be a barrier for others. The WCAG's Pause, Stop, Hide guideline is limited, applying only to animations longer than 5 seconds and exempting essential motion. prefers-reduced-motion offers a user-controlled solution, empowering individuals to decide when and where animation is displayed. This is especially crucial for users with attention-related disabilities or sensory processing sensitivities. Autoplaying content is a common frustration, and prefers-reduced-motion could address this.

Conclusion

Animation should be used responsibly. Factors to consider include: raising awareness of potential issues, mitigating legal risks, enhancing user experience, understanding device capabilities and limitations, and respecting user data and battery life.

Spreading awareness of prefers-reduced-motion and responsible animation practices is crucial. Sharing experiences of problematic animations can help build a valuable reference for developers. This collective effort can make the web more inclusive and accessible for everyone.

The above is the detailed content of Revisting prefers-reduced-motion. For more information, please follow other related articles on the PHP Chinese website!