spaceninja + reduced-motion   12

Exploring prefers-reduced-motion
Animations and transitions on the web are cool and all, they can make the UI feel snappier and responsive (if used judiciously). However there are problems with motion like this. A whole lot of people are sensitive to motion and you don't want your site to cause motion sickness and dizziness, right?

Luckily, most modern browsers now support prefers-reduced-motion CSS media query. Which means you can skip animations for people who don't want them.
fridayfrontend  css  cssbasics  animation  reduced-motion  accessibility 
29 days ago by spaceninja
Reducing Motion to Improve Accessibility
Hey friends! In this post, I am going to walk you through a newer media query (to me): prefers-reduced-motion. My major takeaways from the web accessibility perspective: Be careful with your animations; Be careful with your gifs; Use prefers-reduced-motion; Allow a user to control reduce motion;
fridayfrontend  css  cssbasics  accessibility  reduced-motion 
4 weeks ago by spaceninja
CSS prefers-reduced-motion Media Query
One of the CSS media queries I've recently discovered is prefers-reduced-motion, a media query for users sensitive to excessive motion. Let's use prefers-reduced-motion to show motion to all users but none to sensitive users:
fridayfrontend  css  cssbasics  reduced-motion  accessibility 
6 weeks ago by spaceninja
Reduced Motion Auto-Play Video
Auto-playing background videos can be annoying. However, beyond being a source of annoyance (or “user delight”, as some might say) they can be distracting for those who have difficulty staying focused, and potentially sickening for those with Vestibular disorders. Fantastic… Fortunately the reduced motion media query gives developers another chance at implementing such components in a way that will respect user preferences from an OS level.
fridayfrontend  css  cssbasics  reduced-motion  video  auto-play  accessibility 
8 weeks ago by spaceninja
Reducing motion with the picture element
hm… I wonder if you could use `picture` + `prefers-reduced-motion`? I copied the code, dropped it into a post of mine, created a static image of an animated GIF, and turned on the “reduce motion” preference (System Preferences > Accessibility > Display). And then BOOM. Just worked. In real time!
fridayfrontend  accessibility  reduced-motion  picture  images  gifs 
june 2019 by spaceninja
Revisiting prefers-reduced-motion, the reduced motion media query
Not everyone who could benefit from `prefers-reduced-motion` cares about accessibility-related content, so I’d love to see the media query start showing up in the code of more popular sites. The only real way to do this is to spread awareness. Not only of the media query, but more importantly, understanding the nuance involved with using animation responsibly.
fridayfrontend  css  accessibility  reduced-motion 
may 2019 by spaceninja
Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective
But life would give me a lesson I would probably never learn otherwise: last October, my abled life took a drastic change—I started to feel extremely dizzy, with a constant sensation of falling or spinning to the right. I was suffering from a bad case of vertigo caused by labyrinthitis that made it impossible to get anything done. In my case, it was a little over a month. Here’s what I learned while going through it.
fridayfrontend  accessibility  animation  reduced-motion  readermode  darkmode 
april 2019 by spaceninja
Reduced Position Sticky
Last night I added a reduced motion media query for the header of the primary content of my website. I am using position: sticky (and position: -webkit-sticky for Safari) to make the content obscure the header, on scroll. Since such behavior could be considered a form of parallax scrolling, I am cognizant of the fact it may be a triggering issue for some people. Therefore, I want to respect those who have opted to prefer reduced motion.
fridayfrontend  cssbasics  css  sticky  reduced-motion  accessibility 
march 2019 by spaceninja
Trying to explain reduce motion to designers who don’t have a vestibular disorder
Vestibular issues are _weird_. I never used to have one, and now I do. I’ve no idea where it came from. It also makes little logical sense to people. They think I’m lying that I get triggered by animations because I also write about videogames. But here’s the thing: I’m fine with racing games, just as I’m fine with roller-coasters. Whatever’s going on in my head manifests when 1) too much of my focus is taken over by a screen, and; 2) whatever’s happening on the screen is _outside of my control_.
reduced-motion  accessibility  fridayfrontend  css 
october 2018 by spaceninja
Your Interactive Makes Me Sick
Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through? Taking the time to look at each element from an accessibility standpoint, and ensuring that users can control their own level of engagement with a piece, will make your stories stronger and available to a wider audience of readers.
fridayfrontend  animation  design  accessibility  scroll  reduced-motion 
march 2018 by spaceninja
The reduced motion query at a glance
Not all animation has the potential to be harmful, so this isn’t something you’ll have to use for every animation you create. But, it will be very helpful for intentionally creating safer experiences for motion-sensitive folks when bigger or more drastic motion is called for in a design. That’s why I think it’s such a useful thing to keep an eye on.
fridayfrontend  css  mediaqueries  reduced-motion  accessibility 
august 2017 by spaceninja
An Introduction to the Reduced Motion Media Query
Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think.
fridayfrontend  css  accessibility  reduced-motion  mediaqueries  animation 
february 2017 by spaceninja

Copy this bookmark: