GUIDELINES 2.2.2, 2.3
Animations on the web are images that lead to the creation of the illusion of movement, to give a sense of a smooth transition, or to attract user attention. This excludes changes of color, blurring, or opacity. This guideline goes over how to create a page with this in mind, as well as gives insights on how, when. and why you would want use or avoid animations.
Who is impacted?
Users with Vestibular Disorder are primarily impacted. Those with attention deficit disorders, or photosensitive seizure disorders are also impacted.
How to test?
Remain on a page with animations present. Verify that there is a mechanism present that allows users to either pause, turn off, or hide animations.
Pause, Stop, Hide
The purpose of this criterion is to stop any distractions during interactions. For any moving, blinking, scrolling, or auto-updating information, the following statements below must be true.
Moving, blinking, scrolling: For any of the following type of information that either starts automatically, lasts for more than five seconds, or is presented in parallel with other content, there must be an option available to pause, stop, or hide it (unless movement, blinking, and scrolling is essential).
Auto-updating: For any auto-updating information that either starts automatically, or is presented in parallel with other content, there must be an option available to pause, stop, or hide it (unless auto-updating is essential).
In order for an element to be considered “paused”, the mechanism should not tie up the user or the focus so that the page cannot be used.
One key component of this criterion is that pages do not contain anything that flashes more than three times in any one-second period, to further reduce the chance of seizures. It is important to note that seizures cannot be completely eliminated. However, by having no more than three flashes in a second, it reduces the chances of a person having a seizure.
Another important thing to note is the difference between “blink” and “flash”. “Blink” refers to a slow, repeating change, that primarily distracts the user. “Flash” on the other hand, refers to a change that could cause a seizure if they were bright enough or lasted long enough.
A final thing to note is that people who are prone to seizures are more sensitive to red flashing than to other colors.
Animation from Interactions
When motion animations are present on a web page, it is important that any of these animations triggered by an interaction can be disabled by the user. The only time that it wouldn’t have this option, is when the animation is essential to the functionality or information being presented.
Certain users experience a greater level of distraction or nausea than others from animated content. This is especially the case for people with Vestibular Disorder, as they are more prone to distraction, dizziness, nausea, and headaches.
One form of animation that is often non-essential is called parallax scrolling. This is where a user can scroll, but the background moves at a different rate to the foreground. For any non-essential animations such as this, it is important that authors provide users with a control to turn off animations.
Only animation that is essential to functionality or information on the web page is allowed to be presented to the users.