Accessibilità canvas: prefers-reduced-motion e European

prefers-reduced-motion nei canvas: rischio legale ignorato

Dal 28 giugno 2025 l’European Accessibility Act si applica ai privati che offrono servizi digitali al consumatore. Se il tuo sito ha un canvas animato, una presentazione 3D o uno sfondo in movimento, c’è una preferenza di sistema che quasi nessuno legge. Ignorarla non è più solo una lacuna tecnica.

In sintesi

prefers-reduced-motion è una direttiva CSS (fogli di stile a cascata, il linguaggio che controlla l’aspetto visivo delle pagine web) che legge la preferenza di sistema dell’utente e segnala se vuole ridurre le animazioni.
Supportata da Chrome, Firefox, Safari e Edge senza eccezioni dal 2020, secondo la documentazione MDN (Mozilla Developer Network, la principale enciclopedia tecnica del web).
Le animazioni di scaling (ingrandimento e riduzione rapida) e panning (scorrimento panoramico) di oggetti grandi sono trigger vestibolari documentati: possono causare nausea, vertigini, disorientamento in pochi secondi.
I canvas WebGL (ambienti grafici tridimensionali interattivi nel browser) ignorano quasi sempre questa preferenza, anche quando il resto del sito la rispetta correttamente.
L’European Accessibility Act, recepito in Italia con D.Lgs. 82/2022, si applica ai servizi digitali privati dal 28 giugno 2025: chi non rispetta gli standard rischia contestazioni formali.

La preferenza esiste. L’implementazione, quasi mai

prefers-reduced-motion è una media query CSS, ovvero una condizione che inserisci nel codice del sito per dire al browser: “se l’utente ha attivato la riduzione del movimento nelle impostazioni del proprio dispositivo, applica queste regole alternative”. Su macOS si chiama “Riduci il movimento”. Su Windows è “Mostra animazioni in Windows”. Android e iOS hanno opzioni analoghe nelle impostazioni di accessibilità, spesso sotto “Vista” o “Accessibilità”.

La maggior parte dei siti con animazioni CSS standard la rispetta già. Il problema emerge altrove.

Entra nei canvas: gli ambienti grafici avanzati costruiti con WebGL (Web Graphics Library, la tecnologia che porta la grafica tridimensionale direttamente nel browser) o con librerie come Three.js, un insieme di strumenti JavaScript che semplifica la creazione di grafica 3D. Lì la media query esiste, ma quasi nessuno la interroga. Non per malafede. Per abitudine, per mancanza di test, perché nessuno lo ha messo nei requisiti.

Immagina un hotel a Firenze con una presentazione tridimensionale dei propri spazi. L’utente con disturbi vestibolari arriva, il sito rispetta la sua preferenza ovunque, poi apre la sezione “esplora la struttura”. Il canvas parte. Rotazione automatica, zoom sulla camera, scorrimento dei corridoi. L’utente chiude la scheda. Non lascia traccia. Non c’è nessuna notifica, nessun dato in dashboard. La perdita è invisibile.

Lo stesso vale per il configuratore 3D di un produttore di cucine, o la landing page di uno studio di architettura con sfondo animato. Il canvas gira. La preferenza non viene letta.

Chi è colpito, e perché non lo sai

I disturbi vestibolari, cioè i problemi all’apparato dell’equilibrio nell’orecchio interno, riguardano una parte significativa della popolazione adulta. Non sono condizioni rare. Includono vertigini posizionali, malattia di Ménière, nevrite vestibolare e condizioni post-traumatiche o legate all’invecchiamento.

Per queste persone, le animazioni di oggetti grandi in movimento, in particolare quelle che simulano spostamento della telecamera o rotazione nello spazio, possono scatenare sintomi fisici reali nel giro di pochi secondi. Nausea. Disorientamento. Necessità di fermarsi.

Il punto operativo è questo: non lo vedi mai accadere. L’utente non compila un modulo di reclamo. Chiude la scheda e basta. Nessuna segnalazione, nessun dato. Il problema esiste solo quando arriva qualcosa di formale: un audit di accessibilità richiesto da un cliente istituzionale, una contestazione nell’ambito dell’European Accessibility Act, una verifica da parte di un fornitore pubblico con cui vuoi lavorare.

A quel punto il problema era già lì da anni. Solo che non lo sapevi.

Il quadro normativo dal 2025

L’European Accessibility Act, recepito in Italia con il Decreto Legislativo 82/2022, estende gli obblighi di accessibilità digitale a una fascia molto più ampia di operatori economici. La normativa precedente si applicava quasi solo al settore pubblico. Dal 28 giugno 2025 riguarda anche i privati che offrono determinati prodotti e servizi al consumatore: e-commerce, servizi bancari, trasporti, telecomunicazioni.

Gli standard tecnici di riferimento sono le WCAG (Web Content Accessibility Guidelines, in italiano Linee Guida per l’Accessibilità dei Contenuti Web), pubblicate dal W3C (World Wide Web Consortium, l’organizzazione internazionale che definisce gli standard del web). La versione 2.1 include il criterio 2.3.3, classificato come livello AAA, che riguarda esplicitamente le animazioni attivate dall’interazione: se l’utente non le ha richieste, deve poterle disabilitare.

Resta il fatto che ignorare prefers-reduced-motion in un canvas non è più una questione di buona pratica. È una posizione difficile da difendere davanti a un audit formale. Un e-commerce di arredamento con configuratore 3D, un sito immobiliare con tour virtuali, una clinica privata con presentazioni animate dei trattamenti: tutti rientrano nel perimetro. La verifica conviene farla adesso, non dopo una contestazione.

Come si implementa, in concreto

Non è complicato. Il browser espone la preferenza dell’utente attraverso un’API JavaScript (Application Programming Interface, un’interfaccia che permette a due sistemi software di comunicare tra loro): window.matchMedia('(prefers-reduced-motion: reduce)'). Un canvas animato con Three.js o WebGL nativo può interrogarla prima di avviare il loop di animazione, ovvero il ciclo continuo che aggiorna i fotogrammi visibili sullo schermo.

Se la preferenza è attiva, le strade percorribili sono diverse:

Fermare l’animazione e mostrare un’immagine statica o un fotogramma fisso.
Ridurre drasticamente la velocità di rotazione o di movimento della telecamera.
Disabilitare gli effetti di parallasse (la tecnica che simula profondità facendo scorrere elementi a velocità diverse) e limitare i movimenti a transizioni discrete, cioè da uno stato all’altro senza scorrimento continuo.
Aggiungere un pulsante visibile che permette all’utente di attivare o disattivare le animazioni, indipendentemente dalle impostazioni di sistema.

L’ultima opzione è spesso la più robusta. Non tutti sanno dove trovare le impostazioni di accessibilità del proprio dispositivo. Un controllo esplicito in pagina risolve il problema alla radice.

Un esempio concreto: un produttore di mobili su misura può mostrare il modello 3D statico di default e attivare la rotazione automatica solo su richiesta esplicita dell’utente. Questo rispetta chi ha disturbi vestibolari e, come effetto collaterale utile, alleggerisce l’esperienza su dispositivi con risorse limitate, dove le animazioni continue consumano batteria e rallentano il caricamento.

Cosa fare questa settimana

Il test iniziale non richiede nessuno strumento tecnico. Lo puoi fare tu, adesso.

Apri le impostazioni di accessibilità del tuo computer o telefono e attiva la riduzione del movimento.
Visita il tuo sito e osserva le sezioni con grafica animata, presentazioni 3D o sfondi in movimento.
Se il canvas continua ad animarsi come se nulla fosse, la preferenza non viene letta.

Tre minuti. Il risultato ti dice se c’è un problema da portare all’agenzia o al team che gestisce il sito.

Il passo successivo è inserire la verifica di prefers-reduced-motion nei criteri di accettazione, cioè nei requisiti che un sito o una funzionalità deve soddisfare prima di essere considerata completata, di qualsiasi nuovo sviluppo che preveda animazioni. Non serve aspettare un audit esterno per farlo.

Domande correlate

Quali browser supportano prefers-reduced-motion?

Tutti i browser moderni la supportano senza eccezioni dal 2020: Chrome, Firefox, Safari, Edge. La compatibilità non è il problema. Il problema è che gli sviluppatori di canvas e ambienti WebGL raramente la interrogano, anche quando il resto del sito già la rispetta.

L’accessibilità dei canvas è obbligatoria per la mia azienda?

Dipende dal settore e dal tipo di servizio offerto. Dal 28 giugno 2025 l’European Accessibility Act si applica a molti operatori privati che offrono servizi digitali al consumatore. Prima di quella data conviene verificare se la propria attività rientra nel perimetro normativo con chi conosce il D.Lgs. 82/2022.

Posso aggiungere un pulsante “disattiva animazioni” invece di usare la media query?

Sì, è una soluzione valida e spesso più robusta. Un controllo esplicito visibile sulla pagina permette all’utente di scegliere indipendentemente dalle impostazioni di sistema, che non tutti sanno dove trovare. Le due soluzioni non si escludono: meglio implementarle entrambe.

Quanto costa adeguare un canvas esistente?

Dipende dalla complessità. Per un canvas con animazione semplice si tratta di poche ore. Per un configuratore 3D articolato con molti stati di animazione può richiedere una revisione più strutturata della logica di rendering, ovvero del processo che trasforma i dati in immagini visibili sullo schermo. In entrambi i casi, meno di una contestazione formale.

Fonti:

MDN Web Docs, prefers-reduced-motion, Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion (accesso giugno 2025)
W3C, Understanding Success Criterion 2.3.3: Animation from Interactions, WCAG 2.1: https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html (accesso giugno 2025)
Decreto Legislativo 27 maggio 2022, n. 82, recepimento European Accessibility Act: https://www.gazzettaufficiale.it/eli/id/2022/06/24/022G0107/sg (accesso giugno 2025)