Carrousels, animations et mouvement : les rendre accessibles
En bref — du mouvement qui n'exclut personne
Un carrousel qui défile tout seul sur la page d'accueil, un bandeau promo qui glisse, des animations d'apparition au scroll, un effet de parallaxe : le mouvement peut empêcher de lire, distraire une personne ayant un trouble de l'attention, donner la nausée à une personne sensible (troubles vestibulaires), voire déclencher une crise chez une personne épileptique. L'European Accessibility Act (norme EN 301 549 / WCAG 2.1 AA) encadre tout cela depuis le 28 juin 2025. Les points clés :
- Tout ce qui bouge seul plus de 5 secondes peut être mis en pause, arrêté ou masqué (critère 2.2.2) ;
- Aucun flash dangereux : pas plus de 3 flashs par seconde (critère 2.3.1) ;
- Respecter « réduire les animations » du système (
prefers-reduced-motion) pour les gros effets décoratifs ; - Le carrousel se pilote au clavier et la diapositive en cours est annoncée ;
- Pas de défilement trop rapide qui ne laisse pas le temps de lire (critère 2.2.1) ;
- Le mouvement n'est jamais la seule façon d'accéder à une information.
Le plus simple et le plus sûr : si un carrousel automatique n'est pas indispensable, ne le faites pas démarrer tout seul.
Le carrousel de la page d'accueil qui change de visuel toutes les trois secondes est l'un des éléments les plus répandus du e-commerce — et l'un des plus problématiques pour l'accessibilité. Trop rapide, on n'a pas fini de lire la première offre qu'elle a disparu ; sans bouton pause, impossible de l'arrêter ; combiné à une animation de parallaxe, il peut littéralement donner le tournis. Voici les six règles WCAG que l'EAA impose pour que les animations et le mouvement de votre boutique restent confortables pour tous, et comment les vérifier.
Pourquoi le mouvement est un enjeu d'accessibilité
Le mouvement à l'écran touche plusieurs publics : une personne ayant un trouble de l'attention est happée par tout ce qui bouge à côté du texte qu'elle essaie de lire ; une personne ayant un trouble vestibulaire (vertiges) peut avoir des nausées face à une grande animation de parallaxe ou de zoom ; une personne épileptique photosensible risque une crise face à des flashs rapides ; et tout le monde est gêné par un carrousel qui avance avant qu'on ait pu lire ou cliquer.
L'EAA s'appuie sur l'EN 301 549, fondée sur les WCAG 2.1 niveau AA, applicables au commerce électronique depuis le 28 juin 2025. Le mouvement relève surtout de trois critères de niveau A : 2.2.2 (Mettre en pause, arrêter, masquer), 2.2.1 (Délai modifiable) et 2.3.1 (Pas plus de trois flashs). S'y ajoute une bonne pratique très importante, le respect de la préférence « réduire les animations » (critère 2.3.3, de niveau AAA), que nous traitons franchement ci-dessous.
Les 6 règles pour des animations accessibles
Pause, arrêt ou masquage de tout mouvement de plus de 5 s
Tout contenu qui bouge, défile ou clignote automatiquement pendant plus de 5 secondes — carrousel, bandeau d'annonces qui glisse, GIF animé, vidéo de fond en boucle, compteur animé — doit pouvoir être mis en pause, arrêté ou masqué par l'utilisateur, sauf si ce mouvement est essentiel. Concrètement : un bouton « Pause » visible et atteignable au clavier sur les carrousels et les bandeaux défilants.
Honorer la préférence système de réduction du mouvement
Les systèmes d'exploitation (macOS, Windows, iOS, Android) proposent un réglage « Réduire les animations / le mouvement ». En CSS, la requête @media (prefers-reduced-motion: reduce) permet de le détecter et de désactiver ou atténuer les gros effets : parallaxe, zooms, transitions amples, animations d'apparition spectaculaires. C'est la meilleure réponse aux troubles vestibulaires.
Soyons honnêtes : le critère dédié (2.3.3, « Animation à la suite d'interactions ») est de niveau AAA, donc pas strictement exigé par l'EAA (qui vise le niveau AA). Mais il est fortement recommandé, peu coûteux, et recoupe le critère AA 2.2.2 pour tout ce qui bouge seul. À traiter comme un quasi-incontournable.
prefers-reduced-motion: reduce, la parallaxe et les apparitions au scroll sont coupées ; le contenu s'affiche directement.Pas plus de trois flashs par seconde
Rien sur la page ne doit flasher plus de trois fois par seconde sur une surface notable : c'est un risque réel de crise d'épilepsie photosensible. Cela concerne les effets stroboscopiques, les clignotements rapides d'un bandeau, certaines animations promotionnelles et les vidéos comportant des flashs. En cas de doute, restez sur des transitions douces.
Contrôles atteignables, diapositive en cours annoncée
Un carrousel doit être entièrement utilisable au clavier : les flèches « précédent » / « suivant » et les puces de pagination doivent être de vrais boutons focusables (Tab puis Entrée). Le lecteur d'écran doit savoir quelle diapositive est active (par exemple « diapositive 2 sur 4 »). Et le carrousel ne doit pas voler le focus ni avancer tout seul pendant qu'on interagit avec lui.
<button> focusables ; la diapo courante est indiquée ; l'autoplay se met en pause quand on a le focus dessus.<div> cliquables uniquement à la souris, sans repère de la diapo active.→ Voir aussi la navigation au clavier et les liens et boutons accessibles.
Laisser le temps de lire chaque diapositive
Un carrousel qui change de diapositive avant qu'on ait fini de lire impose une limite de temps qu'on ne maîtrise pas. Le critère 2.2.1 demande de pouvoir désactiver, allonger ou mettre en pause ce minutage. En pratique : laissez une diapositive affichée assez longtemps (plusieurs secondes par ligne de texte), et combinez avec le bouton pause de la règle 1. Le plus sûr reste de ne pas faire défiler automatiquement du tout.
Les animations restent un plus, pas un passage obligé
Une information ne doit pas être accessible uniquement par une animation. Si une offre n'apparaît qu'au survol ou via une animation au scroll, elle doit aussi être disponible de façon statique pour qui n'a pas vu le mouvement (réglage « réduire les animations », lecteur d'écran). De même, gardez les animations d'apparition au défilement discrètes : un contenu qui n'apparaît qu'après une animation longue peut ne jamais s'afficher pour certains.
Récapitulatif des critères pour le mouvement et les animations
| Point à vérifier | Niveau | Critère WCAG |
|---|---|---|
| Mouvement automatique > 5 s : pause / arrêt / masquage | A | 2.2.2 |
| Pas de défilement / minutage trop rapide | A | 2.2.1 |
| Pas plus de 3 flashs par seconde | A | 2.3.1 |
| Carrousel pilotable au clavier, diapo annoncée | A | 2.1.1 · 4.1.2 |
| Respect de « réduire les animations » | AAA | 2.3.3 |
prefers-reduced-motion à votre place : ce sont des choix de code. Rappel : la FTC américaine a sanctionné un éditeur d'overlay d'un million de dollars pour des allégations de conformité trompeuses. Voir pourquoi les overlays ne suffisent pas.Comment vérifier le mouvement de votre site
Quelques tests rapides, surtout visuels et manuels :
- Activez « Réduire les animations » dans votre système (macOS : Réglages → Accessibilité → Affichage ; Windows : Paramètres → Accessibilité → Effets visuels ; iOS / Android dans l'accessibilité), rechargez la page : les grosses animations doivent s'atténuer ou cesser.
- Repérez tout ce qui bouge seul plus de 5 secondes (carrousel, bandeau, GIF, vidéo de fond) : existe-t-il un bouton pause, atteignable au clavier ?
- Pilotez le carrousel au clavier : les flèches et puces sont-elles focalisables et actionnables avec Tab + Entrée ?
- Vérifiez l'absence de clignotement rapide (plus de 3 fois par seconde) sur n'importe quel élément.
Un scan automatique détecte mal le mouvement (il voit le code, pas la vitesse ni la durée d'une animation) : c'est avant tout un test humain. Notre rapport signale en revanche les éléments à risque (carrousels sans contrôle, balises d'animation) et l'ensemble des autres manquements WCAG.
→ Méthode complète : comment tester l'accessibilité de son site. Pour les vidéos (sous-titres, autoplay sonore, audiodescription), voir vidéos accessibles.
Vérifiez l'accessibilité de votre boutique gratuitement
DeclareAccess analyse une page de votre site avec le moteur axe-core selon les WCAG 2.1 AA, repère les manquements (carrousel sans contrôle, contraste, structure, formulaires…) et génère la déclaration d'accessibilité prête à publier — modèle français (RGAA), allemand (BFSG), italien ou espagnol. Gratuit, sans carte bancaire.
Rapport WCAG par e-mail sous 24 h ouvrées.
C'est noté. Votre client e-mail va s'ouvrir avec la demande pré-remplie — il vous suffit de l'envoyer.
Questions fréquentes
Un carrousel automatique est-il interdit ?
Non, il n'est pas interdit, mais il doit respecter plusieurs conditions : pouvoir être mis en pause (critère 2.2.2), ne pas défiler trop vite (2.2.1), être pilotable au clavier (2.1.1) et ne pas voler le focus. En pratique, le plus simple et le plus sûr est de ne pas le faire démarrer tout seul : un carrousel à navigation manuelle (flèches / puces) évite l'essentiel des problèmes, et les études d'usage montrent qu'un slider auto convertit rarement mieux qu'une seule bannière bien choisie.
Qu'est-ce que prefers-reduced-motion et dois-je le gérer ?
C'est une requête CSS (@media (prefers-reduced-motion: reduce)) qui détecte si l'utilisateur a activé « réduire les animations » dans son système. Elle permet de couper la parallaxe, les zooms et les apparitions amples pour les personnes sensibles au mouvement (vertiges, nausées). Le critère dédié (2.3.3) est de niveau AAA, donc pas strictement exigé par l'EAA, mais il est peu coûteux, fortement recommandé et recoupe le critère AA 2.2.2 pour tout ce qui bouge en boucle. À mettre en place dès que possible.
Les petites animations CSS au survol posent-elles problème ?
Les micro-transitions discrètes (un bouton qui change de couleur, une légère mise en évidence) ne posent généralement pas de problème. Ce qu'il faut surveiller, ce sont les gros mouvements (parallaxe, zooms amples, déplacements spectaculaires) qui peuvent gêner les personnes sensibles : réduisez-les sous prefers-reduced-motion. Et bien sûr, rien ne doit clignoter plus de trois fois par seconde.
Un GIF animé en boucle compte-t-il comme du mouvement ?
Oui. Un GIF (ou une vidéo) qui s'anime en boucle pendant plus de 5 secondes entre dans le champ du critère 2.2.2 : l'utilisateur doit pouvoir l'arrêter, le mettre en pause ou le masquer. S'il comporte des clignotements rapides, il relève aussi du 2.3.1. Une solution simple est de remplacer un GIF qui boucle par une image fixe, ou de fournir une commande pour figer l'animation.
Comment savoir si une animation flashe trop ?
La limite est de trois flashs par seconde maximum sur une surface notable (critère 2.3.1). Concrètement : évitez les effets stroboscopiques, les bandeaux qui clignotent rapidement et les vidéos avec flashs intenses. En cas de doute, préférez des transitions par fondu doux. Des outils spécialisés (comme l'analyseur PEAT) existent pour mesurer le risque sur une vidéo, mais la règle de prudence suffit dans la quasi-totalité des cas e-commerce.