Rispettare prefers-reduced-motion
Rilevare la media query prefers-reduced-motion e disabilitare o ridurre le animazioni per gli utenti che hanno richiesto meno movimento.
Rispettare prefers-reduced-motion è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
La media feature prefers-reduced-motion
Alcuni utenti possono avvertire nausea, vertigini o convulsioni a causa del movimento nelle interfacce. Impostano il sistema operativo per ridurre il movimento. La media feature prefers-reduced-motion rileva questa preferenza, consentendo al CSS di reagire di conseguenza.
Rilevare il movimento ridotto in CSS
Racchiudete le animazioni nella query opposta: applicatele normalmente, poi sovrascrivetele o disabilitatele per gli utenti che preferiscono una quantità minore di movimento.
/* Apply animation by default */
.spinner {
animation: spin 1s linear infinite;
}
/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
}Il principio «Ridotto, non assente»
prefers-reduced-motion: reduce non significa eliminare ogni movimento. Alcuni movimenti comunicano importanti cambiamenti dello stato dell’interfaccia. Invece di rimuovere completamente le animazioni, rallentatele o semplificatele trasformandole in dissolvenze incrociate.
@media (prefers-reduced-motion: reduce) {
.modal {
/* Replace scale + fade with just fade */
animation: fadeOnly 0.1s linear;
}
@keyframes fadeOnly {
from { opacity: 0; }
to { opacity: 1; }
}
}L’opzione drastica: disabilitare tutte le animazioni
Un approccio comune consiste nel disabilitare globalmente tutte le transizioni e le animazioni per gli utenti che preferiscono una quantità minore di movimento. È una base sicura, anche se non tutte le animazioni sono state ottimizzate singolarmente.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Rilevare il movimento ridotto in JavaScript
Utilizzate l’API matchMedia per rilevare la preferenza in JavaScript: è utile per controllare le animazioni su canvas, i movimenti gestiti da JavaScript o la riproduzione automatica dei video.
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReduced.matches) {
// skip gsap or canvas animations
} else {
startAnimation();
}
// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
if (e.matches) stopAnimations();
else startAnimations();
});Comportamento dello scorrimento e riproduzione automatica
Disabilitate anche lo scorrimento fluido per gli utenti che preferiscono una quantità minore di movimento: scroll-behavior: auto. Interrompete la riproduzione automatica dei video. Non fate lampeggiare né stroboscopizzare i contenuti.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
// In JS:
if (!prefersReduced.matches) {
element.scrollIntoView({ behavior: 'smooth' });
} else {
element.scrollIntoView(); // instant
}WCAG 2.3.3 — Animazioni causate dalle interazioni
La WCAG 2.3.3 (Livello AAA) richiede che il movimento attivato dall’interazione dell’utente possa essere disabilitato. Rispettando prefers-reduced-motion, soddisfate questo criterio e migliorate l’accessibilità per gli utenti con disturbi vestibolari.
Testare il movimento ridotto
In Chrome DevTools, aprite il pannello Rendering (menu a tre puntini → Altri strumenti → Rendering) e attivate «Emulate CSS media feature prefers-reduced-motion». Testate l’interfaccia in questa modalità prima della pubblicazione.
Esercizio pratico: schema per animazioni sicure
Un’animazione sicura rispetto al movimento viene applicata per impostazione predefinita ed è racchiusa in modo da poter essere disabilitata facilmente a livello globale.
@keyframes slideIn {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
.alert {
animation: slideIn 0.3s ease;
}
}L’animazione del focus deve rimanere
Gli indicatori del focus (l’anello che mostra quale elemento è selezionato) NON devono essere rimossi neppure per gli utenti che preferiscono una quantità minore di movimento. Sono essenziali per la navigazione da tastiera e in genere non provocano disturbi vestibolari.
Librerie e prefers-reduced-motion
Le librerie di animazione più diffuse (Framer Motion, GSAP, Anime.js) supportano nativamente la riduzione del movimento. L’hook useReducedMotion() di Framer Motion semplifica la disabilitazione condizionale delle animazioni complesse in React.
Verifica rapida
Quale media feature CSS rileva la preferenza dell’utente per una quantità minore di movimento nell’interfaccia?
Riepilogo: prefers-reduced-motion
Alcuni utenti hanno bisogno di una quantità minore di movimento per motivi di salute vestibolare e neurologica. Utilizzate @media (prefers-reduced-motion: reduce) per disabilitare o semplificare le animazioni. Rilevate la preferenza in JS con matchMedia. L’opzione drastica consiste nell’impostare globalmente animation/transition-duration su 0.01ms. La WCAG 2.3.3 lo raccomanda. Eseguite i test nel pannello Rendering di DevTools.
Domande Frequenti
La lezione «Rispettare prefers-reduced-motion» è gratuita?
Sì — il testo completo di «Rispettare prefers-reduced-motion» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Rispettare prefers-reduced-motion»?
Rilevare la media query prefers-reduced-motion e disabilitare o ridurre le animazioni per gli utenti che hanno richiesto meno movimento. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Rispettare prefers-reduced-motion»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Proprietà personalizzate CSS: dichiarazione e aggiornamento
- Transizioni: proprietà, durata e temporizzazione
- Animazioni @keyframes
- Rispettare prefers-reduced-motion