Consider accessibility in designs with motion and animation.
Certain web animations and flashing content can negatively affect the health and well-being of people with vestibular and photosensitivity disorders. This can include triggering motion sickness and seizures.
As you design your site, it’s best to think about accessibility from the start and create safe animations that don’t cause harm from unexpected or excessive movement or flashing.
Best practices
Don’t:
- Create animations with blinking or flashing that happens more than 3 times per second
- Include rapid or unexpected movement
- Use motion to convey critical or valuable information
Do:
- Remove any harmful flashing content
- Ensure your animation has a positive usability impact (e.g., the animation directs users to key content), but also provide alternatives for users who choose to remove or reduce animation (e.g., use static images rather than moving images)
- Ensure that no valuable information is lost for visitors who choose to disable motion
- Provide and show controls to pause and/or stop moving or blinking elements that start automatically and last more than 5 seconds in parallel to other content (e.g., a slide carousel)
Ensure base animations adhere to WCAG guidelines, without requiring users to set a motion preference on their device
Ensure animations with GSAP respect a user’s motion preference by setting conditional playback. Set the interaction to “no animation” or “skip to end” depending whether you want users to see the interaction’s initial state or the end state.
Include play/pause controls on background videos
While background videos can be helpful for grabbing attention or engaging site visitors, they can also be distracting or even harmful for people with cognitive disabilities, motion sickness, or vestibular disorders. With this in mind, you can use Webflow’s built-in play/pause button setting on background videos to ensure that site visitors have the controls they need to pause or play your background video content.
You can toggle Include play/pause button in your Background video settings to enable this feature, as well as customize the appearance of the play/pause button.
Test with reduced motion preferences
You can test what your designs look like with reduced motion by toggling the reduced-motion setting on your device or browser. Learn more about how to enable and disable reduced motion settings.
WCAG Reference: Success Criterion 2.2.2: Pause, Stop, Hide, Success Criterion 2.3.3: Animation from Interactions