prefers-reduced-motion: da opzione a requisito

Chi gestisce un sito con animazioni elaborate, un hotel con homepage cinematografica o un e-commerce con transizioni sofisticate, ha una scadenza concreta: il 28 giugno 2025. Quella data segna l’entrata in piena applicazione dell’European Accessibility Act per i servizi digitali privati rivolti ai consumatori nell’UE. Le animazioni non gestite correttamente rientrano tra i punti di non conformità.

---

In sintesi

• prefers-reduced-motion è una regola CSS, ovvero un’istruzione di stile per pagine web, che legge la preferenza di accessibilità impostata dall’utente sul proprio dispositivo e permette al sito di ridurre o sostituire le animazioni non essenziali.
• WCAG 2.3.3, le linee guida internazionali sull’accessibilità web al livello più alto di conformità, richiede che qualsiasi animazione avviata dall’interazione dell’utente possa essere disattivata, salvo quando il movimento è essenziale alla funzione.
• Il rischio non è teorico: la Direttiva UE 2019/882, recepita in Italia con D.Lgs. 82/2022, impone obblighi misurabili per e-commerce, servizi bancari, telecomunicazioni e trasporti a partire da giugno 2025.
• L’errore più comune è trattare questa preferenza come un interruttore che spegne tutto. L’obiettivo è ridurre o sostituire il movimento non essenziale, non eliminare ogni animazione.
• Su esperienze tridimensionali realizzate con Three.js o WebGL, tecnologie per grafica 3D nel browser, la gestione corretta richiede tre righe di codice, non una riscrittura completa.

---

Perché non è più una buona pratica facoltativa

Fino a qualche anno fa, prefers-reduced-motion era materia da sviluppatori attenti e basta. Oggi è diventata un requisito operativo in tre contesti distinti, e ignorarla è una scelta attiva, non un’omissione.

Il primo contesto è normativo. Le WCAG, sigla inglese per Web Content Accessibility Guidelines, ovvero le linee guida internazionali per l’accessibilità dei contenuti web, pubblicate dal W3C, il consorzio che definisce gli standard tecnici di internet, hanno raggiunto la versione 2.2. Il criterio 2.3.3, denominato “Animazione da interazioni”, stabilisce che le animazioni non essenziali devono poter essere disattivate dall’utente. Non è una raccomandazione. È un criterio di conformità.

Il secondo contesto è tecnico. I browser principali, Chrome, Safari, Firefox ed Edge, rilevano automaticamente la preferenza impostata nel sistema operativo dell’utente e la comunicano al sito tramite questa regola CSS. Se un visitatore ha attivato “Riduci il movimento” nelle impostazioni di accessibilità del proprio iPhone o del proprio PC Windows, il sito riceve quel segnale in modo silenzioso. Ignorarlo significa che il codice ha visto la preferenza e ha scelto di non rispettarla.

Il terzo contesto è commerciale. Agenzie e studi di comunicazione che consegnano siti con animazioni aggressive senza gestire questa preferenza si trovano con frequenza crescente a rispondere di reclami post-consegna. Il cliente finale scarica il problema sul fornitore. È una dinamica che si ripete, e che inizia ad apparire nei capitolati di gara.

---

Chi sono gli utenti che stai escludendo

Le animazioni che fanno girare la testa non sono solo un fastidio estetico. Chi soffre di disturbi vestibolari, disfunzioni dell’orecchio interno che regolano l’equilibrio, può sentirsi fisicamente male davanti a uno schermo che scorre, ruota o zooma senza controllo. Secondo i dati del National Institutes of Health statunitense, circa il 35% degli adulti sopra i 40 anni ha sperimentato qualche forma di disfunzione vestibolare. Con una popolazione adulta italiana di circa 47 milioni di persone, si parla di milioni di visitatori potenzialmente disturbati da effetti di parallasse, scorrimenti veloci o rotazioni su larga scala.

A questi si aggiungono utenti con epilessia fotosensibile, emicrania cronica e alcune forme di ansia. Non è una nicchia marginale.

Un esempio concreto. Un hotel con una homepage costruita su effetti di parallasse cinematografici, dove le immagini di camera e piscina scorrono a velocità diverse creando un senso di profondità, sta escludendo una fetta dei propri visitatori potenziali. Non per cattiva volontà. Per mancanza di un controllo che richiede poche righe di codice e che, se assente, può tradursi in una prenotazione mancata o, dal 28 giugno 2025, in un profilo di non conformità normativa.

---

L’errore da non fare: spegnere tutto

L’interpretazione più diffusa è sbagliata. Non si tratta di un interruttore binario tra “animazioni accese” e “animazioni spente”. L’obiettivo delle linee guida è ridurre o sostituire il movimento non essenziale. Niente di più.

Il movimento non essenziale comprende: scorrimenti di grandi elementi attraverso il campo visivo, effetti di parallasse, zoom e ingrandimenti rapidi, pannelli che scivolano da fuori schermo, rotazioni di elementi su se stessi, animazioni attivate dallo scorrimento della pagina che spostano blocchi di contenuto. Un pulsante che cambia colore al passaggio del cursore non è un problema. Un’intera sezione che ruota in tre dimensioni quando l’utente scorre la pagina lo è.

La distinzione pratica è questa: se rimuovere l’animazione non cambia la comprensione del contenuto né la funzionalità dell’interfaccia, quella animazione è non essenziale e va gestita. Se invece l’animazione mostra come funziona un meccanismo, come nel caso di un configuratore di prodotto per uno studio di arredamento, o guida l’utente attraverso un flusso di acquisto, può essere mantenuta in forma ridotta.

Resta il fatto che la scelta su cosa mantenere e cosa ridurre è una decisione di prodotto, non solo tecnica. Va presa consapevolmente, non lasciata al caso.

---

Come si gestisce su Three.js e WebGL

Three.js è una libreria JavaScript, un insieme di strumenti di programmazione per il web, che semplifica la creazione di grafica tridimensionale nel browser usando WebGL, l’interfaccia che permette al browser di accedere alla scheda grafica per il rendering 3D. Queste tecnologie compaiono spesso in siti di prodotto, configuratori, presentazioni architettoniche, portfolio creativi.

La buona notizia è che non serve riscrivere nulla. Serve leggere la preferenza dell’utente e rispondere in modo proporzionato.

Il pattern corretto in JavaScript, il linguaggio di programmazione che anima le pagine web, è questo:

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (!prefersReduced) {
  startFullAnimation();
} else {
  showStaticScene();
}

window.matchMedia è la funzione del browser che legge le preferenze di sistema. .matches restituisce vero o falso. Il resto è una decisione di prodotto: cosa mostrare nella versione ridotta.

Per un configuratore di prodotto 3D, la versione ridotta potrebbe essere una rotazione molto lenta o una vista fissa con cambio di angolazione tramite clic. Per una homepage con sfondo animato, potrebbe essere un’immagine statica di alta qualità. La scena non sparisce. Si adatta. Non è un compromesso: è un’interfaccia che funziona per tutti.

---

Il rischio legale per chi commissiona o consegna siti in Italia

La Direttiva UE 2016/2102 sull’accessibilità dei siti web degli enti pubblici è stata recepita in Italia con il D.Lgs. 106/2018. Per la pubblica amministrazione l’obbligo è già vigente e controllato da AgID, l’Agenzia per l’Italia Digitale.

Per i privati, il quadro si sta estendendo. L’European Accessibility Act, Direttiva UE 2019/882, recepita in Italia con D.Lgs. 82/2022, entra in applicazione piena il 28 giugno 2025 per prodotti e servizi digitali rivolti ai consumatori. Le categorie incluse sono ampie: e-commerce, servizi bancari, trasporti, telecomunicazioni.

Chi consegna un sito non conforme a un cliente soggetto a questi obblighi si espone a contestazioni contrattuali. Chi commissiona un sito senza richiedere esplicitamente la conformità si espone a sanzioni amministrative. Non è un rischio astratto: è una clausola che inizia ad apparire nei capitolati di gara e nei contratti di fornitura, ed è destinata a diventare standard.

---

Domande correlate

prefers-reduced-motion vale solo per siti pubblici o anche per e-commerce privati?

Dal 28 giugno 2025, con l’entrata in vigore dell’European Accessibility Act, i requisiti di accessibilità si estendono a e-commerce e servizi digitali privati rivolti ai consumatori nell’UE. Le animazioni non gestite correttamente rientrano tra i potenziali punti di non conformità.

Devo eliminare tutte le animazioni se l’utente ha attivato “Riduci il movimento”?

No. L’obiettivo è ridurre o sostituire le animazioni non essenziali, non eliminarle. Un cambio di colore, una transizione di opacità o un’animazione che illustra il funzionamento di un prodotto possono restare. Vanno rimossi o sostituiti parallasse, rotazioni su larga scala e scorrimenti rapidi di contenuto.

Quanto lavoro richiede adeguare un sito esistente?

Dipende dalla complessità delle animazioni presenti. Per siti con CSS standard, spesso bastano poche ore di revisione. Per esperienze Three.js o WebGL già in produzione, il lavoro è più strutturato ma raramente richiede una riscrittura: si tratta di aggiungere la lettura della preferenza e definire una versione alternativa delle scene animate.

Come verifico se il mio sito gestisce già questa preferenza?

Attiva “Riduci il movimento” nelle impostazioni di accessibilità del tuo dispositivo. Su macOS: Impostazioni di Sistema → Accessibilità → Schermo → Riduci il movimento. Poi visita il tuo sito. Se le animazioni continuano esattamente come prima, il sito non sta leggendo la preferenza.

---

Fonti:

• MDN Web Docs — prefers-reduced-motion CSS media feature: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion (consultato luglio 2025)
• OpenReplay Blog — Prefers-reduced-motion: accessible animation: https://blog.openreplay.com/prefers-reduced-motion-accessible-animation/ (consultato luglio 2025)
• W3C WCAG 2.2 — Success Criterion 2.3.3 Animation from Interactions: https://www.w3.org/TR/WCAG22/#animation-from-interactions (consultato luglio 2025)
• Direttiva UE 2016/2102 sull’accessibilità dei siti web degli enti pubblici: https://eur-lex.europa.eu/legal-content/IT/TXT/?uri=CELEX%3A32016L2102
• Direttiva UE 2019/882 (European Accessibility Act), recepita con D.Lgs. 82/2022: https://eur-lex.europa.eu/legal-content/IT/TXT/?uri=CELEX%3A32019L0882
• AgID — Linee guida sull’accessibilità degli strumenti informatici: https://www.agid.gov.it/it/design-servizi/accessibilita