[Accessibility] Animations in theme should use reduced motion media queries

[StuartNicholls]

Accessibility

Animations should have accompanying reduced motion media queries, or have a media query that works globally. So something along the lines of:

@media (prefers-reduced-motion: reduce) { .has-animation { animation: none !important; } }

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility

[oliverfoster]

Please don't use this via the media query alone. It should also be switched in the json.
There are times where adminstrators of computer networks set Windows to have forced reduced motion on their user's machines via an active dirtectory, effectively turning off all animations that use prefers-reduced-motion unnecessarily.

[oliverfoster]

Please use html class is-prefers-reduced-motion instead of the direct media query.

[oliverfoster]

is-prefers-reduced-motion is available in latest core

[kirsty-hames]

I'm assuming is-prefers-reduced-motion should be applied to the image zoom, _onScreen animations and the scale/pulse effects in _animation.less. Did you have an implementation in mind for this already @StuartNicholls? If not, a simple html:not(.is-prefers-reduced-motion) for each of the animation mixins might suffice if you want me to pick this up?

[StuartNicholls]

I think the scale & pulse animations could just be done like this, although it might be worth checking what they have been used for or what intended to be used for. _onScreen I'd say maybe replace these with a fade perhaps rather than just have no animation at all. I have no idea what image zoom is!

[kirsty-hames]

I have no idea what image zoom is!

Image zoom is a scale effect applied to graphics on hover for a bit of pizazz e.g. menu item image.

[StuartNicholls]

@kirsty-hames And we all love a bit of pizazz! I remember now.. On hover? Isn't that a little confusing though? Is it ever used?

[kirsty-hames]

@kirsty-hames And we all love a bit of pizazz! I remember now.. On hover? Isn't that a little confusing though? Is it ever used?

Yep on hover. I've seen it used on menu and hotgrid items but I think it's odd to have it on images where there isn't a click event e.g. graphic component. A hover event implies there is an action.