Accessibilità: la media query prefers-reduced-motion

Se ci stiamo preparando a lavorare ad un progetto web che sarà visitato giornalmente da almeno centinaia di utenti e il target utenti è piuttosto ampio, la progettazione dell'interfaccia grafica dovrà tenere in considerazione diversi aspetti, tra cui l'accessibilità dei contenuti. Le animazioni rientrano tra gli elementi soggetti ad una attenta analisi in quanto possono ostacolare l'accesso ai contenuti ad una cerchia di utenti per nulla trascurabile.

Gli effetti delle animazioni su alcune persone

Se da un lato si cerca di catturare l'attenzione degli utenti con effetti grafici sui contenuti a volte pieni di grazia a volte fin troppo pacchiani, dall'altro lato ci sono degli utenti che le animazioni non le amano proprio. A volte per semplice fastidio, altre volte perché possono creare o aggravare un serio disturbo.

Di quali disturbi stiamo parlando? Non ne esiste uno solo, e non è detto che il disturbo si possa presentare allo stesso modo tra un giorno e l'altro.

In estrema sintesi, i problemi più gravi sono legati ai disturbi vestibolari, come la labirintite per citarne uno tra tanti. Accade quindi che le animazioni di un'interfaccia grafica, come gli effetti parallasse applicati ai contenuti di un sito web, possono influire negativamente sul modo di percepire il mondo esterno. Gli occhi inviano al cervello segnali di movimento, mentre gli altri organi sensoriali inviano segnali di stabilità. Il cervello riceve segnali contrastanti, ma in condizioni normali le informazioni vengono elaborate correttamente. Per coloro che soffrono invece di disturbi vestibolari l'equilibrio cognitivo, già precario, viene ulteriormente disorientato dalle animazioni, provocando varie reazioni, tra cui vertigini, mal di testa, nausea.

La percentuale di chi soffre di questi disturbi è molto alta, e tende ad aumentare con l'avanzare dell'età.

Trattandosi di un argomento medico-scientifico, il mio invito è di consultare la voce Balance disorder su Wikipedia oppure di visitare il sito dell'organizzazione VEDA.

Aiutare le persone con questi disturbi quindi è un passo in più per rendere il mondo il più possibile inclusivo. Gli strumenti non mancano, e alcune istruzioni di codice ci vengono in aiuto.

La media query prefers-reduced-motion

Per rilevare le preferenze degli utenti in relazione alle animazioni è stata introdotta la media query prefers-reduced-motion. Avevamo già visto per lo sviluppo dei temi dark che tramite CSS è possibile rilevare la preferenza degli utenti in fatto di impostazioni grafiche. Se con prefers-color-scheme possiamo rilevare lo schema colori scelto dall’utente, light o dark, con prefers-reduced-motion gli sviluppatori front-end potranno decidere di escludere le animazioni o ridurne gli effetti per agevolare la navigazione.

Utilizzo nel CSS

L'istruzione CSS che gestisce l'opzione di accessibilità per la riduzione delle animazioni è:

@media (prefers-reduced-motion) {
    /* istruzioni CSS per annullare o ridurre le animazioni */
}

All'interno della media query prefers-reduced-motion, che per impostazione predefinita è impostata su reduce, si inseriscono le istruzioni utili a ridurre o annullare le animazioni.

Esiste però la possibilità di impostare i valori manualmente. Oltre al reduce, l'altro valore a nostra disposizione è no-preference. Questo valore restituisce vero se l'utente non ha effettuato alcuna scelta. Quindi le istruzioni contenute nella media query consentiranno di aggiungere le animazioni CSS.

@media (prefers-reduced-motion: no-preference) {
    /* animazioni CSS */
}

Utilizzo in JavaScript

Molte animazioni richiedono però il supporto di JavaScript. Nel caso in cui sfruttiamo le animazioni in JS, possiamo sfruttare il metodo matchMedia() dell'interfaccia Window per monitorare i valori della media query prefers-reduced-motion.

Memorizziamo quindi il valore della media query in una variabile:

const PrefersReducedMotion = window.matchMedia('(prefers-reduced-motion)');

E mostriamo il risultato nella Console:

console.log(PrefersReducedMotion);

Ecco cosa restituisce il browser:

Il metodo matches() restituisce un valore booleano. Se l'utente ha scelto di ridurre le animazioni, ci sarà restituito true. Quindi possiamo sfruttare queste informazioni per scrivere il nostro codice:

if (PrefersReducedMotion.matches == false) {
    /* Istruzioni per attivare le animazioni */
}

if (PrefersReducedMotion.matches == true) {
    /* Istruzioni per ridurre o annullare le animazioni */
}

Animazioni ridotte per le GIF animate

La versatilità dell'HTML5 consente di adattare il codice alle varie situazioni, tra cui anche gestire le GIF animate. Questo avviene grazie al versatile tag picture.

Possiamo infatti aggiungere più versioni delle nostre immagini e inserire una versione specifica per coloro che richiedono la riduzione delle animazioni:

<picture>
    <source srcset="immagine-non-animata.png" media="(prefers-reduced-motion: reduce)">

   <img srcset="gif-animata.gif" alt="Testo descrittivo dell'immagine">
</picture>

Il comportamento del codice è semplice: viene caricata l'immagine non animata se l'utente ha richiesto di ridurre le animazioni:

<source srcset="immagine-non-animata.png" media="(prefers-reduced-motion: reduce)">

In caso contrario, sarà caricata l'immagine animata:

<img srcset="gif-animata.gif" alt="Testo descrittivo dell'immagine">

Possibili approcci

Dai paragrafi che abbiamo trattato si può capire che possiamo gestire la riduzione delle animazioni in differenti modi.

Possiamo infatti decidere di scrivere il codice aggiuntivo per disattivare le animazioni, oppure al contrario aggiungere le animazioni separatamente. Questo approccio è possibile sia utilizzando il CSS che gli script JS.

Grazie all'attributo media del tag link, possiamo anche separare le istruzioni del comportamento animato degli elementi dal codice principale e trasferirlo su un foglio di stile differente:

<link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

Quest'ultimo approccio tra l'altro piacerà anche agli spider, in particolare a Google. Parlando di ottimizzazione delle pagine, tenere separate le animazioni ci aiuterà ad avere un foglio di stile base molto più leggero e quindi ottenere tempi di caricamento delle pagine più veloci.

Dove applicare la riduzione delle animazioni

Di base, possiamo basarci su una semplice strategia: tutto deve rimanere al suo posto, assolutamente fermo, esattamente come i siti statici della passata era. L'utente che ha scelto di disabilitare le animazioni scorre tranquillamente la pagina senza imprevisti.

Gli effetti grafici animati da evitare sono diversi, tra i più importanti: gli effetti parallasse, l'autoplay dei carousel per i quali, oltretutto, è preferibile utilizzare un effetto fade rispetto allo scorrimento, gli elementi che si ancorano in precisi punti della pagina, le gif animate, gli effetti di transizione sui pulsanti.

A volte non sarà sufficiente separare semplicemente il codice. Potrebbe essere necessario prevedere due layout differenti. Un esempio concreto: su molti siti web, l'header della pagina ha uno sfondo trasparente e viene ancorato in cima alla pagina. Questo effetto deve essere eliminato se il prefers-reduced-motion è impostato su reduce. Quindi, l'header non sarà sovrapposto ed avrà uno spazio tutto suo, avrà uno sfondo colorato o semplicemente bianco, e il colore testo potrebbe essere differente dall'originale. È evidente che avremo due codici distinti per ottenere due differenti risultati.

Alcuni siti di esempio

Per vedere la media query prefers-reduced-motion in funzione, proviamo a disattivare le animazioni (istruzioni nei prossimi paragrafi) e visitiamo il sito di Apple. Attento all'accessibilità e all'usabilità, anche PSD to HTML ha fatto questo passo in avanti diventando più inclusivo.

Supporto dei browser

Come si evince dalla tabella, la compatibilità è altissima. Se escludiamo l'ormai defunto Internet Explorer, la media query prefers-reduced-motion potrà essere utilizzata senza alcun problema nei prossimi progetti di sviluppo front-end, se espressamente richiesto.

Come attivare la riduzione del movimento

Complessivamente le opzioni per ridurre o annullare le animazioni sono facilmente raggiungibili. Unico caso più complesso è l'accesso a questa opzione su Android, ma è possibile raggirarla.

Istruzioni per macOS

Preferenze di sistema › Accessibilità › Monitor › Riduci movimento

Istruzioni per iOS e iPadOS

Impostazioni › Accessibilità › Effetti schermo › Riduci movimento

Istruzioni per Windows 10

Start › Impostazioni › Accessibilità › Schermo › Semplifica e personalizza Windows › Mostra le animazioni in Windows

Istruzioni per Android

Su Android la riduzione delle animazioni non è ancora stata aggiunta nella sezione di accessibilità - scelta non comprensibile. Abbiamo però una possibilità.

Opzione per sviluppatori

Questa opzione è un po' complessa e richiede alcuni passaggi. Per prima cosa seguire il percorso: Impostazioni › Sistema › Info sul telefono › Informazioni sul software. Infine toccare cinque volte consecutive su Numero build. Si attiverà così una sezione dedicata agli sviluppatori.

Poi in Impostazioni › Sistema › Opzioni dello sviluppatore scorriamo verso la scheda Disegno e in Scala durata animatore disabilitiamo l'animazione.

Istruzioni per Ubuntu via Firefox

Anche su Ubuntu, la riduzione delle animazioni non è una voce presente nelle impostazioni sull'accessibilità.

In alternativa, apriamo Firefox e nella barra indirizzi digitiamo about:config. Accettiamo il rischio e continuiamo. Nella barra di ricerca scriviamo ui.prefersReducedMotion e aggiungiamo un nuovo valore numerico impostandolo a 1. Le animazioni saranno quindi disabilitate. Se desideriamo riabilitare le animazioni, impostiamo il valore a 0.

Conclusioni

La media query prefers-reduced-motion è un ulteriore passo in avanti per garantire una migliore accessibilità ad un sito web o ad una applicazione web. Il suo utilizzo è molto importante se abbiamo deciso di aggiungere le animazioni solo per dare vita agli elementi e il target di utenti è anche molto ampio.

In fase di analisi del progetto è importante analizzare sempre il target di utenti e decidere di investire o meno nell’accessibilità. Dobbiamo però tenere bene a mente che tutti i siti web e le applicazioni dovrebbero essere sempre accessibili a tutti, nessuno escluso. Il successo delle strategie di un sito web dipende anche dai dettagli.

Sebbene i metodi per ridurre le animazioni si possano implementare anche sui siti già realizzati, il miglior risultato lo si otterrà durante la progettazione e la fase di sviluppo.