Accessibility: Reducing Motion
2 min read
Animated, moving, and autoplay content on a site can impact the experience for visitors with cognitive or neurological conditions (e.g. epilepsy, motion sickness, etc.), as well as those using assistive technologies.
We therefore recommend reducing motion across the site where possible. There are 2 main ways you can minimize motion: by avoiding scroll effects, and by avoiding / limiting autoplay.
In this article, learn more about:
Where does Wix get its information?
We make recommendations as per the Web Content Accessibility Guidelines (WCAG) document, which has been developed by the World Wide Web Consortium (W3C).
Scroll effects on a site
Scroll effects are usually applied to page, section, and container backgrounds. As these effects can cause the background and foreground (the attached elements) to move at different rates or in different directions, they may create issues for visitors with vestibular or attention disorders.
We recommend only adding these effects when they are essential to the site's functionality or in conveying information. Read WCAG's guidelines on animation from interactions
Autoplay on a site
Some video and audio players may be set to play automatically when the page loads. However, this can cause confusion and distraction for visitors. For example, an audio player that starts automatically may override or 'speak' over a screen reader.
We suggest limiting autoplay on a site where possible. However, if you have visual or audio content, you can use the following guidelines to improve their accessibility:
- Videos / visual content: Add a stop, pause, or hide function to videos / visual content that:
- Plays automatically
- Is displayed in parallel to other page content
- Is longer than 5 seconds
- Audio content: Add mute / independent volume adjustment options to audio content that:
- Plays automatically
- Is longer than 3 seconds
How site visitors can reduce motion
If you do decide to use motion or autoplay content on the site, visitors can disable these options from their device's operating system and browser:
- Scroll / animation effects: Visitors can turn off animations in their system's settings:
- Windows 11: Animation effects
- Mac: Reduce motion / Auto-play animated images
- Video / audio content: Visitors can prevent audio / video content from autoplaying on sites from their browser:
- Google Chrome: Sound settings
- Microsoft Edge: Media autoplay
Next step:
Go back to the Accessibility Checklist to continue improving your site for accessibility.
Did this help?
|