-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Slow down spinners when prefers-reduced-motion: reduce
#31882
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Love this!
I'd like to hear @patrickhlauke's take on this :) |
my take is: sure, why not :) (and to expand, there really isn't any hard actual definition of motion that always causes problems - some user groups will feel dizzy/triggered by obvious large parallax-style animations, but it's debatable if a small contained little animation is also bad for them. WCAG itself doesn't define any threshold, and it only counts as a potential failure if it's as a result of interaction - hovering, scrolling, etc https://www.w3.org/TR/WCAG22/#animation-from-interactions ) |
I'm all for a11y, but I'm afraid this will cause more issues similar to "My animations are not working". Just thinking out loud here. :) |
@XhmikosR That's why I only slow it down instead of dropping it :D ← BTW, this is what we currently do for |
I'd say we definitely need a callout mentioning this behavior and the reasons behind it then :) |
yes, callout in the same vein as the ones we already have pointing to the accessibility section about this |
bf00d23
to
9d405db
Compare
Added our |
Crap, forgot we should mention this in the migration page. @ffoodd see if you can tackle this later please :) |
* feature(spinners): slow down spinners when prefers-reduced-motion * docs(spinners): add reduced motion callout and mention slowing down in accessibility page * Update spinners.md * docs(accessibility): rewording Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* feature(spinners): slow down spinners when prefers-reduced-motion * docs(spinners): add reduced motion callout and mention slowing down in accessibility page * Update spinners.md * docs(accessibility): rewording Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
If people are really suffering from smallish animations, reducing their speed isn't going to help them. They need animations to stop completely. Instead of a loading animation, a static hourglass is good. Firefox does this as well instead of the loading icon on a tab: |
no, it's not necessarily so clear cut and binary - and indeed, it varies for each user. users generally aren't affected by everything that animated, but specific types of animations that can be distracting (for users with cognitive and attention issues) or can trigger users with vestibular disorders (large motion, parallax effects, scroll-bound effects) or epylepsy (fast changes in contrast / flickering / strobing, movements of strong patterns) etc. long story short, slowing small animations down is a valid approach. |
* feature(spinners): slow down spinners when prefers-reduced-motion * docs(spinners): add reduced motion callout and mention slowing down in accessibility page * Update spinners.md * docs(accessibility): rewording Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* feature(spinners): slow down spinners when prefers-reduced-motion * docs(spinners): add reduced motion callout and mention slowing down in accessibility page * Update spinners.md * docs(accessibility): rewording Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* feature(spinners): slow down spinners when prefers-reduced-motion * docs(spinners): add reduced motion callout and mention slowing down in accessibility page * Update spinners.md * docs(accessibility): rewording Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
@patrickhlauke If people indicate they suffer from motion, you have to assume the worst condition. That's the only way to alleviate the problem for everyone who suffers from motion on their screens. The term "prefers-reduced-motion" must not be taken literally. |
Very simple enhancement to slow down spinners when reduced motion are requested.
Somehow relates to #30081 — deeper thinking:
So this PR basically just ensure to slow down animation, thus prevents flashing colors (most probably with growing spinners, but hey, who knows).
As usual, feel free to discard this if it's over-engineered in any way.
Preview: https://deploy-preview-31882--twbs-bootstrap.netlify.app/docs/5.0/components/spinners/