In this video, we’ll go over design strategies for accessible animation and movement on your website.
We’ll cover:
- Users affected by movement
- Types of movement
- Three design strategies:
- Indicate what movement will happen
- Provide a way to stop animations
- Use prefers reduced motion CSS or JavaScript
Transcript
Users affected by movement
Some users have disabilities that affect their balance. They can feel dizzy and unstable because of issues with their inner ear, which is what controls a person’s balance. Users also have disabilities, like ADHD, that affect their focus.
Now, how does this relate to the movement in your website content? Well, adding movement to your website can be a real problem for users who have disabilities that affect their balance. It can trigger dizziness or even motion sickness. For uses with ADHD, it can be distracting and make it difficult to focus.
Types of movement
Movement on a website can be content fading in, a carousel slider, animated button, parallax scroll, or video to name a few.
Three design strategies
There are easy design strategies you can use to create a safe and accessible website for your users. They are:
Indicate what movement will happen when someone takes action.
Provide a way to turn off any animations or movements.
And, use CSS or JavaScript to disable animations for users who have selected that they prefer reduced motion in their settings.
Let’s go over an example of each of these strategies.
Indicate what movement will happen
We’ll start with indicating what movement will happen when someone triggers an action. Often, you can communicate movement that will happen through simple visuals and following design norms.
For example, this website has images at the top that use arrows as buttons to communicate that if you select the arrow, you’ll slide to the next image.
In this example, the website has a standard play button design that communicates a video will start if you select it.
Provide a way to stop animations
Next, let’s go over provide a way to pause or stop the movement at any point. This is often done by adding a pause button. This is necessary when the movement happens automatically and lasts more than five seconds.
Our first example is a slider carousel that starts automatically and never stops, so it does last more than five seconds. It has a pause button in the bottom left of the slider, which stops the automated movement.
Another example is this website that uses a video as a background. Again, it starts automatically and never stops. In the bottom right is a pause icon that lets users pause the automated video.
Use prefers reduced motion CSS or JavaScript
The last strategy is to code reduced motion considerations in your CSS or JavaScript. In your CSS, you’ll use the prefers-reduce-motion media query. In your JavaScript, you’ll use the window.matchMedia method. For more information on how to code these and code examples, check out our article linked below.
Coding an alternative experience is an easy way to stop or reduce motion that could cause an issue before it even starts. Even if you use prefers reduced motion techniques, you’ll still need to add a pause option for movement or animation that lasts more than five seconds. That way users who don’t have this setting on, still have the option to stop the animation.
Let’s go over an example of using prefers reduced motion to provide an alternative experience. This pulsing red dot signifies that recording is in progress. But, if the user has reduced motion settings on, then the pulsating dot stops and there’s text that says recording instead. Another example is to use prefers reduced motion to stop decorative movement. This content has a decorative line animation that makes a bow in the company’s logo when the page first loads. But, if a user has prefers reduced motion on, the end result of the logo with the bow is already there when the page loads without the animation.
Test prefers reduced motion
To test your code, you can emulate reduce-motion-settings in Chrome Dev tools or turn the setting on your computer preferences.
To test it in Chrome, right click anywhere on the page and select Inspect. Then select the Customize and control DevTools three dots icon. Now, hover over More tools and select Rendering. Scroll down to Emulate CSS feature prefers reduced motion and select Prefers reduced motion from the drop down.
Learn how to change reduced motion on your computer in our article linked below.
You’re ready to design websites with more accessible movement and animation. Remember to subscribe for more accessibility videos.