Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,164
Website

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

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).
˙


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#2 2019-11-29 12:34:43

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

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

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

Offline

#3 2019-11-29 13:23:37

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

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

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

Offline

#4 2019-11-29 13:36:22

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,164
Website

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

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


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#5 2019-11-29 13:40:42

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

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

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

Offline

#6 2019-11-29 17:12:16

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,634
GitHub Twitter

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

Fine!

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

scroll-behavior: auto !important;

Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

#7 2019-11-30 00:22:08

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,164
Website

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

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.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

Board footer

Powered by FluxBB