prefers-reduced-motion: a volte meno movimento è più

La query sui contenuti multimediali prefers-reduced-motion rileva se l'utente ha richiesto al sistema operativo di ridurre al minimo la quantità di animazione o movimento utilizzata.

Thomas Steiner

Non a tutti piacciono le animazioni o le transizioni decorative e alcuni utenti soffrono di cinetosi quando si trovano di fronte a scorrimento parallattico, effetti di zoom e altro ancora. La query media per le preferenze dell'utente prefers-reduced-motion ti consente di progettare una variante del tuo sito con movimenti ridotti per gli utenti che hanno espresso questa preferenza.

Troppo movimento nella vita reale e sul web

L'altro giorno pattinavo con i miei figli. Era una bella giornata, il sole splendeva e la pista di ghiaccio era affollata di gente ⛸. L'unico problema: non so gestire bene la folla. Con così molti obiettivi in movimento, non riesco a concentrarmi su nulla e finisco per sentirmi perso e con una sensazione di completo sovraccarico visivo, quasi come se guardassi una formicaio 🐜.

A volte può succedere lo stesso sul web: con annunci lampeggianti, effetti di parallasse elaborati, animazioni di rivelazione sorprendenti, video con riproduzione automatica e altro ancora, a volte il web può essere piuttosto opprimente… Fortunatamente, a differenza della vita reale, esiste una soluzione. La query sui media CSS prefers-reduced-motion consente agli sviluppatori di creare una variante di una pagina per gli utenti che preferiscono un movimento ridotto. Può trattarsi di qualsiasi cosa, dall'evitare la riproduzione automatica dei video alla disattivazione di determinati effetti puramente decorativi, fino alla riprogettazione completa di una pagina per determinati utenti.

Prima di approfondire la funzionalità, facciamo un passo indietro e pensiamo a cosa si usano le animazioni sul web. Se vuoi, puoi anche saltare le informazioni di sfondo e passare direttamente ai dettagli tecnici.

Animazione sul web

Le animazioni vengono spesso utilizzate per fornire feedback all'utente, ad esempio per comunicargli che un'azione è stata ricevuta ed è in corso di elaborazione. Ad esempio, su un sito web di shopping, un prodotto potrebbe essere animato in modo da "volare" in un carrello virtuale, rappresentato come un'icona nell'angolo in alto a destra del sito.

Un altro caso d'uso prevede l'utilizzo del movimento per manipolare la percezione dell'utente tramite una combinazione di schermate di scheletro, metadati contestuali e anteprime di immagini di bassa qualità per occupare molto tempo dell'utente e far sembrare più veloce l'intera esperienza. L'idea è fornire all'utente il contesto di ciò che sta per accadere e nel frattempo caricare le informazioni il più rapidamente possibile.

Infine, ci sono effetti decorativi come gradienti animati, scorrimento parallattico, video in background e molti altri. Sebbene molte persone apprezzino queste animazioni, alcune non le amano perché si sentono distratte o rallentate. Nel peggiore dei casi, gli utenti potrebbero persino soffrire di cinetosi come se si trattasse di un'esperienza reale, quindi per questi utenti la riduzione delle animazioni è una necessità medica.

Disturbo dello spettro vestibolare innescato dal movimento

Alcuni utenti avvertono distrazione o nausea a causa dei contenuti animati. Ad esempio, le animazioni con scorrimento possono causare disturbi vestibolari quando elementi diversi dall'elemento principale associato allo scorrimento si spostano molto. Ad esempio, le animazioni con scorrimento parallasse possono causare disturbi vestibolari perché gli elementi di sfondo si muovono a una velocità diversa rispetto agli elementi in primo piano. Le reazioni relative a disturbi vestibolari (dell'orecchio interno) includono vertigini, nausea e emicrania e a volte richiedono il riposo a letto per il recupero.

Rimuovere il movimento sui sistemi operativi

Molti sistemi operativi dispongono da tempo di impostazioni di accessibilità per specificare una preferenza per le animazioni ridotte. Gli screenshot seguenti mostrano l'opzione Riduci movimento di macOS Mojave e l'opzione Rimuovi animazioni di Android Pie. Se selezionate, queste preferenze impediscono al sistema operativo di utilizzare effetti decorativi come le animazioni di avvio delle app. Anche le applicazioni stesse possono e devono rispettare questa impostazione e rimuovere tutte le animazioni non necessarie.

Rimuovere il movimento sul web

Il livello 5 delle query sui media consente di applicare la preferenza dell'utente per le animazioni ridotte anche al web. Le query sui media consentono agli autori di testare e eseguire query sui valori o sulle funzionalità dell'agente utente o del dispositivo di visualizzazione indipendentemente dal documento visualizzato. La query media prefers-reduced-motion viene utilizzata per rilevare se l'utente ha impostato una preferenza del sistema operativo per ridurre al minimo la quantità di animazione o movimento utilizzata. Può assumere due valori possibili:

• no-preference: indica che l'utente non ha impostato alcuna preferenza nel sistema operativo di base. Questo valore della parola chiave viene valutato come false nel contesto booleano.
• reduce: indica che l'utente ha impostato una preferenza del sistema operativo che indica che le interfacce devono ridurre al minimo il movimento o l'animazione, preferibilmente fino a quando non viene rimosso tutto il movimento non essenziale.

Utilizzare la query sui media dai contesti CSS e JavaScript

Come per tutte le query sui media, prefers-reduced-motion può essere controllato da un contesto CSS e da un contesto JavaScript.

Per illustrare entrambi, supponiamo che io abbia un pulsante di registrazione importante su cui voglio che l'utente faccia clic. Potrei definire un'animazione "vibrante" che attira l'attenzione, ma da buon cittadino del web la mostrerò solo agli utenti che accettano esplicitamente le animazioni, ma non a tutti gli altri, ad esempio agli utenti che hanno disattivato le animazioni o a quelli che utilizzano browser che non comprendono la query sui media.

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

Per illustrare come utilizzare prefers-reduced-motion con JavaScript, immagina di aver definito un'animazione complessa con l'API delle animazioni web. Mentre le regole CSS vengono attivate dinamicamente dal browser quando le preferenze dell'utente cambiano, per le animazioni JavaScript devo rilevare le modifiche autonomamente e interrompere manualmente le animazioni potenzialmente in esecuzione (o riavviarle se l'utente me lo consente):

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

Tieni presente che le parentesi che circondano la query sui contenuti multimediali effettiva sono obbligatorie:

window.matchMedia('prefers-reduced-motion: reduce');

window.matchMedia('(prefers-reduced-motion: reduce)');

Utilizzo della query sui contenuti multimediali dai contesti <picture>

Un caso d'uso interessante è rendere la riproduzione di un'animazione AVIF, WebP o GIF dipendente dall'attributo media. Se (prefers-reduced-motion: no-preference) ha valore true, è possibile visualizzare la versione animata, altrimenti la versione statica:

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

Puoi vedere l'esempio seguente. Prova a disattivare e riattivare le preferenze relative al movimento del dispositivo per vedere la differenza.

Scoprire le preferenze dell'utente al momento della richiesta

L'intestazione dell'indicazione client Sec-CH-Prefers-Reduced-Motion consente ai siti di ottenere facoltativamente le preferenze di movimento dell'utente al momento della richiesta, consentendo ai server di inserire in linea il CSS corretto per motivi di prestazioni.

Demo

Ho creato una piccola demo basata sui fantastici 🐈 gatti di stato HTTP di Rogério Vicente. Innanzitutto, prenditi un momento per apprezzare la barzelletta, è divertentissima e io aspetterò. Ora che sei tornato, ti presenterò la demo. Quando scorri, ogni stato HTTP viene visualizzato alternativamente sul lato destro o sinistro. Si tratta di un'animazione fluida a 60 FPS, ma come indicato in precedenza, alcuni utenti potrebbero non apprezzarla o addirittura soffrire di cinetosi, pertanto la demo è programmata per rispettare prefers-reduced-motion. Questo funziona anche in modo dinamico, quindi gli utenti possono cambiare le proprie preferenze in tempo reale, senza bisogno di ricaricare la pagina. Se un utente preferisce ridurre il movimento, le animazioni di visualizzazione non necessarie vengono rimosse e rimane solo il movimento di scorrimento normale. Il screencast seguente mostra la demo in azione:

Conclusioni

Il rispetto delle preferenze degli utenti è fondamentale per i siti web moderni e i browser stanno esponendo sempre più funzionalità per consentire agli sviluppatori web di farlo. Un altro esempio lanciato è prefers-color-scheme, che rileva se l'utente preferisce una combinazione di colori chiara o scura. Puoi scoprire di più su prefers-color-scheme nel mio articolo Hello Darkness, My Old Friend 🌒.

Il gruppo di lavoro CSS sta standardizzando altre query sui contenuti multimediali per le preferenze dell'utente come prefers-reduced-transparency (rileva se l'utente preferisce una trasparenza ridotta), prefers-contrast (rileva se l'utente ha richiesto al sistema di aumentare o diminuire la quantità di contrasto tra i colori adiacenti) e inverted-colors (rileva se l'utente preferisce i colori invertiti).

(Extra) Imposizione del movimento ridotto su tutti i siti web

Non tutti i siti utilizzeranno prefers-reduced-motion o forse non in misura sufficiente per i tuoi gusti. Se, per qualsiasi motivo, vuoi interrompere il movimento su tutti i siti web, puoi farlo. Un modo per farlo è inserire un foglio di stile con il seguente codice CSS in ogni pagina web che visiti. Esistono diverse estensioni del browser (da utilizzare a proprio rischio) che consentono di farlo.

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
  }
}

Il CSS precedente sostituisce le durate di tutte le animazioni e transizioni in un lasso di tempo così breve che non sono più visibili. Poiché alcuni siti web richiedono l'esecuzione di un'animazione per funzionare correttamente (ad esempio perché un determinato passaggio dipende dall'attivazione dell'evento animationend), l'approccio animation: none !important; più radicale non funzionerebbe. Anche l'hack precedente non garantisce il funzionamento su tutti i siti web (ad esempio, non può interrompere il movimento avviato utilizzando l'API Web Animations), quindi assicurati di disattivarlo quando noti un malfunzionamento.

Link correlati

• La bozza dell'editor più recente delle specifiche di Media Queries 5.
• prefers-reduced-motion su Stato della piattaforma Chrome.
• prefers-reduced-motion Bug di Chromium.
• Lampeggia Intent to Implement posting.

Ringraziamenti

Un grande ringraziamento a Stephen McGruer, che ha implementatoprefers-reduced-motion in Chrome e, insieme a Rob Dodson, ha anche esaminato questo documento. Immagine hero di Hannah Cauhepe su Unsplash.