Animazioni accessibili con prefers-reduced-motion
Rispetti le esigenze di accessibilità disabilitando o riducendo le animazioni per gli utenti sensibili al movimento.
Animazioni accessibili con prefers-reduced-motion è una lezione CSS 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 CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Perché ridurre il movimento?
Alcuni utenti soffrono di disturbi vestibolari, epilessia o altre condizioni che rendono le animazioni dannose. CSS fornisce la media query prefers-reduced-motion per rilevare e rispettare la preferenza di sistema.
La query prefers-reduced-motion
Valori della query:
no-preference— l'utente non ha espresso alcuna preferenzareduce— l'utente ha attivato la riduzione del movimento nelle impostazioni del sistema operativo
<div class="box"></div>
L'opzione drastica (sconsigliata)
Un'implementazione comune ma approssimativa che elimina tutte le animazioni. Rimuove anche indicazioni di movimento utili e non disorientanti:
<div class="box"></div>
Meglio: movimento opt-in
Uno schema più sicuro consiste nel definire le animazioni solo per gli utenti che non hanno espresso preferenze sul movimento, lasciando lo stato predefinito privo di movimento:
<button class="btn">Button</button>
<div class="card">Card</div>
Sostituire i tipi di animazione
Sostituisca i movimenti disorientanti (translate, scale, rotate) con alternative accessibili (opacity, color) per gli utenti che preferiscono ridurre il movimento:
<div class="card demo-hover">Hover me</div>
Animazioni infinite
Le animazioni infinite (indicatori di caricamento, pulsazioni) sono particolarmente problematiche. Fornisca un'alternativa statica:
<div class="spinner"></div>
Effetti parallasse
Lo scorrimento con effetto parallasse può causare una grave cinetosi. Lo disattivi sempre per gli utenti che preferiscono ridurre il movimento:
<div class="parallax">Parallax section</div>
Accesso con JavaScript
Verifichi la preferenza in JavaScript quando utilizza la Web Animations API o librerie per lo scorrimento:
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
WCAG e movimento
La norma WCAG 2.3.3 (AAA) richiede che le animazioni attivate dall'interazione possano essere disattivate. L'uso di prefers-reduced-motion è l'approccio CSS consigliato per soddisfare questo criterio.
Testare la riduzione del movimento
Nella scheda Rendering di Chrome DevTools, attivi "Emulate CSS prefers-reduced-motion: reduce" per eseguire i test senza modificare le impostazioni del sistema operativo. In macOS: Preferenze di Sistema → Accessibilità → Riduci movimento.
Documentare l'intento
Commenti le animazioni per spiegare se sono funzionali o semplicemente decorative. Le animazioni funzionali (che indicano un processo o l'avanzamento) devono avere alternative accessibili; quelle decorative possono essere semplicemente rimosse.
Verifica rapida
Quale approccio gestisce al meglio prefers-reduced-motion per un effetto di sollevamento al passaggio del mouse su una scheda?
Riepilogo
Utilizzi prefers-reduced-motion: reduce per rilevare la sensibilità al movimento. Invece di eliminare tutte le animazioni, fornisca uno stato predefinito privo di movimento e attivi il movimento solo all'interno delle query no-preference. Sostituisca le animazioni transform disorientanti con transizioni di opacity o color per gli utenti che preferiscono ridurre il movimento. Esegua i test con l'emulazione di DevTools.
Domande Frequenti
La lezione «Animazioni accessibili con prefers-reduced-motion» è gratuita?
Sì — il testo completo di «Animazioni accessibili con 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 CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Animazioni accessibili con prefers-reduced-motion»?
Rispetti le esigenze di accessibilità disabilitando o riducendo le animazioni per gli utenti sensibili al movimento. Eserciti CSS 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 CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS 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 «Animazioni accessibili con 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 CSS Academy?
Sì. Ogni lezione CSS 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
- Sintassi di @keyframes e proprietà animation
- Direzione, fill-mode e iterazione delle animazioni
- Concatenare e mettere in sequenza le animazioni
- Animazioni accessibili con prefers-reduced-motion