Leverage Reduced Motion for More Accessible Web Animation
Disclaimer: Medium doesn’t currently support video files in posts, so there are two GIFs in this post with scrolling/large animations. If you’d like to view those in a format that allows pausing, you can read this article on our website.
Web animation is useful for a variety of reasons. Not only is it an attention-grabber, but it’s a great way to convey an executed action to your user. Animation can also help enhance the user experience. Consider something as small as the unlock icon on an iPhone.
This micro-interaction is subtle, but it sends the message that you’ve completed an action successfully: you unlocked your phone. It adds a little extra activity feedback, and can even spark some delight.
However, there are cases when web animations can be detrimental to user experience. Animations can be distracting, overstimulating, or downright annoying — and sometimes they even make people sick. In the U.S. alone, approximately 35% of individuals over the age of 40 have experienced some form of vestibular dysfunction. Web animation can cause those with vestibular dysfunction to experience motion sickness or vertigo. That means your website animation could cause discomfort to nearly 70 million people across the nation. Not cool.
Disability is a Spectrum
It’s easy to think about accessibility as it relates to permanent disabilities, but we often forget about temporary or situational disabilities and how those can impact the user experience. You might not suffer from a vestibular disorder, but you might experience temporary vision loss or a concussion, or you may simply feel visually exhausted from staring at screens all day.
Well, here’s the good news: we can have our cake and eat it, too. You can responsibly serve motion while providing users the option to turn it off with a few lines of CSS.
Introducing the Reduced Motion Media Query
---
.animation {
animation: vibrate 0.3s linear infinite both;
}@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}
---
What we’re seeing here is a media query that enables users to override motion settings on the website from their operating system. It functions the same way any other CSS media feature does. If the user has Reduced Motion enabled, the browser will identify any CSS within prefers-reduced-motion: reduce blocks, and apply those styles instead.
Users can enable Reduced Motion from their operating system
This is huge. It means you can still serve your users that animation that you spent minutes (ok, probably hours) perfecting, but you can also provide an alternate experience for those who’d like to opt-out of any non-essential motion:
Sometimes motion is essential to an action (e.g.: drop-downs or modals), and in many cases it contributes to a more accessible experience. In the example below, the same component has been stripped of any animation, but the functionality remains. You can still play the video if you’d like, but the component’s default is stillness, and scrolling does not have any sort of blooming effect.
As you can see, this is a pretty cool feature that opens up the door to further accessible customization of our user experiences, and we’re thrilled to work with clients who agree with us about the importance of improving accessibility. When I created my first component using the Reduced Motion media query, I was excited to be at the forefront of a new way to improve experiences for our users.
Accessible Features are Necessary for Some, but Useful for All
At Think Company, accessibility isn’t a step in our process, it is our process — we seek to improve every user’s experience, regardless of ability. Otherwise, you effectively isolate a portion of your users simply by neglecting accessibility during design and development. I take pride in knowing that each of my coworkers touts accessibility at every twist and turn of any project.
While web accessibility is necessary for many, accessible practices benefit all (and that includes businesses, too).
Originally published on the Think Blog by Nicole Witte.
