Animazione da interazioni

Cosa richiede

Le animazioni di movimento attivate dall’interazione dell’utente — parallasse di scorrimento, transizioni di pagina, zoom avviati al passaggio del cursore, effetti di rivelazione basati sullo scroll — devono essere disabilitate quando l’utente richiede un movimento ridotto, a meno che l’animazione non sia essenziale alla funzione o alle informazioni trasmesse.

Il meccanismo standard è la media query CSS prefers-reduced-motion: reduce, che rispecchia l’impostazione di riduzione del movimento a livello di sistema operativo esposta da macOS, Windows, iOS e Android.

Come soddisfarlo

• Racchiudere qualsiasi movimento significativo (trasformazioni, grandi traslazioni, parallasse, transizioni di pagina, animazioni collegate allo scroll) all’interno di @media (prefers-reduced-motion: no-preference).
• Per le animazioni gestite da JavaScript (GSAP, Framer Motion, Lottie), verificare window.matchMedia('(prefers-reduced-motion: reduce)').matches e saltare l’animazione o sostituirla con una variazione di stato istantanea.
• Consentire alle animazioni di feedback critiche (spinner di caricamento, anteprime di trascinamento) di continuare con un’ampiezza più discreta quando la modalità di riduzione del movimento è attiva — esse comunicano una funzione, non un effetto decorativo.
• Effettuare i test con macOS Impostazioni di Sistema → Accessibilità → Display → Riduci movimento attivato, e con le opzioni equivalenti su Windows, iOS e Android.

Errori comuni

• Pagine di marketing con scorrimento parallasse che ignorano la preferenza di riduzione del movimento del sistema operativo.
• Librerie di transizione di pagina (Barba.js, view transitions di Astro in configurazioni più datate) che animano grandi traslazioni indipendentemente dalla preferenza dell’utente.
• Effetti di sollevamento al passaggio del cursore sulle card con lunghe transizioni translateY che causano disagio agli utenti con disturbi vestibolari.
• Animazioni attivate dallo scroll su pagine di lunga forma che scatenano decine di effetti di movimento mentre l’utente scorre — particolarmente disorientante su scala.
• Animazioni Lottie nei flussi di onboarding che riproducono movimenti a schermo intero senza verificare la preferenza.

axe e Lighthouse non segnalano in modo affidabile i fallimenti relativi alla riduzione del movimento, ma il controllo di accessibilità di Lighthouse include una verifica prefers-reduced-motion nelle versioni più recenti, e molti linter per sistemi di design la applicano ora come regola.

Perché è importante

I disturbi vestibolari — malattia di Ménière, emicrania vestibolare, sindrome post-commozione cerebrale, vertigine posturale-percettiva persistente — possono essere aggravati da movimenti ampi o inattesi sullo schermo. Il risultato è una vera e propria nausea o vertigine fisica, non semplice disagio. Rispettare prefers-reduced-motion è uno dei miglioramenti di accessibilità con il minor costo e il maggior impatto disponibili, e l’impostazione a livello di sistema operativo significa che l’utente ha già comunicato le proprie esigenze.