2.3.3 Animations from Interactions (AAA)

Success Criterion 2.3.3 Animation 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.

Intent:

The intent of this success criterion is to give people who may be adversely affected by page animations the ability to turn off those animations. Animations included in this success criterion include parallax effects when scrolling, where the page foreground and background move at different speeds or in different directions, and animations triggered by user clicks.

This can be accomplished in a couple of ways. One method is to place a button/toggle on the web page that gives users the option to disable the animations. A second option has limited-but-growing support: using the “prefers-reduced-motion” CSS media query. Users can set a preference for reduced motion in their operating system (not their web browser), which web browsers can then indicate to web pages. As of April 2019, the “prefers-reduced-motion” media query is supported in Safari on desktop and mobile, in Firefox on desktop, and is included in the beta for Chrome 74.

It is important to make sure that however animation is reduced or removed, it does not prevent users from accessing content on the page.

Note that this success criterion specifically pertains to animations that are “triggered by interaction,” meaning as a result of user actions. SC 2.2.2 Pause, Stop, Hide (level A) governs page information that scrolls, blinks, or moves automatically without user interaction, as well as auto-updating content.

Exceptions:

Basic page scrolling is considered an essential function, and is excluded from this requirement.

Additionally, for web pages where animations are a part of the purpose of the page, the animations are considered essential. Examples include online platforms for creating slide decks with transitions between slides, or where users create the animation themselves.

Who it helps:

Users with vestibular disorders who may experience nausea, dizziness, or other adverse effects as a result of movement on screen.

Example: Reduced Motion toggle

Parallax scrolling on web pages, where the foreground scrolls at a different speed than the background, can trigger reactions in people with vestibular disorders. Other effects such as zooming new content onto the screen, or a page-turning effect when going to a new section of content, help emphasize the action that is occurring, but users should have the option to disable these effects.

Because browser support for the "prefers-reduced-motion" media query is incomplete, web designers who want to use features such as parallax scrolling on their website can provide a toggle on the webpage that allows users to disable parallax scrolling in favor of normal scrolling. However, be sure that doing so does not prevent user access to any content that may no longer scroll into view.