Is your feature request related to a problem? Please describe.
Many devices and browsers now allow users to reduce unnecessary motions and animations — effects that could otherwise be disorienting to those with motion sickness, vertigo, or vestibular motion disorders.
Here is a screenshot of this feature in macOS:
To improve their accessibility (a11y), websites can respect this user preference with just six lines of CSS.
Describe the solution you'd like
The Newspack theme could add the following CSS in its style.css file:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0ms !important;
transition-duration: 0ms !important;
}
}
Whether or not the theme itself features motions and animations, this code will be passed along to any plugins or other third-party tools that could otherwise add such effects to the user experience.
Describe alternatives you've considered
Some advocates recommend including these two lines in the above code as well:
animation-iteration-count: 1 !important;
scroll-behavior: auto !important
Additional context
Here is more documentation on the prefers-reduced-motion CSS media feature:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
Is your feature request related to a problem? Please describe.
Many devices and browsers now allow users to reduce unnecessary motions and animations — effects that could otherwise be disorienting to those with motion sickness, vertigo, or vestibular motion disorders.
Here is a screenshot of this feature in macOS:
To improve their accessibility (a11y), websites can respect this user preference with just six lines of CSS.
Describe the solution you'd like
The Newspack theme could add the following CSS in its
style.cssfile:Whether or not the theme itself features motions and animations, this code will be passed along to any plugins or other third-party tools that could otherwise add such effects to the user experience.
Describe alternatives you've considered
Some advocates recommend including these two lines in the above code as well:
Additional context
Here is more documentation on the
prefers-reduced-motionCSS media feature:https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion