Animation from Interactions
Summary:
WCAG 2.3.3, "Animation from Interactions," targets the accessibility concerns related to motion animation triggered by user interactions. This guideline, falling under Level AAA, is particularly important for users who experience discomfort or distraction from motion animations, such as those with vestibular disorders.
What:
This criterion requires that web content must allow users to disable any motion animation triggered by interactions unless the animation is essential to the functionality or the information being conveyed. It acknowledges the impact of motion on accessibility and user experience, catering to users who are sensitive to motion on screen.
Why:
Motion animations, often initiated by user actions like scrolling or clicking, can be problematic for many users. They can cause discomfort, nausea, or distraction, particularly for those with vestibular disorders. By providing options to limit or turn off these animations, digital content becomes more inclusive and comfortable for a broader audience.
Examples and Scenarios:
- Parallax Scrolling: On a website with parallax scrolling effects, provide an option to browse the site with these effects disabled.
- Animated Dropdown Menus: Ensure that users can choose to have dropdown menus without animation.
- Button Interaction Effects: Offer a mode that disables animated effects on buttons or links when hovered over or clicked.
How to Comply:
- Websites: Implement a preference setting that allows users to disable motion animations. Use CSS media queries or JavaScript to control animation playback based on user preferences.
- Mobile Apps: Provide an option in the app settings to reduce or remove animations related to user interactions.
- Software Applications: Enable functionality that allows users to choose a reduced motion or no animation mode for interactive elements.
Exceptions:
- Essential Animations: If the animation is essential for conveying information or for the functionality of the content (like a video tutorial), then disabling it might not be practical. In such cases, clearly communicate the purpose of the animation and ensure it's as minimally distracting as possible.