a11y: Motion Reduced | developer heise


An even experimental feature that allows Firefox, Safari and soon Chrome users to tell a site that they prefer less movement on the page.

Recently, we've included a little bit of CSS in the Heise online news ticker, which allows us to take into account a user setting for motion reduction (eg due to motion sickness). This setting is not made in the browser, but can only be configured globally in the operating system. Our excerpt looks like this:

@media (prefers-reduced-motion: reduce) {
* :: before,
* :: after {
scrolling behavior: self! important;
animation-duration: .01s! important;
duration of transition: .01s! important;

Let's go through it line by line: For the media query prefere-reduced-motion there are only the values Non-preference and reduce, You could currently only prefere-reduced-motion consultation, but if in the future a third value reaches it, it is the concrete reduce more secure. Here we begin the approach of reducing movement globally to avoid having to do it separately – hence the packet ! importantFor the relatively few places where we work with animations, this works very well for us. If the animations are more extensive or, for example, an SVG animation with in-game looping, more specific rules would have to be written for this Media Query.

After the universal selector for all (pseudo) elements, we introduced scroll behavior to the default value carAt the moment, we only use this feature in contribution pages to not only jump into the table of contents by clicking on a subtitle, but to scroll there visibly.

The next two lines represent animation and transition the duration of the animation for a very short time of 0.01 seconds. This is really a point worth talking about to avoid unwanted problems on the site. Can someone ask why it is not easy here animation: none or transition duration: 0s stands In both cases, ionend transit-Event triggered, which in principle is also correct, since the animation would be completely disabled. But this is stupid when a JavaScript is waiting for this event to complete or trigger any action after the animation. However, setting the duration to a very short time as shown in the CSS snippet will not affect JavaScript, and the animation will still be inconspicuous.

According to the current state, the feature has been available in Firefox since version 63, in Safari since version 10.1 (iOS since 10.3) and in Chrome since version 74, according to Can I Use.


Source link