2.3.3 Animation from Interactions

1. What is the goal of this criterion?

Animations are like glitter in the digital world – they look great, but they can also really get in your eyes. While most people enjoy slick parallax effects and smooth transitions, some people literally get sick from them. Dizziness, nausea and headaches are just some of the reactions that excessive motion on screen can trigger.

The goal of Success Criterion 2.3.3 is therefore clear: people should be in control of motion animation triggered by their own interactions. Anyone affected should be able to turn this motion off – unless it’s truly essential.

2. What exactly does it require?

It covers motion animation triggered by an interaction – such as scrolling, clicking or hovering. Motion animation means adding steps between two states to create the illusion of movement – an element slides into place, grows, shrinks or rotates.

Pure changes in colour or opacity are not included. Fading in or out is therefore not motion animation in the sense of this criterion.

The Level AAA requirement is clear:

All motion animation triggered by interaction must be possible to disable – unless it’s essential to the functionality or the information being conveyed.

What does that mean in practice?

• Parallax scrolling: Background elements move differently from the foreground as you scroll – must be possible to disable.
• Elaborate page transitions: Content that slides in or out, zooms or rotates when changing pages – must be possible to disable.
• Hover animations: Noticeable motion effects when you point at an element – must be possible to disable.
• Scroll-triggered animations: Elements that fly into view as you scroll – must be possible to disable.

Exceptions only apply if the animation itself is essential – for example in an animation editor, where previewing the motion is the whole point.

This criterion is distinct from Pause, Stop, Hide: that one is about motion that starts on its own. 2.3.3 is about motion in response to an action.

3. Why does it matter for accessibility?

Imagine visiting a website, but every time you scroll the elements start dancing salsa and you get so dizzy you have to turn off your computer. That’s how it can feel for people with vestibular disorders (disorders of the sense of balance).

Controllable animations improve accessibility because they:

• protect people with vestibular disorders from dizziness, nausea and headaches,
• help people with attention disorders focus on the content,
• reduce distraction for people with cognitive disabilities,
• give everyone a more relaxed experience.

The effects can be severe: some people need bed rest to recover after too much motion on screen. This isn’t a minor inconvenience but a genuine health risk.

4. How to meet the criterion

The good news: you don’t have to give up all animation – you just need to make sure it can be turned off. Here are three proven approaches:

Option 1: A global switch

• Offer a visible “Reduce animations” or “Turn off motion” setting.
• Make it easy to find, for example at the top of every page or in the main menu.
• The setting should apply site-wide and be remembered.

Option 2: Respect the system setting with prefers-reduced-motion

• Use the CSS media query @media (prefers-reduced-motion: reduce).
• It kicks in automatically when someone has enabled “Reduce motion” in their operating system.
• Current browsers and operating systems support this setting.
• In JavaScript, check it with window.matchMedia("(prefers-reduced-motion: reduce)") – important for script-driven animations.

Option 3: Avoid it entirely

• Skip non-essential motion animation.
• Use instant state changes or simple crossfades instead.
• This is often the simplest and safest solution.

In practice:

/* Animations on by default */
.animated-element {
  transition: transform 0.3s ease;
}

/* Turn off motion when “Reduce motion” is enabled */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
  }
}

What to avoid:

• Parallax effects that can’t be turned off
• Excessive scroll animations without control
• Motion-heavy transitions as the default with no alternative

For flashing effects, the strict thresholds of Three Flashes or Below Threshold also apply.

5. Why this criterion matters for businesses

Success Criterion 2.3.3 shows once again that accessibility isn’t an end in itself – it brings tangible benefits.

1. A wider audience

Balance disorders are more common than many people think and become more frequent with age. Controllable animations make your website usable for these people and show that you take responsibility.

2. Smoother rendering and more control

Fewer animations often mean smoother rendering – especially on mobile devices and older hardware. And users appreciate being able to decide how much motion they want to see.

3. Using established standards

prefers-reduced-motion is a standardised CSS media query that takes little effort to implement. Respecting your users’ settings shows technical care.

And finally: AAA criteria like 2.3.3 are not mandatory under the European Accessibility Act (EAA) or its German implementation, the Barrierefreiheitsstärkungsgesetz (BFSG), since the harmonised standard EN 301 549 references WCAG 2.1 Level AA. Because implementing it with prefers-reduced-motion is so simple, it’s almost always worth it anyway. This is general information, not legal advice.

6. The success criterion in the W3C’s words

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.

In short: motion animation triggered by an interaction must be possible to turn off – unless the animation is essential to the functionality or the information.