Un reflet doré sur un bouton peut signaler une action ; une rotation sans fin près d’un paragraphe peut concurrencer la lecture. La différence n’est pas le coût apparent de l’effet, mais ce qu’il accomplit. Avant d’ajouter une animation, terminez cette phrase : « Ce mouvement aide une personne à comprendre… » Si aucune fin claire ne vient, l’effet est décoratif et doit s’effacer devant le contenu. C’est une méthode de décision éditoriale, pas une promesse d’amélioration des ventes.
Établissez l’action avant l’effet
Prenez une carte d’article. Son titre explique le sujet, son extrait donne une raison de lire et un lien visible ouvre le texte complet. Un bref changement de couleur au survol peut renforcer cette action. Mais si le lien ressemble à du texte ordinaire sans son scintillement, la conception de base doit être revue. Vérifiez d’abord le contraste, le libellé et la position ; ajoutez le mouvement ensuite. Un téléphone n’a pas de survol permanent de la souris : l’action principale doit donc rester compréhensible sans lui.
Posez trois questions
Qu’est-ce qui lance l’animation : le chargement de la page, le défilement ou une action délibérée ? Quand se termine-t-elle ? Le résultat restera-t-il compréhensible sans mouvement ? Pour un menu, l’état ouvert visible importe davantage qu’une longue entrée du panneau. Un message de confirmation a besoin de mots, pas seulement d’une étincelle qui disparaît. Dans une liste de vérification de conception, séparez les effets décoratifs de ceux qui communiquent un changement d’état. La discussion devient ainsi plus utile qu’un simple échange de goûts personnels.
Réduire le mouvement ne doit pas supprimer l’expérience
MDN décrit prefers-reduced-motion comme un moyen de respecter la préférence d’un appareil pour moins de mouvements non essentiels. Cela ne corrige pas automatiquement un site : concepteurs et développeurs doivent décider d’une alternative. Arrêtez une rotation ou remplacez une grande transition en déplacement par une apparition immédiate, tout en conservant les libellés, l’accès au menu et des états de boutons clairs. Ne masquez pas un bloc animé entier s’il contient aussi des informations utiles. Vérifiez les effets pilotés par JavaScript autant que les animations CSS.
Donnez aux visiteurs un contrôle approprié
Le critère WCAG 2.2.2, de niveau A, concerne les informations en mouvement qui démarrent automatiquement, durent plus de cinq secondes et apparaissent à côté d’autres contenus. Dans les conditions qu’il définit, il faut pouvoir les mettre en pause, les arrêter ou les masquer, sauf si le mouvement est essentiel. Les informations mises à jour automatiquement ont des conditions distinctes. Cela ne constitue pas une autorisation générale pour toutes les animations de moins de cinq secondes. Le critère 2.3.3, de niveau AAA, traite séparément de la désactivation des animations non essentielles déclenchées par une interaction. Un seul interrupteur ne démontre pas la conformité WCAG de tout un site.
Une vérification pratique avant publication
Suivez le même parcours avec les réglages de mouvement ordinaires, puis avec la réduction des animations activée : ouvrez le menu, lisez une carte, consultez un article et revenez. Vérifiez que le contenu reste disponible et que les commandes conservent des états compréhensibles. Recommencez au clavier et sur téléphone. Lorsque des commandes de mouvement existent, vérifiez leur accessibilité et la clarté de leurs libellés. Enfin, observez la page après une minute de lecture : un effet séduisant au départ peut devenir envahissant. L’objectif n’est pas de retirer la personnalité du site, mais de permettre de l’utiliser confortablement.