Thanks to the wide support of the prefers-reduced-motion-media feature, we now have more advanced ways to design motion that can be creative and innovative while also being safer for those with motion sensitivities.| Smashing Magazine
447 Posts, 122 Following, 841 Followers · Web dev, SvelteJS maintainer, and pianist. ❤️ cats, books, and video game music.| Front-End Social
The prefers-reduced-motion CSS media feature is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.| MDN Web Docs
Developer Facundo Corradini shares how his temporary disability taught him about why accessibility testing is so important. Focused on vestibular disorders, he both shares best practices to create …| A List Apart
For millions of people with vertigo and inner ear problems, large-scale web animations can trigger nausea, migraines, and dizziness. To make websites accessible for everyone, we don’t need to elimi…| A List Apart
I spoke at the Fall 2021 Svelte Summit on Svelte Transitions and Accessibility. Svelte includes built-in animations that makes it easy to slide, scale, and fly elements in and out of the DOM. However, you need to be careful to not trigger motion sickness in your users. In my talk, I go over which Svelte transitions could cause accessibility issues and how to respect user motion preferences when using them.| Geoff Rich
I recently had the pleasure of attending Deque's axe-con digital accessibility conference. Over the course of two days, I attended multiple sessions about many different facets of accessibility. I mainly focused on the developer track at the conference, though I sampled a few talks from other tracks. Here are some of the highlights and what I took away from the sessions I attended.| Geoff Rich
The prefers-reduced-motion media query is used to detect if the user has requested that animation and motion be minimized. Website animation may trigger motion sickness for those with vestibular disorders, and it is important to disable non-essential animations for these users. prefers-reduced-motion is often used in a CSS stylesheet to disable certain animations, though it can also be used to modify animations applied with JavaScript.| Geoff Rich