Dernière mise à jour : 31 mars 2026
Principes essentiels pour l’accessibilité des éléments animés d’une page.
Consignes d’accessibilité pour les animations
Il faut éviter autant que possible d’ajouter du mouvement ou des animations dans les composants, même dans leurs états interactifs, sauf s’ils sont nécessaires à la compréhension du contenu. Si une animation est indispensable, elle doit respecter les règles d’accessibilité suivantes :
- Privilégier une durée d’animation de moins de 5 secondes.
- Dans le cas où la durée est de plus de 5 secondes, la personne qui navigue dans l’interface doit être en mesure de mettre en pause, d'arrêter ou de masquer l'élément animé.
Attention, il ne faut jamais créer d’animations ou de vidéos qui clignotent plus de trois fois par seconde.
Animations déclenchées par une interaction
Si l’animation est déclenchée par une interaction de l’utilisateur ou l’utilisatrice, comme le défilement ou le survol d’un élément, il est recommandé de respecter les bonnes pratiques suivantes :
- S’assurer qu’il y a une option pour désactiver ces animations dès le début de la page, par exemple un bouton dans la navigation. Ce paramètre doit être maintenu durant toute la visite de l’interface.
- Respecter la préférence de réduction des animations du navigateur. Lorsqu’elle est activée, il faut réduire ou désactiver les animations automatiquement en implémentant le code CSS prévu à cet effet (paramètre prefers-reduced-motion).
