Loading...
Loading content...
Loading content...
Users can disable motion animations triggered by interaction.
Why it matters: Motion can cause vestibular disorders (dizziness, nausea).
Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
What This Means: This success criterion requires that motion animations that are triggered by user interactions (like hover effects, transitions, or parallax scrolling) must be able to be disabled by users, unless the animation is essential to the functionality or information being conveyed. This typically means respecting the prefers-reduced-motion CSS media query.
Why It's Important: Motion animations can cause vestibular disorders (dizziness, nausea, vertigo) in some users. Users with vestibular disorders may experience discomfort or be unable to use content with motion animations. By allowing users to disable these animations, we ensure the content is accessible to everyone.
Use the prefers-reduced-motion media query to detect user preferences and disable motion animations when requested. Provide settings to disable animations. For essential animations (like those that convey important information), ensure they can still be understood when motion is reduced. Test with users who have vestibular disorders to verify accessibility.
This criterion ensures that users with vestibular disorders can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Page transitions always animate, even when user prefers reduced motion.
<div class="page-transition" style="animation: slide 0.5s;">
Content
</div>Animations are disabled when user prefers reduced motion.
<div class="page-transition">
Content
</div>
<style>
@media (prefers-reduced-motion: reduce) {
.page-transition {
animation: none;
}
}
</style>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.3.3 Animation from Interactions are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
If an animation is triggered by user interaction, it's essential.
Many interaction-triggered animations are decorative, not essential. Only animations required for functionality (like showing/hiding content) are truly essential.
prefers-reduced-motion only affects CSS animations.
prefers-reduced-motion should affect all motion, including JavaScript animations, transitions, and scroll effects.
Animations that don't respect prefers-reduced-motion.
Use CSS media query @media (prefers-reduced-motion: reduce) to disable animations. Also check JavaScript animations and disable them when the preference is set.
No way to disable motion animations triggered by interaction.
Respect prefers-reduced-motion for all animations. Provide controls to disable motion if the media query isn't sufficient.
Note: These are official W3C resources for 2.3.3. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.3.3 Animation from Interactions correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Operable PrincipleGuideline
2.3 Seizures and Physical Reactions