w3c / w3c/csswg-drafts

No-motion / forced-reduced-motion issue draft

Open
#7,440 18 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

a11y-tracker mediaqueries-5 Needs Design / Proposal scroll-animations-1 web-animations-css-integration
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

The TAG review of scroll linked animations identified an existing issue that without explicit developer support, animations with motion on the web do not respect a user's desire to reduce motion. We explored many options for reducing motion but found that it was not possible to automatically reduce motion without sometimes making content invisible. We still feel it is worthwhile exploring whether we can forcibly reduce or remove motion with a new user setting. From our demo we came up with at least two feasible options to force motion reduction, though we are open to exploring others:

  • Not running animations.
  • Stepping between key points of animation.

We propose adding a new setting for users to elect to forcibly reduce motion, possibly breaking content in the same way that other existing settings such as disabling images or Javascript does and exposing a media query value for when this setting is on so that developers can provide a fallback variant.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked TAG review in CSSWG issue 5321 and the reduce-motion phone demo. Compare the proposed options of not running animations and stepping between key points, then determine the user setting and media-query behavior that the CSS Working Group agrees on; done means an accepted, actionable proposal.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
accessibility
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.