Prefers reduced motion: animazioni che tutti possono usare

Prefers reduced motion, scritto prefers-reduced-motion in CSS, è una media feature che dice al tuo sito che un visitatore ha chiesto al suo dispositivo di ridurre al minimo il movimento non essenziale. Quando restituisce reduce, devi calmare la pagina: fermare i loop in riproduzione automatica, sostituire scorrimenti, zoom e parallasse con dissolvenze delicate o con nulla, e mostrare versioni ferme degli sfondi animati. È poco lavoro, e rende un sito utilizzabile per persone che altrimenti lo lascerebbero sentendosi male.

Per chi è la riduzione del movimento

Alcune persone hanno disturbi vestibolari, che colpiscono l’orecchio interno e il senso dell’equilibrio e del movimento del cervello. Per loro un movimento ampio sullo schermo, soprattutto parallasse, zoom ed elementi che scorrono su grandi aree, può scatenare vertigini, nausea, mal di testa o disorientamento. Altre trovano distraente il movimento continuo, soffrono di emicrania o semplicemente preferiscono uno schermo più calmo. Usano tutte lo stesso interruttore nelle impostazioni del dispositivo, e non dovrebbero dover spiegare il perché.

Cosa ridurre e cosa può restare

Ridurre il movimento non equivale a nessun movimento. L’obiettivo è eliminare il movimento che simula un viaggio nello spazio o che riempie grandi parti dello schermo, e fermare tutto ciò che parte da solo. Un feedback piccolo e rapido e le semplici dissolvenze vanno in genere bene, e spesso aiutano a capire cosa è cambiato.

Dove puoi, sostituisci invece di eliminare. Se un pannello di solito entra scorrendo di lato, fallo comparire in dissolvenza. Se l’hero riproduce un loop, mostrane un fotogramma fermo. Il design resta intatto; se ne va solo lo spostamento.

Come rispettare prefers-reduced-motion in CSS

L’approccio più solido è trattare il movimento come un miglioramento. Scrivi prima il design fermo, poi aggiungi il movimento dentro una media query che si applica solo quando il visitatore non ha preferenze. Se la query non è supportata o l’impostazione è attiva, la pagina è semplicemente ferma. La pagina di MDN su prefers-reduced-motion documenta la funzione.

/* Still by default */
.hero-bg {
  background: linear-gradient(135deg, #1e1b4b, #6d28d9 55%, #db2777);
  background-size: 100% 100%;
}
.card {
  opacity: 0;
  transition: opacity 200ms ease-out; /* a fade is fine for everyone */
}
.card.is-visible {
  opacity: 1;
}

/* Movement only for visitors with no preference */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg {
    background-size: 200% 200%;
    animation: drift 20s linear infinite alternate;
  }
  .card {
    transform: translateY(24px);
    transition: opacity 200ms ease-out, transform 300ms cubic-bezier(0, 0, 0.2, 1);
  }
  .card.is-visible {
    transform: none;
  }
}

@keyframes drift {
  to { background-position: 100% 100%; }
}

Ridurre il movimento in JavaScript, video e canvas

Il movimento guidato dagli script, come effetti di scroll, sfondi canvas o WebGL e video, richiede un controllo in JavaScript. Leggi l’impostazione con matchMedia e ascolta i cambiamenti, perché le persone possono modificarla mentre la tua pagina è aperta.

const query = matchMedia('(prefers-reduced-motion: reduce)')
const video = document.querySelector('.hero-video')

function apply() {
  if (query.matches) {
    video?.pause()            // the poster image stays
    stopBackgroundLoop()      // your canvas or WebGL loop: draw one frame, then stop
  } else {
    video?.play().catch(() => {})
    startBackgroundLoop()
  }
}

query.addEventListener('change', apply)
apply()

I video di sfondo e i gradienti dal vivo sono i colpevoli più comuni, perché partono da soli. I video di sfondo sui siti web e i gradienti shader mostrano entrambi dove va il controllo.

Cosa dicono le WCAG sul movimento

Tre criteri di successo delle Web Content Accessibility Guidelines riguardano il movimento. Supportare la riduzione del movimento è il modo pratico per soddisfare il primo; un controllo di pausa gestisce il secondo.

Progettare versioni ferme che restino belle

La versione ferma non deve sembrare una versione rotta. Per gli sfondi animati, scegli il fotogramma che rende meglio da solo, non quello che capita per primo. Per le entrate, assicurati che il layout finale sia completo anche senza. Per i loop creati con un materiale del brand, un fermo immagine ben scelto dello stesso materiale mantiene intatta l’identità. I principi del motion design suggeriscono proprio per questo di provare ogni animazione con un singolo fotogramma in pausa.

Gradiently segue la stessa regola: i Mark dal vivo nell’app restano fermi quando il tuo dispositivo chiede di ridurre il movimento, e ogni design che esporti come loop si può esportare anche come PNG fermo dello stesso Mark, per i contesti in cui il movimento non è gradito. Per i post social, dove non puoi rilevare l’impostazione, l’approccio più gentile è un movimento lento e delicato; leggi sfondi con gradiente animato.

1. 1

   Attiva l’impostazione

   Abilita la riduzione del movimento nel sistema operativo e ricarica il sito.

2. 2

   Controlla tutto ciò che si muove

   Hero, caroselli, effetti di scroll, video, canvas e stati di caricamento devono essere tutti calmi.

3. 3

   Cambiala con la pagina aperta

   I tuoi script devono seguire il cambiamento senza ricaricare.

4. 4

   Emulala negli strumenti per sviluppatori

   Chrome e Firefox possono emulare la media feature, il che è più rapido mentre lavori.

5. 5

   Guarda il design fermo

   Assicurati che la versione ridotta sembri voluta e completa, non qualcosa che non si è caricato.