L’animation doit être une option, pas une fatalitéMotion should be an option, not a given
Un réglage système existe pour dire « je ne veux pas de mouvement ». Le respecter prend trois lignes et change la vie de ceux qui en ont besoin.A system setting exists to say “no motion please”. Honouring it takes three lines and changes everything for those who need it.
Pour une partie des gens, une page qui bouge ne se contente pas d’agacer : elle provoque des nausées, des migraines, ou rend la lecture impossible. Les systèmes d’exploitation proposent depuis des années un réglage pour signaler cette préférence. Les navigateurs la transmettent. Il suffit de l’écouter.For some people, a page that moves does not merely annoy: it causes nausea, migraines, or makes reading impossible. Operating systems have offered a setting to signal this preference for years. Browsers pass it along. You only have to listen.
Comment ça marcheHow it works
Le navigateur expose une condition que la feuille de style peut interroger : « cet utilisateur préfère le mouvement réduit ». On regroupe alors toutes les animations décoratives dans un bloc qui ne s’applique que lorsque la préférence n’est pas exprimée. Rien d’autre à faire, aucun bouton à ajouter, aucune détection à écrire.The browser exposes a condition the stylesheet can query: “this user prefers reduced motion”. You then group all decorative animations in a block that only applies when the preference is not expressed. Nothing else to do, no button to add, no detection to write.
Réduire, pas supprimerReduce, not remove
La préférence s’appelle « mouvement réduit », pas « aucune animation ». La bonne réponse n’est pas toujours de tout couper : une transition de 400 millisecondes peut devenir une transition de 80, un déplacement peut devenir un changement d’opacité, un défilement animé peut devenir un saut instantané. L’information reste, le mouvement disparaît.The preference is called “reduced motion”, not “no animation”. The right answer is not always to cut everything: a 400-millisecond transition can become an 80-millisecond one, a movement can become an opacity change, an animated scroll can become an instant jump. The information stays, the motion goes.
- Les mouvements de fond, les parallaxes et les rotations : supprimés.Background motion, parallax and rotation: removed.
- Les entrées de section : remplacées par un affichage immédiat.Section entrances: replaced by immediate display.
- Les retours d’interaction, comme l’état d’un bouton : conservés, raccourcis.Interaction feedback, such as a button state: kept, shortened.
- Les défilements animés vers une ancre : remplacés par un positionnement direct.Animated scrolling to an anchor: replaced by direct positioning.
Le même réflexe côté scriptThe same reflex in script
Les animations pilotées par du script doivent interroger la même préférence avant de démarrer. Sur ce site, la mascotte dont les yeux suivent le curseur, le compteur de chiffres et le défilement du bandeau sont tous conditionnés à cette vérification — sans quoi la feuille de style aurait beau se taire, le script continuerait à faire bouger la page.Script-driven animations must query the same preference before starting. On this site the mascot whose eyes follow the cursor, the number counter and the scrolling ticker are all gated on that check — otherwise the stylesheet could stay silent while the script kept the page moving.
Un site qui respecte cette préférence ne le montre à personne. C’est exactement le but : les gens concernés n’ont rien à demander, rien à régler, rien à subir.A site that honours this preference shows nobody. That is exactly the point: the people concerned have nothing to ask for, nothing to configure, nothing to endure.