2.3.3 Animations from Interactions (AAA)

2.3.3 Animations from Interactions (AAA)

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.