Accessibilité · Octobre 2026

Accessibilité en motion design : guide WCAG 2026 (animations, flashs, sous-titres)

Une animation peut éblouir, au sens propre. Pour certaines personnes, un flash rapide déclenche une crise ; pour d'autres, un mouvement de fond donne la nausée ; pour beaucoup, une vidéo sans sous-titres est muette. L'accessibilité n'est pas un frein à la création : c'est la garantie que le film atteint tout son public.

Formes 3D en équilibre, animation douce et accessible

Le cadre : les WCAG 2.2

Les Règles pour l'accessibilité des contenus web (WCAG), publiées par le W3C, sont la référence internationale ; leur version 2.2 est la recommandation en vigueur (W3C, WCAG 2.2). Une version 3 est en préparation, mais elle n'est pas encore une norme (W3C, présentation des WCAG 3). En Europe, la directive (UE) 2019/882, dite European Accessibility Act, fixe des exigences d'accessibilité pour certains produits et services, dont le commerce en ligne et l'accès aux services de médias audiovisuels (Commission européenne).

Règle 1 : pas plus de trois flashs par seconde

Le critère 2.3.1 demande qu'un contenu ne flashe pas plus de trois fois par seconde, ou que les flashs restent sous les seuils définis (W3C, critère 2.3.1). En motion design, les transitions stroboscopiques, les flashs blancs rythmés sur la musique ou les clignotements rapides sont les premiers suspects. C'est le seul critère dont le non-respect peut causer un danger physique.

Règle 2 : pouvoir mettre en pause

Tout contenu qui bouge, défile ou clignote, démarre automatiquement, dure plus de cinq secondes et s'affiche en même temps que d'autres contenus doit pouvoir être mis en pause, arrêté ou masqué (W3C, critère 2.2.2). Une vidéo de fond en boucle ou un bandeau qui défile sur un site sont directement concernés.

Animation 3D douce de cubes et sphères, mouvement modéré

Règle 3 : respecter la préférence « réduire les animations »

Les systèmes d'exploitation permettent de demander moins d'animations. Le web y accède via la requête média prefers-reduced-motion (MDN, prefers-reduced-motion), et le critère 2.3.3 recommande de pouvoir désactiver les animations déclenchées par une interaction (niveau AAA) (W3C, critère 2.3.3). Concrètement : remplacer les parallaxes, zooms et défilements par des fondus simples quand la préférence est active.

L'accessibilité garantit que le film atteint tout son public.

Règle 4 : sous-titrer

Les vidéos préenregistrées avec du son doivent proposer des sous-titres (W3C, critère 1.2.2). C'est aussi un enjeu d'audience : beaucoup de vidéos sont regardées sans le son, sur les réseaux sociaux comme dans les transports. Des sous-titres soignés, bien placés dans les zones de sécurité, font partie de la composition.

Règle 5 : un texte lisible

Le texte affiché sur une animation doit respecter un contraste suffisant, au moins 4,5:1 pour le texte courant au niveau AA (W3C, critère 1.4.3), et rester assez longtemps à l'écran pour être lu. Voir contraste et équilibre visuel et typographie animée.

Packshot cosmétique corail, contraste et lisibilité

Ma check-list avant livraison

Aucun flash au-delà de trois par seconde. Une possibilité de pause pour toute animation longue en boucle sur le web. Une version réduite des animations quand l'utilisateur le demande. Des sous-titres pour toute vidéo parlée. Un contraste vérifié pour chaque texte. Ces règles se prévoient dès la conception : elles ne coûtent presque rien au départ, et beaucoup une fois le film terminé.

Questions fréquentes

Combien de flashs par seconde sont autorisés en vidéo ?
Pas plus de trois par seconde, ou des flashs sous les seuils définis, selon le critère 2.3.1 des WCAG 2.2.

Qu'est-ce que prefers-reduced-motion ?
Une requête média qui détecte la préférence « réduire les animations » du système ; on y remplace parallaxes et zooms par des fondus simples.

Une vidéo de fond doit-elle pouvoir être mise en pause ?
Oui, si elle démarre seule, dure plus de cinq secondes et s'affiche avec d'autres contenus (critère 2.2.2).

Les prompts de cet article

Les images et le film de cet article sont générés à partir des prompts ci-dessous, en Flux pour les images et en MiniMax Hailuo pour la vidéo. Copiez-les, adaptez-les à votre marque.

✦ IMAGE PROMPT|Image 1 · couverture 16:9
CGI HIGH-FIDELITY PREVIEW16:9 HD READY
Concept Actif (Cliquer pour copier)Calm minimalist 3D scene of soft matte spheres and arches in pastel stone tones resting in balance, gentle diffused light, serene, no harsh contrast, inclusive design mood, photorealistic
✻ RENDER_CPU
✦ IMAGE PROMPT|Image 2 · corps 1 · pause
CGI HIGH-FIDELITY PREVIEW16:9 HD READY
Concept Actif (Cliquer pour copier)Elegant minimal video player interface over a soft 3D luxury scene, a clearly visible pause control and caption line at the bottom, high contrast text, clean UI mockup, no brand names
✻ RENDER_CPU
✦ IMAGE PROMPT|Image 3 · corps 2 · contraste
CGI HIGH-FIDELITY PREVIEW16:9 HD READY
Concept Actif (Cliquer pour copier)Typography legibility study: the same short caption shown on a busy bright image and on a calm darker area, demonstrating readable contrast, editorial design board, clean
✻ RENDER_CPU
⚛ VIDEO GENERATOR|Vidéo · plan principal
CGI HIGH-FIDELITY PREVIEW16:9 HD READY
Concept Actif (Cliquer pour copier)Soft matte spheres slowly roll and settle into balance in a pastel stone set, then the motion gently fades into a still version as if reduced motion were enabled, calm, no flashes, diffused light
⚛ FLIP_SOLVER_GPU

Vous cherchez un directeur artistique et motion designer de confiance pour votre projet ?

Fabien Bouadi 2026