prefers-reduced-motion: Pattern CSS, JavaScript e React | We.Inc
Rileva l'impostazione di riduzione del movimento in CSS e JavaScript, guarda la tua impostazione dal vivo e copia pattern che sostituiscono i grandi movimenti con dissolvenze invece di eliminare le animazioni.
Rispettare prefers-reduced-motion
prefers-reduced-motion è una media feature CSS che indica se un visitatore ha chiesto al proprio dispositivo meno movimento. Ha due valori, no-preference e reduce. Racchiudi i movimenti ampi come parallax, zoom e scorrimenti in una query e, quando il valore è reduce, sostituiscili con una breve dissolvenza o con nessuna animazione.
Impostazioni di Sistema > Accessibilità > Schermo (o Movimento) > Riduci movimento
iOS
Impostazioni > Accessibilità > Movimento > Riduci movimento
Android 9 e successivi
Impostazioni > Accessibilità > Rimuovi animazioni
Firefox (test)
about:config, imposta ui.prefersReducedMotion a 1
Le persone attivano la riduzione del movimento perché scorrimenti, zoom e parallax possono provocare vertigini, nausea o mal di testa, soprattutto in chi soffre di disturbi vestibolari. Il badge qui sotto legge dal vivo l'impostazione del tuo dispositivo e la demo mostra la stessa animazione in versione completa e ridotta, così puoi confrontarle prima di scegliere un pattern.
Guarda il badge: mostra cosa riporta il tuo dispositivo in questo momento e si aggiorna se cambi l'impostazione.
Usa l'interruttore di anteprima per vedere la versione ridotta della demo senza cambiare l'impostazione di sistema.
Copia il pattern CSS, JavaScript o React adatto al modo in cui il tuo sito anima gli elementi.
Riduci, non eliminare. Una rapida dissolvenza dell'opacità mostra comunque che qualcosa è cambiato senza muoversi sullo schermo.
Scrivi il movimento come miglioramento: metti le animazioni dentro @media (prefers-reduced-motion: no-preference) così la versione sicura è quella predefinita.
Video in riproduzione automatica e caroselli hanno bisogno anche di un controllo di pausa, qualunque sia l'impostazione di movimento.
In Chrome DevTools puoi emulare l'impostazione dal pannello Rendering per fare test senza cambiare il sistema.
Contano anche gli effetti attivati dallo scroll. Parallax ampi e scroll-jacking sono le lamentele più comuni.
Domande frequenti
Quali valori ha prefers-reduced-motion?
Due: no-preference, quando il visitatore non ha impostato nulla, e reduce, quando ha chiesto meno movimento. Scrivere @media (prefers-reduced-motion) da solo equivale a chiedere reduce.
Come controllo prefers-reduced-motion in JavaScript?
Chiama window.matchMedia("(prefers-reduced-motion: reduce)") e leggi la sua proprietà matches. Aggiungi un listener dell'evento change all'oggetto restituito per reagire quando l'impostazione cambia mentre la pagina è aperta.
Devo disattivare tutte le animazioni quando è impostato reduce?
No. La richiesta è di meno movimento, non di una pagina congelata. Mantieni cambi di colore, brevi dissolvenze e indicatori di avanzamento, e rimuovi o riduci movimenti come scorrimenti, ridimensionamenti, rotazioni e parallax.
Rispettare la riduzione del movimento è richiesto dalle WCAG?
Il criterio WCAG 2.3.3 Animazione da interazioni, livello AAA, chiede che il movimento attivato da un'interazione possa essere disattivato, a meno che non sia essenziale. Rispettare l'impostazione di sistema è uno dei modi indicati per soddisfarlo. Separatamente, il 2.2.2 Pausa, stop, nascondi di livello A riguarda il movimento che parte da solo.
Come gestisco la riduzione del movimento in Tailwind?
Usa la variante motion-safe: per applicare un'animazione solo quando non è impostata alcuna preferenza, oppure motion-reduce: per annullarne una quando è impostato reduce, per esempio motion-safe:animate-bounce.
Quali movimenti causano problemi
Il problema è il movimento che occupa una grande parte della vista o si sposta in una direzione non causata dal visitatore: sfondi parallax, zoom a tutta pagina, cambi di pagina a scorrimento, elementi che ruotano e contenuti che saltano mentre scorri.
Un feedback piccolo, rapido e avviato dall'utente, come il cambio di colore di un pulsante o la spunta di una casella, raramente è un problema e di solito può restare.
CSS senza movimento come base
Molti siti aggiungono alla fine una query reduce che imposta ogni durata quasi a zero. Funziona, ma è facile dimenticare un'animazione, e alcuni script ascoltano eventi animationend che a quel punto scattano all'istante.
Scrivere il movimento dentro una query no-preference ribalta l'impostazione predefinita. Chi ha un browser che non riporta una preferenza riceve comunque il movimento, e tutto ciò che dimentichi ricade sulla versione tranquilla.
Script e librerie
Le query CSS non raggiungono le animazioni avviate da JavaScript, canvas o chiamate di scorrimento fluido. Controlla la media query prima di chiamare element.animate() o scrollIntoView con behavior: smooth.
Leggi l'impostazione una volta all'avvio e iscriviti al suo evento change, così chi la cambia durante la visita viene rispettato senza ricaricare.
Pattern CSS
Il movimento come miglioramento
La card entra scorrendo solo quando non è impostata alcuna preferenza. Tutti gli altri vedono una dissolvenza delicata.
Una rete di sicurezza per i siti esistenti
Utile quando non puoi riscrivere ogni animazione. Le durate diventano quasi zero invece di none, così gli eventi animationend e transitionend scattano comunque.
JavaScript e React
Leggere l'impostazione e seguirne i cambiamenti
matchMedia restituisce una lista live. Il suo evento change scatta quando il visitatore cambia l'impostazione.
Hook React: usePrefersReducedMotion
Parte da true sul server così nulla si anima prima che il browser abbia risposto.
Con cosa sostituire ogni effetto
Alternative ridotte
Movimento completo
Versione ridotta
Sfondo parallax
Sfondo statico
Cambio pagina con scorrimento o zoom
Dissolvenza incrociata, o un cambio istantaneo
Elemento che entra volando durante lo scroll
Breve dissolvenza sul posto
Loader che ruota
Opacità pulsante o una barra di avanzamento
Scorrimento fluido verso un'ancora
Salto istantaneo
Video di sfondo in riproduzione automatica
Immagine poster con un pulsante play
La tua impostazione di movimento
Il badge legge l'impostazione del tuo dispositivo con matchMedia, e l'interruttore di anteprima mostra l'animazione ridotta senza cambiare il tuo sistema.
Modalità anteprima
Segui la mia impostazione
Anteprima movimento completo
Anteprima ridotta
Riproduci di nuovo
Ridotto: una breve dissolvenza sul posto.
Movimento completo: il pannello vola, ruota e si ingrandisce.