WordPress Gutenberg animations: take care with accessibility!

Animations are a great way to make a WordPress site more lively and engaging. With a simple plugin for Gutenberg, it's now easy to add elegant visual effects without writing a single line of code.

But beware: improperly configured, animations can harm the accessibility of a website. And an inaccessible site means not only excluded visitors, but also lost potential customers.

Which plugin should you use to animate your Gutenberg blocks?

For a simple, effective and free extension, I unhesitatingly recommend the plugin Animations for Blocks.

Why?

• Direct integration into the Gutenberg editor.
• A wide range of effects (fade, slide, zoom, bounce...).
• Intuitive block-by-block parameterization.
• No heavy dependency or huge impact on performance.
• Excellent support with an active, attentive developer.

Simply put: it's the ideal extension for adding WordPress animations to Gutenberg quickly and cleanly.

For those still using builders like Elementor, incompatible with Gutenberg blogs, I'll be blunt: it's time to rethink your policy, pack up your prejudices and turn to the future of WordPress with Gutenberg.

Caution: animations hamper accessibility

On modern systems (Windows, macOS, Linux, iOS, Android...), there's an accessibility option to reduce or remove animations.

When enabled, the browser sends this CSS directive:

prefers-reduced-motion: reduce

👉 In practical terms, this means that your site must adapt its behavior and remove animations if the user requests them.

Why is this important?

Because some people can suffer physical discomfort:

• dizziness,
• nausea,
• migraines,
• or disorientation.

Ignoring this rule will give them a hard time and make your site unusable.

Does WordPress support motion reduction?

WordPress is natively compatible with this motion reduction feature.

In particular, the "Banner" block, which can be switched to "Fixed background" mode, can cause significant discomfort for those affected, by creating a mismatch between the background and the overlay text. When the user accessibility option is active, the background is no longer fixed, but scrolls uniformly with the rest of the text.

But many WordPress plugins still don't follow the guideline.

So how do you get the best of both worlds, with beautiful animations that are disabled for people who can't stand them?

Good news: Animations for Blocks is now compliant ✅

Since its creation, the Animations for Blocks plugin had not complied with this accessibility directive. Animations continued to be displayed, even if the user had requested their removal.

But I didn't count on LRob! I spotted the problem and contacted the developer to suggest a fix. His response?

"That's a fair point, thank you!
Added in version 1.2.3."

Ska-Dev - WordPress.org forum

Since version 1.2.3, Animations for Blocks has been fully compliant with accessibility standards.

That's the advantage of using a plugin supported by the WordPress community: responsive, attentive and constantly improving.

Some recommend going even further with an "opt-out" function for people using public computers. This option is not yet available, but should be able to be developed on a bespoke basis if required.

In a nutshell:

• Always check that your animations respect the prefers-reduced-motion directive. If not, notify the developers or change your extension.
• To add WordPress animations to Gutenberg, the Animations for Blocks plugin is an excellent choice. The plugin has been accessibility-friendly since version 1.2.3 (and we're proud to have contributed 😉 ).
• Choose a web host involved in WordPress accessibility.

👉 Want a high-performance, lively and accessible WordPress site?

Then entrust your hosting and maintenance to a WordPress specialist committed to accessibility.