> Markdown version of [/magazine/512-accessibility-tip-detecting-reduced-motion-in-one-line-of-javascript](https://www.wearedevelopers.com/magazine/512-accessibility-tip-detecting-reduced-motion-in-one-line-of-javascript). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Accessibility tip: Detecting reduced motion in one line of JavaScript **By:** [Chris Heilmann](https://www.wearedevelopers.com/@chris-heilmann) **Published:** December 5, 2024 Animation can be a great tool to make apps seem more performant, be more engaging or even just more interesting. There are, however, quite a few groups of people who can not deal with things animating, as it distracts them or can even cause nausea. This is why operating systems allow you to enable "reduced motion" which turns of all unnecessary animation in the OS. Our own apps should also abide by this setting in order to be accessible, as it is even a [WCAG Success Criterion](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html). ## Detecting prefers-reduced-motion For browser based apps, we have a [media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features) that gets triggered when a user has reduced motion turned on called [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). This one can be used in CSS, but also as a media attribute on link elements. In JavaScript, we can use [matchmedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia), which means that checking if animations are wanted or not is a one liner (here on 3 to be more readable): On devices with reduced motion turned on, `prefersReducedMotion` is `true`, otherwise it is false. We can use this to simply not show animations when it is false. Take for example a button that picks one item from an array of categories. When reduced motion is not turned requested, we show a random amount of options before we get to the last one. When it is requested, we just show one category every time the user activates the button. You can try this in the [reduced no checkbox codepen](https://codepen.io/codepo8/pen/GgKopoz): [ ![Screen recording showing the functionality](https://wearedevelopers.imgix.net/public/magazine/articles/512/images/6750e10f624e21a35f53e846_6750df30d803171970a72140_reduced-no-checkbox.gif) ](https://codepen.io/codepo8/pen/GgKopoz) The code is pretty straight forward: ## Allowing for manual override This is a simple example, but whilst people have requested reduced motion, they may still want to have animations from time to time. To enable that, we can offer a checkbox so they can turn it on and off. You can see this in action in the [Animation Test](https://codepen.io/codepo8/pen/KwPdQzY) codepen: [ ![screen recording showing an opt in to animate despite setting reduced motion](https://wearedevelopers.imgix.net/public/magazine/articles/512/images/6750bfcb443c911cd7484633_6750bfbb5ce16971b13dc6d6_animation-detection.gif) ](https://codepen.io/codepo8/pen/KwPdQzY) The main difference is that we add a checkbox to the HTML: And in the JavaScript, we set this to the state of media feature: We then need to override the `prefersReducedMotion` value when the user chooses to have animations. This is a simple event handler on the checkbox: `‍`That way, we offer the best of both states. We turn off animations by default when the user has reduced motion enabled, and we allow them to override this. If you use a Chromium browser, you can even [simulate reduced motion](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/reduced-motion-simulation) without having to change it in the operating system. ## Related Articles - [CSS-Only Scroll-Driven Animations](https://www.wearedevelopers.com/magazine/712-css-only-scroll-driven-animations) - [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents) - [HTML Media Elements and How to Use Them: <video> and <audio>](https://www.wearedevelopers.com/magazine/668-html-media-elements-and-how-to-use-them-video-and-audio) - [Using light-dark() for Easy Theme Switching](https://www.wearedevelopers.com/magazine/630-using-light-dark-for-easy-theme-switching) ## Related Videos - [Dizzy users close browsers: balancing creativity and accessibility](https://www.wearedevelopers.com/videos/803-dizzy-users-close-browsers-balancing-creativity-and-accessibility) - [What’s New and What’s Next in Web UI](https://www.wearedevelopers.com/videos/956-what-s-new-and-what-s-next-in-web-ui) - [The Illusion of a Performant Web Application](https://www.wearedevelopers.com/videos/817-the-illusion-of-a-performant-web-application) - [A journey of a long list in React](https://www.wearedevelopers.com/videos/203-a-journey-of-a-long-list-in-react) ## Related Jobs - [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia** - [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356601-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse**