WordPress Gutenberg animations: pay attention to 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 be detrimental to website accessibility. And an inaccessible site means not only lost 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, which are incompatible with Gutenberg blogs, I'll be blunt: it's time to review 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 is an accessibility option allowing you to reduce or delete animations.

When enabled, the browser sends this CSS directive:

prefers-reduced-motion: reduce

👉 In concrete terms, this means that your site must adapt its behavior and delete animations if requested by the user.

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 fully complies 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 comply with the prefers-reduced-motion. If this is not the case, notify the developers or change your extension.
• To add WordPress animations on Gutenberg, plugin Animations for Blocks is an excellent choice. The plugin is 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?

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

---