RGAA 13.8 — Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l'utilisateur ?

Animations sans respect de prefers-reduced-motion

Le problème

Ce problème survient lorsque les animations, transitions et mouvements sur une page web ne respectent pas la préférence utilisateur `prefers-reduced-motion`. Le critère RGAA 13.8 (correspondant au WCAG 2.3.3, niveau AAA, et plus pratiquement au principe de 2.2.2 niveau A) exige que les contenus en mouvement puissent être contrôlés par l'utilisateur.

La media query CSS `prefers-reduced-motion` permet de détecter si l'utilisateur a configuré son système d'exploitation pour réduire les animations (macOS : Réduire les animations, Windows : Afficher les animations, iOS/Android : paramètre équivalent). Quand cette préférence est activée, le site doit réduire ou supprimer les animations non essentielles.

Les violations courantes incluent : des parallax scrolling qui continuent malgré la préférence, des transitions de page animées, des micro-animations sur les boutons et liens, des carrousels qui défilent automatiquement, et des arrière-plans vidéo animés. Même les animations CSS `@keyframes` et les transitions doivent être conditionnées à cette préférence.

Impact sur les utilisateurs

Pour les personnes atteintes de troubles vestibulaires (environ 35% des adultes de plus de 40 ans en ont des symptômes), les animations de mouvement -- en particulier le parallax scrolling, les zooms et les translations -- peuvent provoquer des vertiges, des nausées, des maux de tête et de la désorientation. Ce n'est pas un inconfort mineur : certaines personnes sont physiquement malades pendant des heures après avoir visité un site avec des animations non contrôlables.

Les personnes épileptiques peuvent être affectées par les animations clignotantes ou rapides qui peuvent déclencher des crises. Les personnes ayant des troubles de l'attention sont distraites par les animations continues qui les empêchent de se concentrer sur le contenu textuel.

Les utilisateurs qui ont configuré la préférence « réduire les animations » dans leur système d'exploitation ont explicitement demandé cette adaptation. Ignorer leur choix est une violation directe de leur autonomie et de leur confort.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Exemple de code

Avant (non conforme)

/* Animations qui ignorent prefers-reduced-motion */
.hero {
  animation: slideIn 1s ease-out;
}

.card {
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: scale(1.05);
}

@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.parallax {
  background-attachment: fixed;
  transform: translateZ(-1px);
}

Après (conforme)

/* Animations qui respectent la préférence utilisateur */
.hero {
  animation: slideIn 1s ease-out;
}

.card {
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: scale(1.05);
}

/* Désactiver les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .parallax {
    background-attachment: scroll;
    transform: none;
  }
}

Comment Scrutia détecte ce problème

Scrutia analyse les feuilles de style et le JavaScript de chaque page pour détecter les animations (CSS animations, transitions, requestAnimationFrame) et vérifie la présence d'une media query @media (prefers-reduced-motion: reduce) qui les désactive ou les réduit. Il signale les animations qui continuent malgré la préférence utilisateur et identifie les éléments concernés. Le rapport propose le CSS de désactivation approprié.

Questions fréquentes

Faut-il supprimer toutes les animations ?

Non. Le critère exige que les animations puissent être contrôlées ou réduites, pas nécessairement supprimées. Les animations essentielles à la compréhension (indicateur de chargement, transition d'état) peuvent être conservées en version réduite. Les animations purement décoratives doivent être supprimées.

Comment les utilisateurs activent-ils prefers-reduced-motion ?

macOS : Préférences Système > Accessibilité > Affichage > Réduire les animations. Windows : Paramètres > Accessibilité > Effets visuels > Afficher les animations. iOS : Réglages > Accessibilité > Mouvement > Réduire les animations.

Les transitions CSS sont-elles concernées ?

Oui. Les transitions (transition, transform) et les animations (@keyframes) sont toutes concernées. Même une transition de 0.3s sur un hover peut être perturbante pour certaines personnes. Conditionnez toutes les animations et transitions à prefers-reduced-motion.

JavaScript doit-il aussi respecter cette préférence ?

Oui. Utilisez window.matchMedia('(prefers-reduced-motion: reduce)').matches en JavaScript pour adapter les animations pilotées par JS (GSAP, Framer Motion, requestAnimationFrame). Écoutez aussi les changements de cette préférence en temps réel avec addEventListener('change').

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit