Accessibility - prefers-reduced-motion (being nice to people)

phiw13 · 2019-11-29 02:47:02

My recurring problems with dizziness and vertigo reminded me, it would probably be a good idea to check the animations in Hive admin theme and reduce them using the prefers-reduced-motion MQ. Users who have turned this on on their device would automatically get less or no animations (and transitions).

In Hive admin theme (and derivates), the main one is that jumping of and on message pane at the bottom of the page.

I once linked to an Alistapart article, here is a CSS Tricks article.

Support is good.

(curiously the macOS animations, e.g. the sliding in of notifications, don’t annoy me that much. But that is just me. On websites it sometimes helps – the few sites that actually bother with that kind of things. Luckily Apple.com does it, or the marketing pages for the Airpods pro and Mac Pro who be completely unusable for me.

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

(that is a bit sledgehammer approach, but you get the idea)

PS – on macOS: System Preferences > Accessibility > Vision > Display; on iOS it is under Settings > Accessibility > Motion. Someone else will have chime in with the Windows settings, I forgot them right now (and Android).
˙

philwareham · 2019-11-29 12:34:43

I’ll add this to the admin theme(s) now. Will post back when it’s in dev branch.

philwareham · 2019-11-29 13:23:37

OK, done this in dev branch – let me know how it works out.

phiw13 · 2019-11-29 13:36:22

Thank you. i‘ll have a look tomorrow morning.

philwareham · 2019-11-29 13:40:42

I actually targeted the elements directly that had transitions/animations – but the outcome should be the same.

Pat64 · 2019-11-29 17:12:16

Fine!

This rule can be completed with an another property if the html document is attached to scroll-behavior: smooth:

scroll-behavior: auto !important;

phiw13 · 2019-11-30 00:22:08

Thank you, Just what the doctor suggested.

philwareham wrote #320323:

I actually targeted the elements directly that had transitions/animations – but the outcome should be the same.

Oh, definitely. The sample I posted is just that, a sample. Sometimes, sometimes a teeny bit of animation can actually help in accessibility for people with motion allergies.

Pat64 wrote #320331:

This rule can be completed with an another property if the html document is attached to scroll-behavior: smooth:

Sure, many things can be enabled or disabled as needed, scroll-behaviour is one high on the list of annoyances.

Textpattern CMS

Textpattern CMS support forum

#1 2019-11-29 02:47:02