Animations WordPress Gutenberg : attention à l’accessibilité !

Les animations sont un excellent moyen de rendre un site WordPress plus vivant et plus engageant. Avec un simple plugin pour Gutenberg, il est désormais facile d’ajouter des effets visuels élégants sans écrire une seule ligne de code.

Mais attention : mal configurées, les animations peuvent nuire à l’accessibilité d’un site web. Et un site peu accessible, ce sont non seulement des visiteurs exclus, mais aussi des clients potentiels perdus.

Quel plugin utiliser pour animer ses blocs Gutenberg ?

Pour une extension simple, efficace et gratuite, je recommande sans hésiter le plugin Animations for Blocks.

Pourquoi ?

• Intégration directe dans l’éditeur Gutenberg.
• Une large palette d’effets (fade, slide, zoom, bounce…).
• Paramétrage intuitif bloc par bloc.
• Pas de dépendance lourde ni d’impact énorme sur les performances.
• Excellent support avec développeur actif et à l’écoute.

En clair : c’est l’extension idéale pour ajouter des animations WordPress sur Gutenberg rapidement et proprement.

Pour ceux qui utilisent encore des builders comme Elementor, incompatibles avec les blogs Gutenberg, je vais être cash : il est temps de revoir votre politique, de remballer vos préjugés et de vous tourner vers l’avenir de WordPress avec Gutenberg.

Attention : les animations nuisent à l’accessibilité

Sur les systèmes modernes (Windows, macOS, Linux, iOS, Android…), il existe une option d’accessibilité permettant de réduire ou supprimer les animations.

Lorsque l’option est activée, le navigateur envoie cette directive CSS :

prefers-reduced-motion: reduce

👉 Concrètement, ça signifie que ton site doit adapter son comportement et supprimer les animations si l’utilisateur en fait la demande.

Pourquoi c’est important ?

Parce que certaines personnes peuvent subir des désagréments physiques :

• vertiges,
• nausées,
• migraines,
• ou désorientation.

Ignorer cette règle, c’est leur faire passer un sale quart d’heure et leur rendre ton site inutilisable.

WordPress est-il compatible avec la réduction de mouvement ?

WordPress est nativement compatible avec cette fonctionnalité la réduction de mouvement.

En particulier, le bloc « Bannière » qui peut passer en mode « Arrière-plan fixe » peut causer cette gêne importante pour les personnes concernées, en créant une discordance entre l’arrière plan et le texte en surimpression. Lorsque l’option d’accessibilité de l’utilisateur est active, l’arrière-plan n’est plus fixe, il défile uniformément avec le reste du texte.

Mais de nombreux plugins WordPress ne suivent pas encore la directive.

Alors comment peut-on obtenir le meilleur des deux mondes, en ayant de belles animations, mais qui soient désactivées pour les personnes ne les supportant pas ?

Bonne nouvelle : Animations for Blocks est désormais compliant ✅

Depuis sa création, le plugin Animations for Blocks ne respectait pas cette directive d’accessibilité. Les animations continuaient à s’afficher, même si l’utilisateur avait demandé leur suppression.

Mais c’était sans compter sur LRob ! J’ai repéré le problème, et j’ai contacté le développeur pour lui proposer une correction. Sa réponse ?

“C’est un point justifié, merci !
Ajouté dans la version 1.2.3.”

Ska-Dev – Forum WordPress.org

Depuis la version 1.2.3, Animations for Blocks est parfaitement conforme aux standards d’accessibilité.

C’est tout l’avantage d’utiliser un plugin soutenu par la communauté WordPress : réactif, à l’écoute, et en constante amélioration.

Certains recommandent d’aller encore plus loin avec une fonction « opt-out » pour les personnes utilisant un ordinateur public. Une option qui n’est pas encore disponible mais doit pouvoir se développer sur-mesure si besoin.

En résumé :

• Vérifie toujours que tes animations respectent la directive prefers-reduced-motion. Si ce n’est pas le cas, préviens les développeurs ou change d’extension.
• Pour ajouter des animations WordPress sur Gutenberg, le plugin Animations for Blocks est un excellent choix. Le plugin est accessibility-friendly depuis la version 1.2.3 (et nous sommes fiers d’y avoir contribué 😉).
• Choisis un hébergeur web impliqué dans l’accessibilité WordPress.

👉 Tu veux un site WordPress performant, animé et accessible ?

Alors confie ton hébergement et maintenance à un spécialiste WordPress impliqué dans l’accessibilité.