Our series on the new WCAG 2.1 Success Criteria continues with the last of the success criteria to focus on cognitive accessibility. Level AAA success criterion 2.3.3, Animations from Interactions, limits unexpected motion. It falls under guideline 2.3, Seizures and Physical Reactions.
2.3 Seizures and Physical Reactions
Do not design content in a way that is known to cause seizures or physical reactions.
2.3.3 Animations from Interactions (Level AAA)
Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
Overview
Moving content can distract many users. Others may have more severe reactions such as dizziness, nausea, or headaches. Existing success criterion 2.2.2 Pause, Stop, Hide requires that users can pause or stop any motion initiated by the web page. This new success criterion applies to motion that occurs in response to a user action.
The motion trigger could be a normal action such as mouse over, focus, scrolling, or button press. The problem occurs when this interaction causes additional, unexpected motion. One example is a page turn animation when the users presses the next button in a sequence of steps. A shopping cart sidebar that follows the user as they scroll down through a restaurant take-out menu can be very distracting. The site must warn the user of this motion before it occurs and provide a mechanism to disable the motion. A simplified example can be see at CSS Tricks. Note, this example was created before WCAG 2.1 and thus, there is no warning or mechanism to disable the moving content.
Developers can still use animation for activities that require motion to convey information. Action games are a common example. A science simulation may need animation to illustrate a concept.
Example
We have implemented a live example on this blog post. We are providing advanced notion of the movement. You must press the button to enable the example animation. When you do, the arrow button below is animated on mouse over or on focus. When you mouse over or focus the button it flips from an arrow to the word, “Next”. The animation is triggered when you interact with the arrow button. It is not normal button behavior and would be unexpected.
This example adapted from Card Flip animation by Shay Howe.
Who Benefits?
People who experience severe reactions due to unexpected motion will benefit. People with cognitive disabilities who get distracted by movement can remain focused.
Takeaways
Only trigger animation by interaction when it is absolutely necessary. When including non-essential animation, notify users and provide a way to disable it before it occurs.
For Developers
The prefers-reduced-motion CSS media query is one way to prevent unwanted animations. Unfortunately, it is not currently supported in all browsers. Developers should start using it now in addition to other mechanisms. This will build the case for support by more vendors.
