WCAG 2.3.3 : Animation à partir des interactions

Ce que signifie cette règle

WCAG 2.3.3 — Animation déclenchée par les interactions est un critère de niveau AAA relevant du principe « Utilisable ». Il exige que toute animation de mouvement déclenchée par une interaction puisse être désactivée par l’utilisateur, sauf si cette animation est essentielle à la fonctionnalité ou à l’information transmise. Le critère s’applique aux animations initiées par des actions de l’utilisateur telles que le clic, le défilement, le survol, la prise de focus ou toute autre forme d’interaction — et non aux animations qui se lancent automatiquement au chargement de la page (lesquelles peuvent être régies par d’autres critères comme 2.2.2 Pause, Arrêt, Masquer).

Le concept clé ici est l’animation de mouvement. Cela inclut les effets de défilement parallaxe, les animations de transition de page, les glissements ou zooms d’éléments, les indicateurs tournants, et tout autre mouvement qui se produit comme conséquence directe d’une action de l’utilisateur. Cela ne couvre pas les simples fondus d’opacité ou changements de couleur, car ils n’impliquent pas de mouvement spatial susceptible de déclencher des réactions vestibulaires. La distinction se fait entre le mouvement dans l’espace (qui peut causer un préjudice) et les changements d’apparence sans déplacement spatial (qui, en général, ne le peuvent pas).

Pour réussir, il faut que les utilisateurs disposent d’un mécanisme fiable pour désactiver ces animations sans perdre l’accès au même contenu ou à la même fonctionnalité. La technique la plus largement acceptée consiste à respecter la requête média au niveau du système d’exploitation prefers-reduced-motion, qui reflète la préférence système de l’utilisateur pour la réduction des mouvements. À défaut, un interrupteur au niveau du site, placé de manière bien visible dans l’interface — par exemple dans un panneau de paramètres ou un widget d’accessibilité — peut satisfaire au critère, à condition que ce réglage persiste d’une session à l’autre et soit facile à trouver.

L’exception d’animation essentielle est étroite : une animation n’est essentielle que si sa suppression modifierait fondamentalement l’information ou la fonctionnalité, et s’il n’existe aucune alternative équivalente non animée. Un indicateur de chargement tournant qui est le seul indice visuel que du contenu est en cours de récupération peut entrer dans ce cas ; une image de fond décorative en parallaxe qui se déplace au défilement de l’utilisateur n’y entre pas, même si elle est esthétiquement centrale dans le design.

Le critère n’exige pas que les animations soient entièrement supprimées — seulement qu’il existe un mécanisme pour les désactiver. Lorsque ce mécanisme est activé, le contenu doit rester pleinement accessible, ce qui signifie qu’une alternative non animée doit transmettre la même information ou remplir la même fonction.

Pourquoi c’est important

Les troubles vestibulaires — des affections touchant l’oreille interne et le cerveau qui contrôlent l’équilibre et le mouvement des yeux — concernent une part importante de la population mondiale. Selon la Vestibular Disorders Association, environ 35% des adultes de 40 ans et plus aux États-Unis ont connu une forme de dysfonction vestibulaire. À l’échelle mondiale, des affections telles que le vertige paroxystique positionnel bénin (VPPB), la maladie de Ménière et les migraines vestibulaires touchent des dizaines de millions de personnes. Pour ces personnes, le mouvement à l’écran peut déclencher des symptômes physiques immédiats, notamment des étourdissements, des vertiges, des nausées, des maux de tête et, dans les cas graves, une incapacité temporaire.

Considérons une personne souffrant de migraine vestibulaire qui visite un site de réservation de voyages. Le site utilise un effet de défilement parallaxe en pleine page où l’image de héros se déplace à une vitesse différente de celle du contenu de la page lorsque l’utilisateur fait défiler. En quelques secondes de défilement, la personne ressent de forts étourdissements et des nausées. Elle ne peut pas finaliser la réservation et doit abandonner complètement le site — non pas en raison d’une barrière cognitive ou d’une déficience motrice, mais à cause d’une réaction physique au mouvement à l’écran. C’est ce type de préjudice réel que WCAG 2.3.3 est conçu pour prévenir.

Au-delà des troubles vestibulaires, les animations de mouvement peuvent affecter négativement les personnes ayant des troubles du déficit de l’attention, qui trouvent le mouvement persistant ou déclenché distrayant et difficile à ignorer, ainsi que les personnes souffrant de troubles anxieux, pour qui un mouvement inattendu peut provoquer de la détresse. Les personnes en convalescence après une commotion cérébrale ou un traumatisme crânien sont également très sensibles au mouvement visuel. Même des personnes sans diagnostic peuvent trouver une animation intensive fatigante lors de sessions prolongées.

Du point de vue de l’utilisabilité et du business, le respect des préférences de réduction des mouvements est corrélé à de meilleurs taux d’achèvement des tâches et à une durée de session accrue chez les personnes sensibles. Le respect des préférences au niveau du système signale également qu’un produit est bien conçu et attentif aux besoins des utilisateurs, ce qui renforce la confiance. Pour le e-commerce, où l’abandon de panier dû à une mauvaise expérience impacte directement le chiffre d’affaires, supprimer les barrières d’animation inutiles constitue un bénéfice commercial concret.

Règles Axe-core associées

WCAG 2.3.3 nécessite un test manuel. Aucune règle automatisée axe-core ne correspond directement à ce critère, et c’est intentionnel plutôt qu’un oubli. Les raisons pour lesquelles les outils automatisés ne peuvent pas détecter de manière fiable les violations sont substantielles :

• Pourquoi l’automatisation ne peut pas détecter cela : Détecter une animation de mouvement nécessite de comprendre le rendu visuel d’une page dans le temps en réponse à une interaction utilisateur. Les analyseurs d’accessibilité automatisés examinent des instantanés du DOM statique ou peu rendu ; ils ne simulent pas des interactions utilisateur telles que le défilement ou le clic, puis n’observent pas si des transitions CSS ou des animations pilotées par JavaScript produisent un mouvement spatial. Même si un analyseur pouvait détecter la présence de propriétés CSS d’animation ou de transition, il ne pourrait pas déterminer si cette animation implique un déplacement spatial (susceptible de déclencher des réactions vestibulaires) ou un simple fondu d’opacité (qui ne le fait pas). De plus, l’analyseur ne peut pas déterminer si une requête média prefers-reduced-motion est correctement câblée pour supprimer l’animation, si un interrupteur au niveau du site existe, ou si l’animation est réellement essentielle. Tous ces jugements nécessitent un testeur humain capable d’observer l’expérience rendue, d’interagir avec la page et d’évaluer le résultat.
• Ce que l’inspection manuelle doit cibler : Les testeurs doivent identifier chaque propriété CSS qui crée un mouvement spatial — y compris transform: translateX/Y/Z, transform: scale, transform: rotate, les transitions de top/left/margin, les images clés animation qui déplacent des éléments dans l’espace — et vérifier que chacune est conditionnée par une requête média prefers-reduced-motion: reduce ou un interrupteur contrôlé par l’utilisateur. Les animations pilotées par JavaScript utilisant des bibliothèques telles que GSAP, Framer Motion ou des boucles requestAnimationFrame personnalisées doivent être examinées avec la même rigueur.

Comment tester

1. Activer la réduction des mouvements au niveau de l’OS : Sur macOS, allez dans Réglages Système > Accessibilité > Affichage et activez « Réduire les animations ». Sur Windows 11, allez dans Paramètres > Accessibilité > Effets visuels et désactivez « Effets d’animation ». Sur iOS, allez dans Réglages > Accessibilité > Mouvement et activez « Réduire les animations ». Sur Android, allez dans Paramètres > Accessibilité > Supprimer les animations. Cela active la requête média prefers-reduced-motion: reduce.
2. Lancer une analyse automatisée comme base : Ouvrez axe DevTools ou Lighthouse dans Chrome DevTools sur la page cible. Bien qu’aucun de ces outils ne signale directement une violation de WCAG 2.3.3, l’analyse peut faire remonter des problèmes connexes et confirmer que l’environnement de test fonctionne. Notez tout résultat lié aux animations pour le contexte.
3. Interagir avec la page pendant que la réduction des mouvements de l’OS est active : Faites défiler la page lentement, cliquez sur les éléments interactifs tels que les boutons, les bascules de navigation, les listes déroulantes, les carrousels et les modales. Survolez les éléments. Parcourez la page au clavier avec la touche Tab. Observez si des animations de mouvement spatial se déclenchent encore. Si les animations sont supprimées, c’est une réussite pour la voie de la préférence système.
4. Désactiver la réduction des mouvements de l’OS et tester à nouveau : Une fois la réduction des mouvements désactivée au niveau de l’OS, répétez toutes les interactions. Identifiez chaque animation de mouvement déclenchée par une interaction utilisateur. Documentez chacune avec une description de l’action déclenchante et de l’animation observée.
5. Vérifier la présence d’un interrupteur d’animation au niveau du site : Si la réduction des mouvements de l’OS n’est pas respectée, recherchez un contrôle au niveau du site — souvent présent dans un widget d’accessibilité, un menu de paramètres ou le pied de page. Activez-le et répétez tous les tests d’interaction pour confirmer que le mouvement est supprimé.
6. Inspecter le CSS et le JavaScript pour l’implémentation de prefers-reduced-motion : Ouvrez DevTools, allez dans l’onglet Sources ou Éléments, et recherchez prefers-reduced-motion dans les fichiers de feuilles de style. Vérifiez que toutes les animations de mouvement identifiées sont conditionnées par cette requête. Dans Chrome DevTools, vous pouvez émuler la requête média : ouvrez l’onglet Rendering (Plus d’outils > Rendering) et définissez « Emulate CSS media feature prefers-reduced-motion » sur « reduce ». Confirmez que les animations sont supprimées sans redémarrer le navigateur.
7. Évaluer les exceptions essentielles : Pour chaque animation restante lorsque la réduction des mouvements est active, évaluez si elle est réellement essentielle — sa suppression élimine-t-elle une information ou une fonctionnalité qui n’a aucune équivalente non animée ? Documentez votre raisonnement pour chaque détermination.
8. Vérification avec lecteur d’écran (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari) : Les utilisateurs de lecteurs d’écran ne sont pas à l’abri des effets vestibulaires s’ils ont également une vision partielle. Naviguez dans la page uniquement au clavier avec un lecteur d’écran actif et la réduction des mouvements de l’OS activée. Confirmez qu’aucune animation n’est déclenchée par des événements de focus ou des interactions au clavier qui ne bénéficient pas de l’accommodement de réduction des mouvements.

Comment corriger

Effet de défilement parallaxe — Incorrect

<!-- L’arrière-plan se déplace à un rythme différent du contenu au défilement -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Crée un effet parallaxe au défilement */
    height: 100vh;
  }
</style>
<div class='hero'></div>

Effet de défilement parallaxe — Correct

<!-- Le parallaxe est désactivé lorsque l’utilisateur préfère réduire les mouvements -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Parallaxe par défaut */
    height: 100vh;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero {
      background-attachment: scroll; /* Arrière-plan statique ; aucun mouvement spatial */
    }
  }
</style>
<div class='hero'></div>

Transition CSS sur élément interactif — Incorrect

<!-- Le bouton glisse et change d’échelle au clic sans accommodement de réduction des mouvements -->
<style>
  .btn {
    transition: transform 0.4s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }
</style>
<button class='btn'>Submit</button>

Transition CSS sur élément interactif — Correct

<!-- La transformation spatiale est supprimée ; un simple changement d’opacité indique l’état sans mouvement -->
<style>
  .btn {
    transition: transform 0.4s ease, opacity 0.2s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: opacity 0.2s ease; /* Seul le changement non spatial est conservé */
    }
    .btn:active {
      transform: none; /* Aucun mouvement */
      opacity: 0.75;   /* L’état reste communiqué visuellement */
    }
  }
</style>
<button class='btn'>Submit</button>

Bibliothèque d’animation JavaScript (GSAP) — Incorrect

<!-- L’animation GSAP se déclenche au clic sur le bouton, quelle que soit la préférence de mouvement de l’utilisateur -->
<script>
  document.querySelector('#open-modal').addEventListener('click', () => {
    gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
  });
</script>

Bibliothèque d’animation JavaScript (GSAP) — Correct

<!-- Vérifier matchMedia avant de déclencher l’animation spatiale ; revenir à un affichage instantané -->
<script>
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  document.querySelector('#open-modal').addEventListener('click', () => {
    if (prefersReducedMotion) {
      /* Ignorer le mouvement spatial ; rendre simplement la modale visible immédiatement */
      gsap.set('#modal', { opacity: 1, y: 0 });
    } else {
      gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
    }
  });
</script>

Interrupteur d’animation au niveau du site (widget d’accessibilité) — Modèle correct

<!-- Conserver la préférence de l’utilisateur dans localStorage et appliquer une classe à <html> -->
<button id='toggle-motion' aria-pressed='false'>Reduce Motion</button>

<style>
  /* Par défaut : animations actives */
  .card { transition: transform 0.3s ease; }
  .card:hover { transform: translateY(-8px); }

  /* Lorsque l’utilisateur se désinscrit via le widget */
  html.reduce-motion .card {
    transition: none;
  }
  html.reduce-motion .card:hover {
    transform: none;
  }
</style>

<script>
  const btn = document.getElementById('toggle-motion');
  const stored = localStorage.getItem('reduceMotion') === 'true';

  if (stored) {
    document.documentElement.classList.add('reduce-motion');
    btn.setAttribute('aria-pressed', 'true');
  }

  btn.addEventListener('click', () => {
    const isActive = document.documentElement.classList.toggle('reduce-motion');
    btn.setAttribute('aria-pressed', String(isActive));
    localStorage.setItem('reduceMotion', String(isActive));
  });
</script>

Erreurs courantes

• Appliquer prefers-reduced-motion uniquement aux animations CSS mais pas aux transitions CSS : Les propriétés abrégées animation et transition peuvent toutes deux produire un mouvement spatial. Les équipes écrivent souvent une requête média pour les animations à images clés et oublient que transition: transform 0.3s au survol ou au focus déclenche également un mouvement qui doit être conditionné.
• Utiliser prefers-reduced-motion: no-preference comme condition de requête au lieu de reduce : Le modèle correct encapsule les styles d’expérience réduite dans @media (prefers-reduced-motion: reduce), et non l’inverse. Encapsuler les styles d’animation dans @media (prefers-reduced-motion: no-preference) peut fonctionner mais est plus sujet aux erreurs et est souvent mal appliqué, laissant les animations actives pour les personnes qui n’ont pas explicitement défini de préférence.
• Mettre en cache le résultat de matchMedia une fois pour toutes sans le re-vérifier : Une personne peut modifier sa préférence système pendant que la page est ouverte. Abonnez-vous à matchMedia(...).addEventListener('change', handler) afin que les animations pilotées par JavaScript réagissent aux changements de préférence en temps réel sans nécessiter un rechargement de la page.
• Considérer les fondus d’opacité seuls comme des animations de mouvement devant être supprimées : Le critère cible spécifiquement le mouvement spatial. Supprimer les transitions d’opacité lorsque la réduction des mouvements est active est excessif et dégrade l’utilisabilité. Les fondus qui ne déplacent pas les éléments dans l’espace sont généralement acceptables à conserver.
• Placer l’interrupteur d’animation au fond d’un menu de paramètres inaccessible : Si un contrôle au niveau du site est utilisé à la place (ou en complément) de la requête média de l’OS, il doit être facile à trouver — idéalement dans l’en-tête ou le pied de page du site, ou dans un widget superposé accessible — et non enfoui trois niveaux plus loin dans une page de paramètres de compte nécessitant une connexion.
• Supposer que toutes les bibliothèques d’animation respectent automatiquement prefers-reduced-motion : La plupart des bibliothèques d’animation JavaScript, y compris GSAP, Anime.js et les implémentations personnalisées de requestAnimationFrame, ne respectent pas automatiquement la requête média. Chaque animation programmatique doit être individuellement protégée par un contrôle matchMedia dans la couche JavaScript.
• Déclarer une animation essentielle sans justification suffisante : Les équipes qualifient parfois des animations décoratives complexes d’essentielles pour éviter le travail de remédiation. L’exception d’essentialité est étroite ; une animation n’est essentielle que si l’information qu’elle transmet ne peut pas être exprimée par des moyens statiques ou non animés. Les indicateurs de chargement, les parallaxes décoratives et les transitions d’entrée de page ne sont presque jamais essentiels.
• Ne pas tester les interactions au-delà du clic — en particulier le défilement et le survol : Les effets de défilement parallaxe et les transformations déclenchées au survol comptent parmi les principaux déclencheurs vestibulaires, et pourtant les tests se limitent souvent aux interactions par clic. Un test complet doit couvrir tous les modes d’interaction, y compris le défilement, le survol, le focus, le glisser-déposer et la navigation au clavier.
• Ne pas conserver la préférence de l’interrupteur au niveau du site d’une session à l’autre : Si une personne règle un interrupteur de site pour réduire les mouvements puis navigue vers une autre page ou revient sur le site le lendemain et que le réglage est réinitialisé, l’accommodement a de fait échoué. Les préférences doivent être stockées dans localStorage ou dans un profil utilisateur et réappliquées à chaque chargement de page.
• Oublier les contenus et widgets tiers : Les flux sociaux intégrés, widgets de chat, cartes intégrées et scripts publicitaires peuvent introduire leurs propres animations de mouvement entièrement en dehors du contrôle CSS du site hôte. Le contenu tiers doit être audité et les fournisseurs doivent être sollicités pour fournir un support de réduction des mouvements, ou les contenus intégrés doivent être enveloppés dans des conteneurs qui suppriment le mouvement via des stratégies de confinement CSS lorsque cela est possible.

Lien avec la réglementation d’accessibilité de la Turquie

La Circulaire présidentielle 2025/10 de la Turquie, publiée au Journal officiel (Resmî Gazete) n° 32933 le 21 juin 2025, établit des obligations contraignantes en matière d’accessibilité numérique pour un ensemble défini de types d’entités opérant en Turquie. Les entités couvertes incluent les institutions et agences publiques, les plateformes de e-commerce, les banques et prestataires de services financiers, les hôpitaux et établissements de santé privés, les opérateurs de télécommunications comptant 200,000 abonnés ou plus, les agences de voyage agréées, les entreprises de transport privé et les écoles privées autorisées par le ministère de l’Éducation nationale (MoNE).

La Circulaire impose la conformité à WCAG 2.1 au niveau AA comme norme de base pour les services numériques produits ou substantiellement mis à jour après la date d’entrée en vigueur. WCAG 2.3.3 — Animation déclenchée par les interactions est un critère de niveau AAA et n’est donc pas une exigence obligatoire au titre de la Circulaire présidentielle 2025/10. Les entités couvertes ne sont pas légalement tenues de mettre en œuvre ce critère pour atteindre un statut conforme en droit turc.

Cependant, atteindre la conformité de niveau AAA sur des critères tels que 2.3.3 présente une valeur pratique et réputationnelle significative pour les organisations turques. Les troubles vestibulaires et la sensibilité au mouvement sont des handicaps invisibles fréquemment négligés dans les audits d’accessibilité qui se concentrent étroitement sur la compatibilité avec les lecteurs d’écran. Pour des secteurs tels que la santé (hôpitaux et plateformes de santé privées), où les utilisateurs peuvent inclure des patients atteints de pathologies neurologiques accentuant la sensibilité au mouvement, et pour le e-commerce et les agences de voyage, où les modèles d’interface fortement animés et à défilement intensif sont courants, la mise en œuvre de 2.3.3 démontre une approche de l’accessibilité mature et centrée sur l’utilisateur.

Les organisations visant une conformité AAA volontaire — par exemple celles recherchant un avantage dans les appels d’offres publics, l’entrée sur des marchés internationaux ou une certification sectorielle — devraient traiter 2.3.3 comme un critère prioritaire, compte tenu du coût de remédiation relativement faible (une stratégie bien structurée de requêtes média prefers-reduced-motion peut être appliquée systématiquement à l’échelle d’un design system) et du préjudice physique direct que son absence peut causer. L’inclusion d’un contrôle d’animation dans un widget de superposition d’accessibilité, tel qu’Accsible, permet aux organisations turques d’offrir cet accommodement sans obliger les utilisateurs à localiser les paramètres de leur système d’exploitation — rendant le chemin vers la réduction des mouvements découvrable et utilisable pour le public le plus large possible.