Reduced motion

«Reduced motion» è una preferenza dell’utente, esposta da tutti i moderni sistemi operativi, che indica che l’utente non desidera contenuti animati, parallax o comunque ricchi di movimento. Gli autori la rilevano tramite la media query CSS @media (prefers-reduced-motion: reduce).

Chi ha bisogno di movimento ridotto

Diversi gruppi di persone con disabilità sono interessati dal movimento sul web:

• Disturbi vestibolari — vertigini, malattia di Ménière e condizioni correlate possono essere innescate o aggravate dallo scrolling parallax, dalle transizioni di pagina di grandi dimensioni, dai video in riproduzione automatica a tutto schermo e da alcune animazioni con movimento di camera. Gli episodi gravi possono essere invalidanti.
• Chi soffre di emicrania — molti pattern emicranici sono scatenati dall’aura; il movimento è uno dei trigger documentati.
• Epilessia fotosensibile — i contenuti lampeggianti al di sopra della soglia WCAG (più di tre flash al secondo) possono provocare crisi epilettiche. La preferenza per il movimento ridotto segnala che l’utente desidera che tutti i movimenti vengano ridotti, anche quelli al di sotto della soglia.
• Difficoltà di concentrazione — ADHD e condizioni correlate rendono il movimento ambientale (marquee in scorrimento, caroselli continui) un significativo costo cognitivo.

Si tratta di una grande popolazione di utenti. Diversi studi collocano la prevalenza combinata di disturbi vestibolari, emicranie e ADHD al di sopra del 20% degli adulti in qualche momento della propria vita.

Cosa fa il sistema operativo

Tutti i principali sistemi operativi espongono una preferenza per il movimento ridotto nelle impostazioni di accessibilità:

• macOS / iOS — Impostazioni di Sistema → Accessibilità → Display → Riduci movimento.
• Windows 10/11 — Impostazioni → Accessibilità → Effetti visivi → Pulsante effetti animazione.
• Android — Impostazioni → Accessibilità → Rimuovi animazioni.

Il browser legge questa preferenza del sistema operativo e la espone ai CSS:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Criteri WCAG

Due criteri WCAG coprono specificamente il movimento:

• 2.3.3 Animazione da interazioni (AAA, WCAG 2.1+) — il movimento attivato dall’interazione dell’utente può essere disabilitato, a meno che il movimento non sia essenziale alla funzionalità. L’eccezione «essenziale» è ristretta: un timer CAPTCHA è essenziale; un’animazione di rottura di schede attivata dallo scroll non lo è.
• 2.2.2 Pausa, Stop, Nascondi (A) — qualsiasi contenuto in movimento, che lampeggia o si aggiorna automaticamente per più di 5 secondi deve disporre di un modo per metterlo in pausa, arrestarlo o nasconderlo. Questo si applica indipendentemente dalla preferenza dell’utente.

Cosa fare operativamente

Una baseline ragionevole:

1. Rilevare la preferenza. Utilizzare la media query CSS in ogni foglio di stile che aggiunge animazioni.
2. Ridurre, non eliminare. «Ridotto» non deve necessariamente significare «zero»; una dissolvenza di 100 ms è generalmente accettabile laddove una slide-in di 600 ms non lo è.
3. Verificare i trasgressori. Parallax dell’hero, effetti di tracciamento del mouse, animazioni di transizione di pagina, scroller infiniti, video in riproduzione automatica — questi sono i casi più critici che necessitano di un fallback con movimento ridotto.
4. Orientarsi verso un design con poco movimento. Molti design system stanno iniziando a invertire il default: l’animazione viene distribuita solo quando esplicitamente inclusa componente per componente.