2.3.3 Animation from Interactions
Introduction
This document provides information about the Acquia Web Governance accessibility check:
- Can users turn off motion animation triggered by interaction?
What
This check ensures that users can disable non-essential motion animations that are triggered by interaction. When a user interacts with an element, any resulting animation must either be essential to the functionality or provide a mechanism for the user to turn it off.
Why
Motion animations can cause significant distress or physical symptoms for certain users.
Who
Affected users
This check affects individuals with:
- Cognitive or attention disorders: Who can can experience distractions from moving elements, which makes it difficult for them to focus on the primary content.
- Vestibular disorders: Who may experience dizziness, nausea, or headaches when exposed to unexpected motion.
Examples
Pass example
The animation is essential for understanding the content, such as a physics simulation. Alternatively, the site provides a global setting or a specific button to disable decorative interactions.
<button onclick="disableAnimations()">Disable Animations</button>
Fail example
A decorative parallax effect or sliding transition occurs on every click without any way for the user to stop or hide it.
<div class="moving-element" onmouseover="startInfiniteLoop()">...</div>
How
This section provides information on how to review and fix the issue.
How to review it
- Click, hover, and scroll through the page and identify any resulting animations.
- Determine if the animation is essential. If it is purely decorative and cannot be turned off, the check fails.
- Check if the website adheres to the prefers-reduced-motion CSS media query.
For instructions on how to review the issue, visit How to review an accessibility issue.
How to fix it
- Provide a visible toggle or setting that allows users to disable non-essential animations across the site.
Use CSS media queries to automatically disable animations for users who have expressed a preference for reduced motion in their operating system settings.
@media (prefers-reduced-motion: reduce) { .animation { animation: none; } }
- Remove unnecessary animations that do not help the user to understand or use the content.
Additional resources
Can users turn off motion animation triggered by interaction?
2.3.3 Animation from Interactions
Introduction
This document provides information about the Acquia Web Governance accessibility check:
- Can users turn off motion animation triggered by interaction?
What
This check ensures that users can disable non-essential motion animations that are triggered by interaction. When a user interacts with an element, any resulting animation must either be essential to the functionality or provide a mechanism for the user to turn it off.
Why
Motion animations can cause significant distress or physical symptoms for certain users.
Who
Affected users
This check affects individuals with:
- Cognitive or attention disorders: Who can can experience distractions from moving elements, which makes it difficult for them to focus on the primary content.
- Vestibular disorders: Who may experience dizziness, nausea, or headaches when exposed to unexpected motion.
Examples
Pass example
The animation is essential for understanding the content, such as a physics simulation. Alternatively, the site provides a global setting or a specific button to disable decorative interactions.
<button onclick="disableAnimations()">Disable Animations</button>
Fail example
A decorative parallax effect or sliding transition occurs on every click without any way for the user to stop or hide it.
<div class="moving-element" onmouseover="startInfiniteLoop()">...</div>
How
This section provides information on how to review and fix the issue.
How to review it
- Click, hover, and scroll through the page and identify any resulting animations.
- Determine if the animation is essential. If it is purely decorative and cannot be turned off, the check fails.
- Check if the website adheres to the prefers-reduced-motion CSS media query.
For instructions on how to review the issue, visit How to review an accessibility issue.
How to fix it
- Provide a visible toggle or setting that allows users to disable non-essential animations across the site.
Use CSS media queries to automatically disable animations for users who have expressed a preference for reduced motion in their operating system settings.
@media (prefers-reduced-motion: reduce) { .animation { animation: none; } }
- Remove unnecessary animations that do not help the user to understand or use the content.
Additional resources
Web Governance