Ressources · 66
Animations : vérifier mouvement réduit, pause et compréhension
Inventorier les mouvements, proposer une version réduite et tester que progression, état et navigation restent compréhensibles sans animation.
· 3 min
Ce que ce guide permet
- Inventorier les déclenchements
- Définir la version réduite
- Séparer les critères WCAG
- Tester toutes les implémentations
Contrôle express
- Le mouvement réduit interdit-il toute animation ?
- Le critère 2.3.3 est-il de niveau AA ?
- Une règle CSS globale suffit-elle ?
Méthode pas à pas
- 01
Inventorier les déclenchements
Listez mouvements automatiques, déclenchés par interaction et liés au défilement. Distinguez ce qui informe d’un état et ce qui sert à décorer. Examinez aussi animations JavaScript, vidéos et éléments embarqués.
Livrable : registre des effets et de leur utilité.
- 02
Définir la version réduite
La préférence prefers-reduced-motion signale le souhait de réduire les mouvements non essentiels. Prévoyez une alternative statique ou plus discrète, tout en conservant information et commandes. Ne remplacez pas une grande translation par une autre animation distrayante.
Livrable : comportement réduit par composant.
- 03
Séparer les critères WCAG
Le critère 2.3.3 sur les animations d’interaction est de niveau AAA. Le critère 2.2.2 de niveau A couvre notamment certains mouvements automatiques de plus de cinq secondes présentés en parallèle à du contenu, sauf nécessité essentielle. Vérifiez les conditions du critère applicable.
Livrable : critères et contrôles requis pour chaque effet.
- 04
Tester toutes les implémentations
Émulez la préférence avant chargement puis pendant la session. Contrôlez styles, scripts et défilement programmatique. Si un état dépend de la fin d’une animation, assurez une conclusion fiable aussi lorsque l’animation est supprimée.
Livrable : essais à froid, changement en session et résultat final.
- 05
Préserver information et commandes
Exercez lecture, clavier et retour d’erreur dans les deux modes. Pour un mouvement automatique concerné, testez pause, arrêt ou masquage et leur stabilité pendant la lecture. Documentez les exceptions plutôt que de qualifier toute animation d’essentielle.
Livrable : preuves et liste des limites.
Fiche de travail à réutiliser
À compléter avec vos observations autorisées. Ces champs constituent une trame de travail, pas des résultats observés.
| Champ | Information à consigner |
|---|---|
| Effet | Déclencheur, durée et information |
| Alternative | Version réduite et état final |
| Critère | Niveau, conditions et commande |
| Essai | Préférence, clavier, résultat et limite |
Exemple d’application
Situation illustrative
Exemple fictif : un panneau devient actif uniquement lorsque sa transition se termine.
Décision et preuve attendue
La recette en mode réduit révèle l’attente ; le composant termine son changement d’état sans dépendre de la durée de l’animation.
Distinguer les mécanismes
| Mécanisme | Utilité | Point de vigilance |
|---|---|---|
| Préférence de mouvement réduit | Adapter aux choix système | Vérifier aussi les scripts |
| Commande de pause | Maîtriser un mouvement automatique concerné | La rendre utilisable au clavier |
| État statique | Conserver une information sans mouvement | Ne pas supprimer progression ou retour d’erreur |
Indicateurs de pilotage
| Indicateur | Ce qu’il mesure | Première action |
|---|---|---|
| Effets adaptés | Mouvements avec alternative vérifiée | Inclure embarqués et défilement |
| Tâches préservées | Parcours accomplis en mode réduit | Examiner les états dépendant d’une animation |
| Commandes opérantes | Pause ou arrêt réellement effectif | Vérifier la reprise et le clavier |
Erreurs fréquentes
- Vérifier aussi les scripts
- La rendre utilisable au clavier
- Ne pas supprimer progression ou retour d’erreur
Questions fréquentes
Le mouvement réduit interdit-il toute animation ?
Non. Il exprime une préférence ; choisissez une adaptation proportionnée et conservez l’information nécessaire.
Le critère 2.3.3 est-il de niveau AA ?
Non, il est de niveau AAA. D’autres critères peuvent s’appliquer aux mouvements automatiques ou clignotements.
Une règle CSS globale suffit-elle ?
Elle peut réduire de nombreux effets, mais ne contrôle pas forcément scripts, vidéos ou intégrations. Testez les composants réellement utilisés.
Références officielles
Références consultées le 2 octobre 2026. La méthode et la fiche de travail proposent des contrôles à adapter à votre contexte ; elles ne constituent pas une certification.
Pour aller plus loin
