Accessible Animations in WordPress: Why prefers-reduced-motion Is Not Enough

Most advice about accessible animation stops at one line: respect prefers-reduced-motion. It is good advice and it is aimed at the wrong criterion. Following it can leave you doing the optional part of the standard while failing the mandatory part, which is an unusual way to fail an audit.

Here is which rule applies to what, how to check your own site in under a minute, and what the fix actually looks like once you know the CSS everyone copies does not reach every effect.

What is prefers-reduced-motion?

It is a setting in the operating system. Someone who gets motion sick from parallax, or who finds moving interfaces hard to read, turns on a Reduce motion option in their accessibility settings. The browser passes that along to every site they visit, and a site that is paying attention turns its animation down.

Two things about it matter for what follows. It is a request the visitor makes once, silently, and a site either honors it or does not. And most people never set it, because most people do not know it exists. It protects the visitors who need it most, and it tells you nothing about everyone else.

Which accessibility rule actually applies?

The web accessibility standard, WCAG, has two criteria about motion, and they cover different things at different conformance levels. This is the distinction that most articles on this topic skip.

2.2.2 Pause, Stop, Hide, at Level A. If content moves, blinks or scrolls, and it starts automatically, and it lasts more than five seconds, and it is shown alongside other content, then the page has to give the visitor a way to pause, stop or hide it. The exception is motion that is essential to what the visitor came to do. Level A is the lowest of the three conformance levels, so any claim of accessibility conformance includes it.

2.3.3 Animation from Interactions, at Level AAA. Motion that a visitor triggers, by clicking or hovering or scrolling, should be possible to switch off. This is the criterion prefers-reduced-motion is usually reaching for. Level AAA is the highest tier and is not what conformance is normally measured against.

Both are published, and worth reading rather than taking from us: W3C on 2.2.2 Pause, Stop, Hide and W3C on 2.3.3 Animation from Interactions.

Read those together and the shape of the problem appears. A looping background starts by itself, runs indefinitely and sits behind your headline, which meets every condition in the Level A criterion. A card that lifts when you hover it starts only when a visitor asks for it, which puts it under the Level AAA one. The motion people worry about least is the one carrying the binding requirement.

Why is the preference not enough on its own?

Because the Level A criterion asks for a mechanism, and a device setting is not one. The visitor who has never heard of Reduce motion gets the full animation, and they are the majority. A site that handles the preference perfectly and offers no control has helped the small group who already knew how to help themselves.

There is a second reason, and it is the practical one. The CSS that everyone copies for this does less than it looks like it does.

We measured our own library. Most of it ignores the preference.

We run every effect in our library through a real browser twice, once normally and once with the browser asking for reduced motion, and compare what happens. The run covered all 141 effects on 14 August 2026. The results were not flattering:

• 94 effects (67%) kept animating at essentially full rate with the preference set
• 19 effects (13%) dropped their activity by three quarters or more, which is the threshold we count as respecting it
• 26 effects had no continuous motion to reduce in the first place
• 2 effects could not be measured

We publish that because a builder choosing an animation deserves to know what it does, and because the number is almost certainly not specific to us. Any library whose effects draw their own frames will land in a similar place unless every one of them was written to check the preference, and that is a per-effect decision that is easy to miss and invisible when you miss it.

You can check this claim rather than take it. Open any effect on our animations pages, set the preference using the method in the next section, and watch what the preview does.

How do I test my own site in 30 seconds?

The quickest way needs nothing installed. In Chrome or Edge, open DevTools, press Control+Shift+P (Command+Shift+P on a Mac) to open the command menu, type reduced motion, and choose Emulate CSS prefers-reduced-motion: reduce. Then reload the page and watch.

You are looking for one thing: does anything keep moving? A hero background still drifting, a marquee still scrolling, a counter still counting. Anything still in motion is an effect that never checked.

To test the way a real visitor experiences it, turn the preference on in your operating system instead. It is called Reduce motion in the accessibility settings on macOS and iOS, and it sits under the visual effects settings on Windows 11 and in the accessibility settings on Android. The exact path moves between releases, so search your settings for the word motion rather than following a menu tree from an article.

What actually fixes it?

Three things, in the order they are worth doing.

One: add the CSS. This belongs on every site and costs nothing. It switches off transitions and keyframe animation for anyone who asked for less motion.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

In Bricks, that goes in your child theme stylesheet, or in the custom CSS field on your theme styles so it applies site wide.

Two: know what that CSS does not reach. It switches off animation that CSS is running. An effect that draws its own frames keeps drawing them, because none of those properties apply to it. This is the whole explanation for the 67% above, and it is why adding the snippet and declaring the job done is the most common mistake in this area. Add the CSS, then test, and treat anything still moving as unfixed.

Three: give people a control, or do not start on your own. For anything that survives step one, the Level A criterion wants a mechanism on the page. A pause button on the section is the literal reading. Not starting the motion automatically is the version that needs no interface at all, and it happens to be the better design decision anyway.

Which effects are safe by default?

The ones that never start on their own. In the same measurement, 25 effects registered no activity at all while the page sat untouched, because each is waiting for a hover, a click, a cursor or a section scrolling into view. Nothing about them starts automatically, so the Level A criterion does not apply to them.

• ASCII Cursor (Cursor)
• Avatar (Showcase)
• Border Drift (Visual Effects)
• Card Spread (Showcase)
• Chroma Card (Visual Effects)
• Dither Cursor (Cursor)
• Gallery Spotlight (Showcase)
• Glass Cursor (Cursor)
• Glue Dots (Core Background)
• Label Cursor (Cursor)
• Lenticular Carousel (Showcase)
• Magnetic Button (Buttons)
• Page Flip (Showcase)
• Parallax Carousel (Showcase)
• Repel Text (Animated Text)
• Ripple Button (Buttons)
• Ripple Grid (Core Background)
• Scroll Reveal (Interaction)
• Social Bloom (Interaction)
• SVG Reveal (Visual Effects)
• Transition Page 2 (Transition Pages)
• Transition Page 5 (Transition Pages)
• Transition Page 6 (Transition Pages)
• Tumble Carousel (Showcase)
• Word Rotate (Animated Text)

These are the effects the Level AAA criterion would ask you to make switchable, which is the optional tier. Building your motion out of them moves you from the criterion you have to meet to the one you can choose to. They also cost the least to run, which we cover in where motion is cheap. The accessible choice and the fast choice are the same choice more often than either conversation admits.

Does the European Accessibility Act apply to me?

This question arrives attached to the previous ones, so it is worth answering carefully. The Act has applied since 28 June 2025. As of September 2026 it covers particular services rather than every website: e-commerce, banking, transport ticketing, telecommunications, e-books and audiovisual media are the ones a web builder is likely to meet. It applies based on where your customers are rather than where you are.

There is an exemption for microenterprises providing services, defined as fewer than ten people and annual turnover or balance sheet total at or under two million euros. Many freelance and small agency clients sit under it. Many online shops do not.

Where it does apply, the technical standard is EN 301 549, which incorporates WCAG 2.1 at Level AA. Level AA includes every Level A criterion, which is how 2.2.2 and your animated hero end up in the same conversation as a piece of European law. None of this is legal advice and the summary above is deliberately short. If you sell online, above those thresholds, to customers in the EU, get an audit.

Bottom line

Respect prefers-reduced-motion. Add the CSS, it takes a minute and it helps the people it reaches. Then stop treating it as the finish line, because the criterion that binds you is about content that starts on its own, and the answer it wants is a control on the page or motion that waits to be asked.

We measured our own 141 effects and 94 of them ignore the preference, so we are describing a gap we are standing in rather than one we are pointing at. The practical route out is the same for us as for you: prefer motion that waits for the visitor, keep the one automatic effect for the place that earns it, and give that one a way to stop. Our guide to animated backgrounds covers how to choose it, and whether animations slow down your site covers what it costs once you have.