WCAG 2.3.3: Animazione derivante dalle interazioni

Cosa Significa Questa Regola

WCAG 2.3.3 — Animazione derivante da interazioni è un criterio di livello AAA sotto il principio Operable. Richiede che qualsiasi animazione di movimento attivata da un’interazione possa essere disabilitata dall’utente, a meno che tale animazione non sia essenziale per la funzionalità o per l’informazione trasmessa. Il criterio si applica alle animazioni avviate da azioni dell’utente come clic, scroll, hover, focus o qualsiasi altra forma di interazione — non alle animazioni che partono automaticamente al caricamento della pagina (che possono essere regolate da altri criteri come 2.2.2 Pause, Stop, Hide).

Il concetto chiave qui è l’animazione di movimento. Questo include effetti di parallax scrolling, animazioni di transizione di pagina, scorrimento o zoom degli elementi, indicatori rotanti e qualsiasi altro movimento che si verifica come conseguenza diretta di un’azione dell’utente. Non copre semplici dissolvenze di opacità o cambi di colore, perché non comportano un movimento spaziale in grado di innescare risposte vestibolari. La distinzione è tra movimento nello spazio (che può causare danni) e cambiamenti di aspetto senza spostamento spaziale (che generalmente non possono).

Per superare il criterio è necessario che gli utenti dispongano di un meccanismo affidabile per disattivare tali animazioni senza perdere l’accesso agli stessi contenuti o funzionalità. La tecnica più ampiamente accettata è rispettare la media query a livello di sistema operativo prefers-reduced-motion, che riflette la preferenza di sistema dell’utente per la riduzione del movimento. In alternativa, un interruttore a livello di sito posizionato in modo ben visibile nell’interfaccia — ad esempio in un pannello impostazioni o in un widget di accessibilità — può soddisfare il criterio, a condizione che la preferenza persista tra le sessioni e sia facile da trovare.

L’eccezione per ciò che è essenziale è ristretta: un’animazione è essenziale solo se rimuoverla cambierebbe in modo fondamentale l’informazione o la funzionalità, e non esiste alcuna alternativa equivalente non animata. Un indicatore di caricamento rotante che è l’unico segnale visivo che indica che il contenuto è in fase di recupero potrebbe rientrare in questa eccezione; un’immagine di sfondo decorativa con effetto parallax che si muove mentre l’utente scorre non vi rientra, anche se è esteticamente centrale per il design.

Il criterio non richiede che le animazioni vengano rimosse del tutto — richiede solo che esista un meccanismo per disabilitarle. Quando il meccanismo è attivato, il contenuto deve rimanere pienamente accessibile, il che significa che un’alternativa non animata deve fornire la stessa informazione o raggiungere la stessa funzione.

Perché È Importante

I disturbi vestibolari — condizioni che colpiscono l’orecchio interno e il cervello, che controllano l’equilibrio e il movimento degli occhi — interessano una parte significativa della popolazione mondiale. Secondo la Vestibular Disorders Association, circa il 35% degli adulti di età pari o superiore a 40 anni negli Stati Uniti ha sperimentato qualche forma di disfunzione vestibolare. A livello globale, condizioni come la vertigine parossistica posizionale benigna (BPPV), la malattia di Ménière e l’emicrania vestibolare colpiscono decine di milioni di persone. Per queste persone, il movimento su uno schermo può innescare sintomi fisici immediati, tra cui capogiri, vertigini, nausea, mal di testa e, nei casi più gravi, incapacità temporanea.

Si consideri un utente con emicrania vestibolare che visita un sito di prenotazione viaggi. Il sito utilizza un effetto di parallax scroll a pagina intera in cui l’immagine hero si muove a una velocità diversa rispetto al contenuto della pagina mentre l’utente scorre. Nel giro di pochi secondi dall’inizio dello scroll, l’utente sperimenta forte capogiro e nausea. Non riesce a completare la prenotazione e deve abbandonare completamente il sito — non a causa di una barriera cognitiva o di una disabilità motoria, ma a causa di una reazione fisica al movimento sullo schermo. Questo è il danno reale che WCAG 2.3.3 è progettato per prevenire.

Oltre ai disturbi vestibolari, le animazioni di movimento possono influire negativamente sugli utenti con disturbi da deficit di attenzione, che trovano il movimento persistente o attivato difficile da ignorare e fonte di distrazione, così come sugli utenti con disturbi d’ansia, per i quali un movimento inatteso può causare disagio. Le persone che si stanno riprendendo da commozioni cerebrali o lesioni cerebrali traumatiche sono anch’esse altamente sensibili al movimento visivo. Anche gli utenti senza alcuna diagnosi possono trovare un uso intenso di animazioni affaticante durante sessioni prolungate.

Da una prospettiva di usabilità e di business, rispettare le preferenze di riduzione del movimento è correlato a tassi migliori di completamento dei compiti e a una maggiore durata delle sessioni tra gli utenti sensibili. Rispettare le preferenze a livello di sistema segnala inoltre che un prodotto è ben progettato e attento alle esigenze degli utenti, il che costruisce fiducia. Per l’e-commerce, dove l’abbandono del carrello dovuto a una cattiva esperienza impatta direttamente sui ricavi, rimuovere barriere di animazione non necessarie è un beneficio commerciale concreto.

Regole Axe-core Correlate

WCAG 2.3.3 richiede test manuali. Nessuna regola automatizzata di axe-core mappa direttamente a questo criterio, e ciò è intenzionale, non una svista. Le ragioni per cui gli strumenti automatizzati non possono rilevare in modo affidabile le violazioni sono sostanziali:

• Perché l’automazione non può rilevarlo: Rilevare l’animazione di movimento richiede la comprensione del rendering visivo di una pagina nel tempo in risposta all’interazione dell’utente. Gli scanner di accessibilità automatizzati analizzano snapshot del DOM statici o leggermente renderizzati; non simulano interazioni dell’utente come scroll o clic per poi osservare se le transizioni CSS o le animazioni guidate da JavaScript producono movimento spaziale. Anche se uno scanner potesse rilevare la presenza di proprietà CSS di animazione o transizione, non potrebbe determinare se tale animazione comporta uno spostamento spaziale (che può innescare risposte vestibolari) o una semplice dissolvenza di opacità (che non lo fa). Inoltre, lo scanner non può determinare se una media query prefers-reduced-motion è correttamente collegata per sopprimere l’animazione, se esiste un interruttore a livello di sito o se l’animazione è davvero essenziale. Tutti questi giudizi richiedono un tester umano che possa osservare l’esperienza renderizzata, interagire con la pagina e valutarne l’esito.
• Su cosa deve concentrarsi l’ispezione manuale: I tester devono identificare ogni proprietà CSS che crea movimento spaziale — inclusi transform: translateX/Y/Z, transform: scale, transform: rotate, transizioni di top/left/margin, keyframe di animation che spostano elementi nello spazio — e verificare che ciascuna sia subordinata a una media query prefers-reduced-motion: reduce o a un interruttore controllato dall’utente. Le animazioni guidate da JavaScript che utilizzano librerie come GSAP, Framer Motion o cicli personalizzati requestAnimationFrame devono essere esaminate con la stessa rigore.

Come Eseguire i Test

1. Abilita la riduzione del movimento a livello di sistema operativo: Su macOS, vai su Impostazioni di sistema > Accessibilità > Schermo e abilita “Riduci movimento”. Su Windows 11, vai su Impostazioni > Accessibilità > Effetti visivi e disattiva “Effetti di animazione”. Su iOS, vai su Impostazioni > Accessibilità > Movimento e abilita “Riduci movimento”. Su Android, vai su Impostazioni > Accessibilità > Rimuovi animazioni. Questo imposta la media query prefers-reduced-motion: reduce come attiva.
2. Esegui una scansione automatizzata come base di riferimento: Apri axe DevTools o Lighthouse in Chrome DevTools sulla pagina da testare. Sebbene nessuno dei due strumenti segnalerà direttamente una violazione di WCAG 2.3.3, la scansione può far emergere problemi correlati e conferma che l’ambiente di test è funzionante. Annota eventuali risultati relativi alle animazioni per contesto.
3. Interagisci con la pagina mentre la riduzione del movimento del sistema operativo è attiva: Scorri la pagina lentamente, fai clic su elementi interattivi come pulsanti, interruttori di navigazione, menu a discesa, caroselli e modali. Passa il mouse sugli elementi. Naviga nella pagina con la tastiera usando il tasto Tab. Osserva se vengono ancora riprodotte animazioni di movimento spaziale. Se le animazioni sono soppresse, questo è un superamento del criterio per il percorso basato sulla preferenza di sistema.
4. Disabilita la riduzione del movimento del sistema operativo e testa di nuovo: Con la riduzione del movimento del sistema operativo disattivata, ripeti tutte le interazioni. Identifica ogni animazione di movimento che si attiva in seguito a un’interazione dell’utente. Documenta ciascuna con una descrizione dell’azione che la innesca e dell’animazione osservata.
5. Verifica la presenza di un interruttore di animazione a livello di sito: Se la riduzione del movimento del sistema operativo non è rispettata, cerca un controllo a livello di sito — comunemente presente in un widget di accessibilità, nel menu impostazioni o nel footer. Attivalo e ripeti tutti i test di interazione per confermare che il movimento sia soppresso.
6. Ispeziona CSS e JavaScript per l’implementazione di prefers-reduced-motion: Apri DevTools, vai al pannello Sources o Elements e cerca prefers-reduced-motion nei file di stylesheet. Verifica che tutte le animazioni di movimento identificate siano subordinate a questa media query. In Chrome DevTools puoi emulare la media query: apri la scheda Rendering (More Tools > Rendering) e imposta “Emulate CSS media feature prefers-reduced-motion” su “reduce”. Conferma che le animazioni siano soppresse senza riavviare il browser.
7. Valuta le eccezioni essenziali: Per ogni animazione rimanente quando la riduzione del movimento è attiva, valuta se è realmente essenziale — rimuoverla elimina informazione o funzionalità che non hanno un equivalente non animato? Documenta il tuo ragionamento per ogni valutazione.
8. Verifica con screen reader (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): Gli utenti di screen reader non sono immuni agli effetti vestibolari se hanno anche una visione parziale. Naviga nella pagina usando solo la tastiera mentre uno screen reader è attivo e la riduzione del movimento del sistema operativo è abilitata. Conferma che non vengano attivate animazioni da eventi di focus o da interazioni guidate da tastiera che non rispettano la riduzione del movimento.

Come Correggere

Effetto di parallax scrolling — Non corretto

<!-- Background moves at a different rate than content on scroll -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Creates parallax on scroll */
    height: 100vh;
  }
</style>
<div class='hero'></div>

Effetto di parallax scrolling — Corretto

<!-- Parallax is disabled when the user prefers reduced motion -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Parallax by default */
    height: 100vh;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero {
      background-attachment: scroll; /* Static background; no spatial movement */
    }
  }
</style>
<div class='hero'></div>

Transizione CSS su elemento interattivo — Non corretta

<!-- Button slides and scales on click with no reduced-motion accommodation -->
<style>
  .btn {
    transition: transform 0.4s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }
</style>
<button class='btn'>Submit</button>

Transizione CSS su elemento interattivo — Corretta

<!-- Spatial transform is suppressed; a simple opacity shift conveys state without motion -->
<style>
  .btn {
    transition: transform 0.4s ease, opacity 0.2s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: opacity 0.2s ease; /* Only non-spatial change retained */
    }
    .btn:active {
      transform: none; /* No movement */
      opacity: 0.75;   /* State still communicated visually */
    }
  }
</style>
<button class='btn'>Submit</button>

Libreria di animazione JavaScript (GSAP) — Non corretta

<!-- GSAP tween fires on button click regardless of user motion preference -->
<script>
  document.querySelector('#open-modal').addEventListener('click', () => {
    gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
  });
</script>

Libreria di animazione JavaScript (GSAP) — Corretta

<!-- Check matchMedia before triggering spatial animation; fall back to instant display -->
<script>
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  document.querySelector('#open-modal').addEventListener('click', () => {
    if (prefersReducedMotion) {
      /* Skip spatial movement; just make the modal visible immediately */
      gsap.set('#modal', { opacity: 1, y: 0 });
    } else {
      gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
    }
  });
</script>

Interruttore di animazione a livello di sito (widget di accessibilità) — Modello corretto

<!-- Persist user preference in localStorage and apply a class to <html> -->
<button id='toggle-motion' aria-pressed='false'>Reduce Motion</button>

<style>
  /* Default: animations active */
  .card { transition: transform 0.3s ease; }
  .card:hover { transform: translateY(-8px); }

  /* When user opts out via widget */
  html.reduce-motion .card {
    transition: none;
  }
  html.reduce-motion .card:hover {
    transform: none;
  }
</style>

<script>
  const btn = document.getElementById('toggle-motion');
  const stored = localStorage.getItem('reduceMotion') === 'true';

  if (stored) {
    document.documentElement.classList.add('reduce-motion');
    btn.setAttribute('aria-pressed', 'true');
  }

  btn.addEventListener('click', () => {
    const isActive = document.documentElement.classList.toggle('reduce-motion');
    btn.setAttribute('aria-pressed', String(isActive));
    localStorage.setItem('reduceMotion', String(isActive));
  });
</script>

Errori Comuni

• Applicare prefers-reduced-motion solo alle animazioni CSS ma non alle transizioni CSS: Sia la shorthand animation sia la proprietà transition possono produrre movimento spaziale. I team spesso scrivono una media query per le animazioni con keyframe e dimenticano che transition: transform 0.3s su hover o focus attiva anch’essa un movimento che deve essere subordinato alla preferenza.
• Usare prefers-reduced-motion: no-preference come condizione della media query invece di reduce: Il modello corretto racchiude gli stili per l’esperienza ridotta in @media (prefers-reduced-motion: reduce), non il contrario. Racchiudere gli stili di animazione in @media (prefers-reduced-motion: no-preference) può funzionare ma è più soggetto a errori e spesso viene applicato in modo scorretto, lasciando le animazioni attive per gli utenti che non hanno impostato esplicitamente una preferenza.
• Memorizzare il risultato di matchMedia una sola volta senza ricontrollare: Un utente può cambiare la propria preferenza di sistema mentre la pagina è aperta. Iscriviti a matchMedia(...).addEventListener('change', handler) in modo che le animazioni guidate da JavaScript rispondano ai cambiamenti di preferenza in tempo reale senza richiedere il ricaricamento della pagina.
• Trattare le sole dissolvenze di opacità come animazioni di movimento da sopprimere: Il criterio prende di mira specificamente il movimento spaziale. Rimuovere le transizioni di opacità quando la riduzione del movimento è attiva è eccessivo e peggiora l’usabilità. Le dissolvenze che non spostano gli elementi nello spazio sono generalmente accettabili da mantenere.
• Posizionare l’interruttore di animazione in profondità in un menu impostazioni inaccessibile: Se si utilizza un controllo a livello di sito invece della media query di sistema (o in aggiunta ad essa), deve essere facile da trovare — idealmente nell’header o nel footer persistente del sito, o in un widget accessibile sovrapposto — non nascosto a tre livelli di profondità in una pagina di impostazioni dell’account utente che richiede l’accesso.
• Dare per scontato che tutte le librerie di animazione rispettino automaticamente prefers-reduced-motion: La maggior parte delle librerie di animazione JavaScript, tra cui GSAP, Anime.js e implementazioni personalizzate di requestAnimationFrame, non rispettano automaticamente la media query. Ogni animazione programmata deve essere protetta individualmente con un controllo matchMedia nel livello JavaScript.
• Dichiarare un’animazione essenziale senza un’adeguata giustificazione: I team a volte etichettano animazioni decorative complesse come essenziali per evitare il lavoro di correzione. L’eccezione per ciò che è essenziale è ristretta; un’animazione è essenziale solo se l’informazione che trasmette non può essere espressa con mezzi statici o non animati. Gli indicatori di caricamento, il parallax decorativo e le transizioni di ingresso pagina quasi mai rientrano nella categoria di essenziali.
• Non testare le interazioni oltre al clic — in particolare scroll e hover: Gli effetti di parallax scroll e le trasformazioni attivate da hover sono tra i peggiori responsabili di problemi vestibolari, eppure i test sono spesso limitati alle interazioni tramite clic. Un test completo deve coprire tutte le modalità di interazione, inclusi scroll, hover, focus, drag e navigazione da tastiera.
• Non mantenere la preferenza dell’interruttore a livello di sito tra le sessioni: Se un utente imposta un interruttore del sito per ridurre il movimento e poi naviga su un’altra pagina o torna sul sito il giorno successivo e l’impostazione è stata azzerata, l’accomodamento di fatto è fallito. Le preferenze devono essere memorizzate in localStorage o nel profilo utente e riapplicate a ogni caricamento di pagina.
• Dimenticare gli embed e i widget di terze parti: Feed social incorporati, widget di chat, embed di mappe e script pubblicitari possono introdurre proprie animazioni di movimento completamente al di fuori del controllo CSS del sito ospitante. I contenuti di terze parti devono essere verificati e i fornitori devono essere coinvolti per fornire il supporto alla riduzione del movimento, oppure gli embed devono essere racchiusi in contenitori che sopprimano il movimento tramite strategie di contenimento CSS, ove possibile.

Relazione con le Normative di Accessibilità della Turchia

La Circolare Presidenziale 2025/10 della Turchia, pubblicata nella Gazzetta Ufficiale (Resmî Gazete) n. 32933 il 21 giugno 2025, stabilisce obblighi vincolanti in materia di accessibilità digitale per un insieme definito di tipologie di entità che operano in Turchia. Le entità coperte includono istituzioni e agenzie pubbliche, piattaforme di e-commerce, banche e fornitori di servizi finanziari, ospedali e strutture sanitarie private, operatori di telecomunicazioni con 200.000 o più abbonati, agenzie di viaggio autorizzate, compagnie di trasporto private e scuole private autorizzate dal Ministero dell’Istruzione Nazionale (MoNE).

La Circolare impone la conformità a WCAG 2.1 a livello AA come standard di base per i servizi digitali prodotti o sostanzialmente aggiornati dopo la data di entrata in vigore. WCAG 2.3.3 — Animazione derivante da interazioni è un criterio di livello AAA e pertanto non è un requisito obbligatorio ai sensi della Circolare Presidenziale 2025/10. Le entità coperte non sono legalmente obbligate a implementare questo criterio per ottenere lo status di conformità secondo la legge turca.

Tuttavia, raggiungere la conformità di livello AAA su criteri come 2.3.3 ha un valore pratico e reputazionale significativo per le organizzazioni turche. Le condizioni di sensibilità vestibolare e al movimento sono disabilità invisibili che vengono spesso trascurate negli audit di accessibilità focalizzati in modo ristretto sulla compatibilità con gli screen reader. Per settori come la sanità (ospedali e piattaforme sanitarie private), in cui gli utenti possono includere pazienti con condizioni neurologiche che aumentano la sensibilità al movimento, e per l’e-commerce e le agenzie di viaggio, dove sono comuni pattern di UI con scroll intenso e animazioni, l’implementazione di 2.3.3 dimostra un approccio maturo e incentrato sull’utente all’accessibilità.

Le organizzazioni che perseguono la conformità AAA volontaria — come quelle che cercano vantaggi negli appalti pubblici, l’ingresso in mercati internazionali o certificazioni di settore — dovrebbero trattare il criterio 2.3.3 come prioritario, dato il costo di correzione relativamente basso (una strategia ben strutturata di media query prefers-reduced-motion può essere applicata in modo sistematico a un design system) e il danno fisico diretto che la sua assenza può causare. Includere un controllo delle animazioni all’interno di un widget di accessibilità sovrapposto, come Accsible, consente alle organizzazioni turche di offrire questo accomodamento senza richiedere agli utenti di individuare le impostazioni del proprio sistema operativo — rendendo il percorso verso la riduzione del movimento individuabile e utilizzabile per il pubblico più ampio possibile.