{"id":8197,"date":"2025-08-22T14:44:09","date_gmt":"2025-08-22T12:44:09","guid":{"rendered":"https:\/\/www.lrob.fr\/?p=8197"},"modified":"2025-08-22T14:53:30","modified_gmt":"2025-08-22T12:53:30","slug":"animations-wordpress-gutenberg-attention-a-laccessibilite","status":"publish","type":"post","link":"https:\/\/www.lrob.fr\/en\/blog\/internet\/wordpress\/animations-wordpress-gutenberg-attention-a-laccessibilite\/","title":{"rendered":"WordPress Gutenberg animations: take care with accessibility!"},"content":{"rendered":"<p>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.<\/p>\n\n\n\n<p class=\"translation-block\">But beware: improperly configured, animations can harm <strong>the accessibility of a website<\/strong>. And an inaccessible site means not only excluded visitors, but also lost potential customers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Which plugin should you use to animate your Gutenberg blocks?<\/h2>\n\n\n\n<p class=\"translation-block\">For a simple, effective and free extension, I unhesitatingly recommend the plugin <a href=\"https:\/\/wordpress.org\/plugins\/animations-for-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Animations for Blocks<\/strong><\/a>.<\/p>\n\n\n\n<p>Why?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Direct integration into the Gutenberg editor.<\/li>\n\n\n\n<li>A wide range of effects (fade, slide, zoom, bounce...).<\/li>\n\n\n\n<li>Intuitive block-by-block parameterization.<\/li>\n\n\n\n<li>No heavy dependency or huge impact on performance.<\/li>\n\n\n\n<li>Excellent support with an active, attentive developer.<\/li>\n<\/ul>\n\n\n\n<p class=\"translation-block\">Simply put: it's the ideal extension for adding WordPress animations to Gutenberg <strong>quickly and cleanly<\/strong>.<\/p>\n\n\n\n<p class=\"translation-block\">For those still using builders like Elementor, incompatible with Gutenberg blogs, I'll be blunt: <a href=\"https:\/\/www.lrob.fr\/en\/blog\/builders-wordpress-la-face-cachee\/\" target=\"_self\">it's time to rethink your policy<\/a>, pack up your prejudices and turn to <a href=\"https:\/\/www.lrob.fr\/en\/doc\/webmastering\/wordpress-docs\/publishing-pages-and-articles-with-gutenberg\/\" target=\"_self\">the future of WordPress with Gutenberg<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Caution: animations hamper accessibility<\/h2>\n\n\n\n<p class=\"translation-block\">On modern systems (Windows, macOS, Linux, iOS, Android...), there's an accessibility option to <strong>reduce or remove animations<\/strong>.<\/p>\n\n\n\n<p>When enabled, the browser sends this CSS directive:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>prefers-reduced-motion: reduce<\/code><\/pre>\n\n\n\n<p class=\"translation-block\">\ud83d\udc49 In practical terms, this means that your site <strong>must adapt its behavior<\/strong> and remove animations if the user requests them.<\/p>\n\n\n\n<p>Why is this important?<\/p>\n\n\n\n<p>Because some people can suffer physical discomfort:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>dizziness,<\/li>\n\n\n\n<li>nausea,<\/li>\n\n\n\n<li>migraines,<\/li>\n\n\n\n<li>or disorientation.<\/li>\n<\/ul>\n\n\n\n<p>Ignoring this rule will give them a hard time and make your site unusable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Does WordPress support motion reduction?<\/h2>\n\n\n\n<p>WordPress is natively compatible with this motion reduction feature.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>But many WordPress plugins still don't follow the guideline.<\/p>\n\n\n\n<p>So how do you get the best of both worlds, with beautiful animations that are disabled for people who can't stand them?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Good news: Animations for Blocks is now compliant \u2705<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>But I didn't count on LRob! I spotted the problem and contacted the developer to suggest a fix. His response?<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\"That's a fair point, thank you!<br>Added in version 1.2.3.\"<\/p>\n<cite>Ska-Dev - <a href=\"https:\/\/wordpress.org\/support\/topic\/accessibility-use-prefers-reduced-motion-reduce-or-add-a-switch\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WordPress.org forum<\/a><\/cite><\/blockquote>\n\n\n\n<p class=\"translation-block\">Since version 1.2.3, <strong>Animations for Blocks has been fully compliant with accessibility standards<\/strong>.<\/p>\n\n\n\n<p>That's the advantage of using a plugin supported by the WordPress community: responsive, attentive and constantly improving.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">In a nutshell:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"translation-block\">Always check that your animations respect the <code>prefers-reduced-motion<\/code> directive. If not, notify the developers or change your extension.<\/li>\n\n\n\n<li class=\"translation-block\">To add <strong>WordPress animations to Gutenberg<\/strong>, the <strong><a href=\"https:\/\/wordpress.org\/plugins\/animations-for-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Animations for Blocks<\/a><\/strong> plugin is an excellent choice. The plugin has been <strong>accessibility-friendly<\/strong> since version 1.2.3 (and we're proud to have contributed \ud83d\ude09 ).<\/li>\n\n\n\n<li class=\"translation-block\">Choose a web host <a href=\"https:\/\/www.lrob.fr\/en\/\" target=\"_self\">involved in WordPress accessibility<\/a>.<\/li>\n<\/ul>\n\n\n\n<p>\ud83d\udc49 Want a high-performance, lively and accessible WordPress site?<\/p>\n\n\n\n<p class=\"translation-block\">Then entrust your hosting and maintenance to a <strong>WordPress specialist committed to accessibility<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.lrob.fr\/en\/\">Discover LRob<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>","protected":false},"excerpt":{"rendered":"<p>Adding animations has become easy for WordPress Gutenberg, but beware: they must be deactivatable and follow the visitor's system guidelines.<\/p>","protected":false},"author":1,"featured_media":8199,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-8197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/posts\/8197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/comments?post=8197"}],"version-history":[{"count":4,"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/posts\/8197\/revisions"}],"predecessor-version":[{"id":8204,"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/posts\/8197\/revisions\/8204"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/media\/8199"}],"wp:attachment":[{"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/media?parent=8197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/categories?post=8197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/tags?post=8197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}