Animazione e movimento

Ti è mai capitato di viaggiare su un'auto, una barca o un aereo e di avere improvvisamente sentito il mondo ruotare? Oppure ha avuto un'emicrania così grave che le animazioni sul telefono o sul tablet, creato per "divertire" farti ammalare improvvisamente? O forse sei sempre stato sensibili a tutti i tipi di movimento? Questi sono esempi di diversi tipi di disordini vestibolari.

All'età di 40 anni, oltre il 35% degli adulti ha sperimentato qualche forma di disfunzione vestibolare. Questo può determinare vertigini temporanei, vertigini indotti dall'emicrania o altri sintomi disabilità permanente vestibolare.

Oltre a innescare le vertigini, molte persone si muovono, sbattono le palpebre o scorrono contenuti che distraggono. Persone con ADHD e altri disturbi da deficit di attenzione potrebbero essere distratti elementi che dimenticano il motivo per cui hanno visitato il tuo sito web o la tua app primo posto.

In questo modulo vedremo alcuni modi per aiutare meglio le persone con tutti i tipi di disturbi attivati dal movimento.

Contenuti lampeggianti e in movimento

Quando crei animazioni e movimenti, chiediti se il movimento dell'elemento è eccessivo. Ad esempio, colori che sfarfallano da scuro a chiaro o movimenti rapidi sullo schermo possono causare crisi nelle persone con epilessia fotosensibile. Si stima che il 3% delle persone affette da epilessia soffra di fotosensibilità, ed è più comune nelle donne e nei giovani.

Le linee guida sul flash delle WCAG sconsigliano quanto segue:

• Lampeggia per più di tre volte al secondo
• Lampeggia sotto lampo generico e soglia di flash rosso.

Questi flash possono, nella migliore delle ipotesi, causare l'impossibilità di utilizzare una pagina web o, nel peggiore dei casi, possono causare malattie.

Per qualsiasi movimento estremo, è fondamentale testarlo utilizzando la Strumento di analisi dell'epilessia fotosensibile (PEAT). PEAT è uno strumento senza costi per identificare se i contenuti, il video o le animazioni dello schermo cause di crisi. Non tutti i contenuti devono essere valutati dal PEAT, ma i contenuti che presentano transizioni rapide o lampeggianti tra il tema chiaro e quello scuro è necessario valutare i colori dello sfondo, per sicurezza.

Un'altra domanda che dovresti porti in merito all'animazione e al movimento è se il movimento dell'elemento è essenziale per comprendere i contenuti o le azioni sullo schermo. Se non è essenziale, considera la possibilità di rimuovere tutti i movimenti, anche i micromovimenti, dall'elemento che stai creando o progettando.

Supponiamo che tu ritenga che il movimento dell'elemento non sia essenziale, ma possa valorizzarlo. l'esperienza complessiva dell'utente o non puoi rimuovere il movimento per un altro perché. In tal caso, devi seguire le linee guida sul movimento. Le linee guida stabiliscono che devi creare un'opzione che consenta agli utenti di mettere in pausa, interrompere o nascondi il movimento per: elementi non essenziali in movimento, lampeggianti o scorrevoli che si avviano automaticamente, durano più di cinque secondi e fanno parte di un'altra pagina elementi.

Mettere in pausa, interrompere o nascondere il movimento

Aggiungere una messa in pausa, un'interruzione o un nascondi meccanismo di blocco della pagina per consentire agli utenti di disattivare i contenuti animazione in movimento. Puoi farlo a livello di schermo o di elemento.

Ad esempio, supponiamo che il tuo prodotto digitale includa molte animazioni. Valuta la possibilità di aggiungere un pulsante di attivazione/disattivazione di JavaScript accessibile. per consentire agli utenti di controllare la propria esperienza. Quando il pulsante viene impostato su "momento disattivato", tutte le animazioni sono bloccate su quello schermo e su tutte le altre.

Utilizzare le query supporti

Oltre ad adottare un approccio selettivo sulle animazioni, offrire agli utenti opzioni per mettere in pausa, interrompere, nascondere il movimento ed evitare loop di animazione infiniti, puoi valuta la possibilità di aggiungere una query multimediale incentrata sul movimento. Questo offre agli utenti per quanto riguarda ciò che viene visualizzato sullo schermo.

@prefers-reduced-motion

Analogamente alle query multimediali incentrate sul colore nel modulo Colore, la query multimediale @prefers-reduced-motion controlla le impostazioni del sistema operativo dell'utente relative all'animazione.

Un utente può impostare preferenze di visualizzazione per ridurre il movimento. Queste impostazioni sono variano a seconda dei sistemi operativi e possono essere incorniciati in modo positivo o negativo. Con @prefers-reduced-motion, puoi progettare un sito che rispetta queste preferenze.

Su macOS e Android, l'utente attiva l'impostazione per ridurre il movimento. In MacOS, un utente può impostare Riduci il movimento in Impostazioni > Accessibilità > Visualizzazione. L'impostazione di Android è Rimuovi le animazioni. Su Windows, l'impostazione è racchiusa in frame positivo come Mostra animazioni, che è attivo per impostazione predefinita. Un utente deve attivare questa impostazione per ridurre il movimento.

In alternativa, come mostrato nella serie di esempi successiva, puoi codificare tutte le animazioni in modo che si interrompano entro cinque secondi o meno, anziché giocarle con un loop infinito.

Miglioramento progressivo del movimento

Come designer e sviluppatori, abbiamo molte scelte da fare, inclusi gli stati di movimento predefiniti e la quantità di movimento da visualizzare. Diamo un'altra occhiata all'ultimo esempio relativo al movimento.

Supponiamo di stabilire che l'animazione non sia necessaria per comprendere i contenuti sullo schermo. In questo caso, possiamo scegliere di impostare lo stato predefinito sull'animazione di movimento ridotto anziché sulla versione di animazione completa. A meno che gli utenti non chiedano appositamente le animazioni, queste vengono disattivate.

Non possiamo prevedere quale livello di movimento causerà problemi alle persone con crisi, vestibolari e altri disturbi visivi. Anche una piccola quantità di movimento sullo schermo può provocare vertigini, vista annebbiata o peggio. Quindi, nel Nell'esempio riportato di seguito, l'impostazione predefinita è nessuna animazione.

Query multimediali su più livelli

Puoi utilizzare più query supporti per offrire agli utenti ancora più scelta. Iniziamo usa @prefers-color-scheme, @prefers-contrast e @prefers-reduced-motion tutti insieme.

Consenti agli utenti di scegliere

Anche se può essere divertente integrare le animazioni nei nostri prodotti digitali per divertire utenti, è fondamentale ricordare che alcune persone saranno interessate da questi design. La sensibilità del movimento può colpire chiunque, dalla sensazione di malessere lieve alla causa una malattia o una crisi debilitativi.

Puoi utilizzare una serie di strumenti diversi per consentire all'utente di decidere cosa è meglio piuttosto che indovinare quanto movimento sia eccessivo. Ad esempio, aggiungi un per attivare o disattivare l'animazione all'interno del sito o dell'app web. Prendi in considerazione off per impostazione predefinita.

Verifica le tue conoscenze

Verifica le tue conoscenze in materia di accessibilità di movimento e animazione.