WCAG (Level AAA) SC 2.3.3 Animation from Interactions (w3.org)
Issue description
WCAG 2.3.3, “Animation from Interactions” focuses on animations triggered by user interactions, such as mouse movements or button clicks. It recognizes that such animations can be problematic for some users, particularly those with vestibular disorders (which affect balance and spatial orientation) or cognitive disabilities.
Many websites use animations to provide visual feedback or enhance the user experience. However, these animations can cause issues for some users:
- Vestibular disorders: Animations, especially those with parallax scrolling or rapid movement, can trigger dizziness, nausea, and headaches for people with vestibular disorders.
- Cognitive disabilities: Animations can be distracting and overwhelming for people with cognitive disabilities, making it difficult to focus on the content or task at hand.
- Motion sickness: Some users experience motion sickness when viewing certain types of animations.
WCAG requirements
This guideline requires that, for any animation that is triggered by user interaction and lasts longer than 5 seconds, users should be able to:
- Disable the animation: Turn off the animation entirely.
- Pause the animation: Stop the animation temporarily.
Exceptions
- Essential animations: Animations that are essential to the functionality or purpose of the content are exempt (e.g., a progress bar indicating loading).
- User-controlled animations: Animations that are fully controlled by the user (e.g., a video player with playback controls) are exempt.
Benefits
- Reduced discomfort: Disabling or pausing animations can prevent discomfort for users with vestibular disorders or motion sickness.
- Improved focus: It can help users with cognitive disabilities focus on the content and avoid distractions.
- Greater control: It gives users control over their visual experience and allows them to customize it to their needs.
While this is a Level AAA criterion, meaning it’s a higher level of accessibility, it’s an important consideration for creating a more inclusive and comfortable online experience for everyone.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.3.3, “Animation from Interactions” involves providing users with control over animations triggered by their actions, such as mouse movements or button clicks. This is particularly important for users with vestibular disorders or cognitive disabilities who may find animations distracting or disorienting. Here’s how:
Provide controls to disable or pause
- Disable animation: Offer a user setting or control to turn off animations completely. This could be a toggle switch, checkbox, or button that allows users to disable animations site-wide or for specific sections.
- Pause animation: Provide a control to pause ongoing animations. This could be a “pause” button or a mechanism that stops the animation when the user interacts with it (e.g., hovering over the animation).
Limit animation duration
- Keep it brief: If possible, keep animations short (under 5 seconds) to minimize potential discomfort or distraction.
- Fade out: Use gradual fade-out effects to smoothly end animations instead of abrupt stops.
Consider animation alternatives
- Static elements: If the animation is purely decorative, consider replacing it with a static alternative.
- Subtle transitions: Use subtle transitions or animations that don’t involve rapid movement or drastic changes in direction.
User preferences
- Remember preferences: Store the user’s animation preferences (e.g., disabled or paused) so they don’t have to adjust the settings each time they visit the website.
Testing
- Assistive technology testing: Test the animation controls with screen readers to ensure they are accessible and usable.
- User testing: Conduct user testing with people with vestibular disorders or cognitive disabilities to get feedback on the accessibility of the animations.
Examples
- Parallax scrolling: Provide a control to disable parallax scrolling effects.
- Animated transitions: Offer a setting to turn off animated transitions between pages or sections.
- Hover effects: Allow users to disable hover effects that trigger animations.
By implementing these techniques, you give users control over their visual experience, reduce potential discomfort or distractions, and make your website more accessible to everyone.
