Skip to content

Reduce-motion accessibility support for CSS animation library#7968

Merged
KingYes merged 3 commits intoelementor:release/2.6.0from
drawcard:reduce-motion
May 20, 2019
Merged

Reduce-motion accessibility support for CSS animation library#7968
KingYes merged 3 commits intoelementor:release/2.6.0from
drawcard:reduce-motion

Conversation

@drawcard
Copy link
Copy Markdown
Contributor

@drawcard drawcard commented Apr 26, 2019 •
edited
Loading

PR Checklist

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

Summary

This PR can be summarized in the following changelog entry:

  • Add reduce-motion accessibility support for CSS animation library

Description

An explanation of what is done in this PR

A new media query selector has been introduced to allow users who suffer motion sickness / vertigo to disable UI animations (via System settings). The media query allows website developers to extend this preference into their site design, providing an option to disable excessive or non-critical animation to users who desire it.

Having this option built into Elementor will be a great benefit to accessibility compliance, and give each website visitor greater control over their individual experience.

For Elementor, I have proposed using the media query selector on the CSS provided by the animate.css library. I have targeted the .animated class to cover as many animated elements as possible (eg entrance animations & popup animations). The code disables animation for anyone with "reduce motion" set in their system settings, but will default to normal behaviour for users who don't toggle this option, or explicitly set it to enable animation.

Reduce-motion currently has support on macOS / iOS / Android + Chrome & Safari, however it is expected to be adopted by more platforms and browsers in the future.

More information:
https://css-tricks.com/introduction-reduced-motion-media-query/
https://developers.google.com/web/updates/2019/03/prefers-reduced-motion
https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion

Code changes tested against release/v2.5.14 branch

Test instructions

This PR can be tested by following these steps:

  • Compile the SCSS in this PR to generate CSS build assets
  • Create a test page in Elementor and apply an Entrance animation to an element
  • Preview the page and ensure the animation plays
  • Enable 'reduce motion' preferences (in macOS Mojave, go to System Preferences -> Accessibility -> Display -> check 'reduce motion'
  • The new setting will immediately take effect - reload the test page and the animation should not play, and a static element should only display

Quality assurance

  • I have tested this code to the best of my abilities
  • I have added unittests to verify the code works as intended
  • Docs have been added / updated (for bug fixes / features)

Fixes #

@CLAassistant
Copy link
Copy Markdown

CLAassistant commented Apr 26, 2019 •
edited
Loading

CLA assistant check
All committers have signed the CLA.

@drawcard
Copy link
Copy Markdown
Contributor Author

drawcard commented Apr 26, 2019

For some reason some older commits are showing up here - anyway the commit related to this PR is 2f5193e

@arielk arielk requested a review from kobizz April 29, 2019 20:03
kobizz
kobizz approved these changes May 16, 2019
View reviewed changes
Copy link
Copy Markdown
Contributor

@kobizz kobizz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved to be merged. Mind the redundant empty line at 3.

@KingYes KingYes changed the base branch from master to release/2.6.0 May 20, 2019 12:40
@KingYes KingYes merged commit ddc9584 into elementor:release/2.6.0 May 20, 2019
@KingYes
Copy link
Copy Markdown
Member

KingYes commented May 20, 2019

Thanks!

@drawcard
Copy link
Copy Markdown
Contributor Author

drawcard commented May 21, 2019

No problem happy to help

@bainternet bainternet mentioned this pull request Jun 27, 2019
Closed
@yaniv691 yaniv691 mentioned this pull request Jul 9, 2019
Closed
5 tasks
@erfan-ilyas
Copy link
Copy Markdown

erfan-ilyas commented Oct 27, 2019

Please check this issue for the people started to having issues after this PR:

#8508 (comment)

@numanzahid
Copy link
Copy Markdown

numanzahid commented Nov 30, 2019

We need ability to switch this setting on or off. it should not be forced by code.
+1 #9726

@juliomorri
Copy link
Copy Markdown

juliomorri commented Apr 17, 2020

Hi friends, I found the solution for most of the cases.

Go to Edit Plugins, Elementor, CSS, frontend.min.css and then find this:

” @media (prefers-reduced-motion:reduce){.animated{-webkit-animation:none;animation:none}} ”

And then just delete that line, cause that is for “users who experience motion sickness / vertigo”

So from nowon in every single browser your entrance animations will work.

Because I saw people giving the solution to change the settings in Accesibility from Windows in reactivating the “desactivate all the unnecessary animations (when it’s possible)”, and that solution will ONLY work for your computer and no for the rest.

Thanks!

You can visit my website juliomorri.com

@drawcard drawcard deleted the reduce-motion branch April 17, 2020 06:51
@samuelkyn
Copy link
Copy Markdown

samuelkyn commented Oct 26, 2020

Hello guys,
After the last update, it doesn't work but remove those settings as @juliomorri i said above
Any solution?

@iMiek
Copy link
Copy Markdown

iMiek commented May 19, 2021

@juliomorri thanks for the tip, it's working
The only thing is to do it every update of Elementor, and I made a lot of sites ;-(

Does anyone knows how to "unset" these settings with css or a hook.....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kobizz kobizz kobizz approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

10 participants

@drawcard @CLAassistant @KingYes @erfan-ilyas @numanzahid @juliomorri @samuelkyn @iMiek @kobizz @shilo-ey