Mouvement accessible : concevoir pour un mouvement réduit sans perdre le sens
Comment concevoir un mouvement qui respecte les paramètres de réduction des mouvements et les troubles vestibulaires : ce qu'exige WCAG, ce qu'il faut supprimer, ce qu'il faut conserver et comment tester.
À retenir
Lorsqu'un utilisateur active la réduction du mouvement, conservez le sens de chaque animation mais supprimez le mouvement : remplacez les diapositives, les zooms et la parallaxe par de courts fondus ou des changements instantanés, arrêtez la lecture automatique des boucles et ne comptez jamais uniquement sur le mouvement pour communiquer quelque chose. Sur le Web, détectez le paramètre avec la requête multimédia préfère-réduire le mouvement.
Pourquoi c'est important
Pour certaines personnes, le mouvement à l’écran n’est pas une question de goût. Le W3C note que l'animation peut déclencher des troubles vestibulaires, avec des réactions telles que des nausées, des migraines et, dans les cas graves, la nécessité de rester au lit pour récupérer. Les systèmes d'exploitation permettent aux utilisateurs de demander moins de mouvement, et sur le Web, cette demande est exposée sous la forme d'une requête multimédia de préférence à mouvement réduit. Sa valeur diminue lorsque l'utilisateur a activé le paramètre.
Ce que WCAG demande
Deux critères de réussite WCAG couvrent le mouvement. 2.2.2 Pause, Arrêter, Masquer s'applique aux mouvements qui démarrent automatiquement, tels que les carrousels et les animations en boucle, et nécessitent un moyen de les mettre en pause, de les arrêter ou de les masquer. 2.3.3 Animation à partir d'interactions (niveau AAA) s'applique au mouvement déclenché par l'interaction de l'utilisateur et suggère d'éviter les animations inutiles, de proposer une commande pour la désactiver ou d'utiliser le paramètre de réduction de mouvement du système d'exploitation. Même lorsque l’AAA n’est pas requis, le suivre constitue une bonne pratique.
Supprimer le mouvement, garder le sens
Un mouvement réduit ne signifie pas aucun retour. Un utilisateur qui appuie sur un bouton doit toujours savoir que cela a fonctionné. Le but est de conserver le changement d’état et de supprimer les déplacements.
- Supprimez ou réduisez : les grandes diapositives, les zooms, la parallaxe, les mouvements liés au défilement, la rotation, les boucles à lecture automatique et la vidéo d'arrière-plan.
- Conserver : changements de couleur et d'opacité, indicateurs de mise au point, transitions d'état courtes, informations de progression.
- Remplacer : transitions de page et de panneau avec un court fondu enchaîné ou un changement instantané.
- Jamais : utilisez le mouvement comme seul moyen d'afficher une erreur, un changement ou un nouvel élément.
Le mettre en œuvre
Sur le Web, enveloppez le mouvement non essentiel dans @media (prefers-reduced-motion : no-preference) ou remplacez-le dans @media (prefers-reduced-motion : réduire). Dans JavaScript, lisez window.matchMedia('(prefers-reduced-motion: reduction)') et écoutez les changements. Les plates-formes natives exposent le même paramètre : SwiftUI, UIKit et Android vous permettent tous de le vérifier. Si votre système de conception comporte des jetons de mouvement, définissez une variante réduite pour chacun afin que chaque composant se comporte de la même manière.
Essai
Activez la réduction des mouvements dans votre système d'exploitation et parcourez chaque flux clé. Vérifiez que rien d'important n'est perdu, qu'aucune boucle ne démarre automatiquement et que le défilement ne déplace pas le contenu au-delà de ce que fait le défilement lui-même. Les outils de développement du navigateur peuvent également émuler le paramètre.
Extrait d’implémentation en production
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Principes clés à retenir
- Le mouvement peut rendre certaines personnes physiquement malades ; respecter le cadre
- Supprimez le déplacement, le zoom, la parallaxe et la lecture automatique ; conserver les changements d'état et les commentaires
- WCAG 2.2.2 couvre le mouvement automatique ; 2.3.3 couvre le mouvement issu de l'interaction
- Détecter le paramètre avec préférences-mouvement réduit et sur chaque plateforme native
- Concevoir une variante réduite pour chaque jeton de mouvement
Questions fréquentes
Sources
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — Documents Web MDN
- Motion — Directives relatives à l'interface humaine Apple