Movimento accessibile: progettare per il movimento ridotto senza perdere il significato
Come progettare il movimento che rispetti le impostazioni di movimento ridotto e i disturbi vestibolari: cosa richiede WCAG, cosa rimuovere, cosa mantenere e come testare.
Punto chiave
Quando un utente attiva il movimento ridotto, mantieni il significato di ogni animazione ma rimuovi il movimento: sostituisci diapositive, zoom e parallasse con brevi dissolvenze o modifiche istantanee, interrompi i loop di riproduzione automatica e non fare mai affidamento solo sul movimento per comunicare qualcosa. Sul Web, rileva l'impostazione con la media query con movimento ridotto.
Perché è importante
Per alcune persone, il movimento sullo schermo non è una questione di gusti. Il W3C rileva che l’animazione può innescare disturbi vestibolari, con reazioni che includono nausea, emicrania e, nei casi più gravi, la necessità di riposo a letto per riprendersi. I sistemi operativi consentono alle persone di chiedere meno movimento e sul web tale richiesta viene esposta come query multimediale che preferisce il movimento ridotto. Il suo valore viene ridotto quando l'utente ha attivato l'impostazione.
Cosa richiede WCAG
Due criteri di successo WCAG riguardano il movimento. 2.2.2 Pausa, Interrompi, Nascondi si applica al movimento che si avvia automaticamente, come caroselli e animazioni in loop, e richiede un modo per metterlo in pausa, interromperlo o nasconderlo. 2.3.3 L'animazione dalle interazioni (livello AAA) si applica al movimento attivato dall'interazione dell'utente e suggerisce di evitare animazioni non necessarie, offrendo un controllo per disattivarla o utilizzando l'impostazione di riduzione del movimento del sistema operativo. Anche laddove l’AAA non è richiesto, seguirlo è buona pratica.
Rimuovi il movimento, mantieni il significato
Il movimento ridotto non significa assenza di feedback. Un utente che preme un pulsante deve comunque sapere che ha funzionato. L’obiettivo è mantenere il cambio di stato e eliminare i viaggi.
- Rimuovi o riduci: diapositive di grandi dimensioni, zoom, parallasse, movimento collegato a scorrimento, rotazione, loop di riproduzione automatica e video di sfondo.
- Mantieni: modifiche di colore e opacità, indicatori di messa a fuoco, brevi transizioni di stato, informazioni sull'avanzamento.
- Sostituisci: transizioni di pagine e pannelli con una breve dissolvenza incrociata o una modifica istantanea.
- Mai: usa il movimento come unico modo per mostrare un errore, una modifica o un nuovo elemento.
Implementandolo
Sul Web, racchiudi il movimento non essenziale in @media (preferisce-movimento ridotto: nessuna preferenza) o sovrascrivilo all'interno di @media (preferisce-movimento ridotto: riduci). In JavaScript, leggi window.matchMedia('(prefers-reduced-motion: reduce)') e ascolta le modifiche. Le piattaforme native espongono la stessa impostazione: SwiftUI, UIKit e Android ti consentono tutte di controllarla. Se il tuo sistema di progettazione prevede token di movimento, definisci una variante ridotta per ciascuno in modo che ogni componente si comporti allo stesso modo.
Test
Attiva il movimento ridotto nel tuo sistema operativo e segui ogni flusso dei tasti. Controlla che non vada perso nulla di importante, che nessun loop si avvii automaticamente e che lo scorrimento non sposti il contenuto oltre ciò che fa lo scorrimento stesso. Gli strumenti per sviluppatori del browser possono anche emulare l'impostazione.
Estratto di implementazione in produzione
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Principi chiave da ricordare
- Il movimento può far ammalare fisicamente alcune persone; rispettare l'impostazione
- Rimuovi viaggio, zoom, parallasse e riproduzione automatica; mantenere i cambiamenti di stato e il feedback
- WCAG 2.2.2 copre il movimento automatico; 2.3.3 copre il movimento derivante dall'interazione
- Rileva l'impostazione con il movimento ridotto e su ciascuna piattaforma nativa
- Progetta una variante ridotta per ogni token di movimento
Domande frequenti
Fonti
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN Documenti Web
- Motion — Linee guida per l'interfaccia umana di Apple