Contenuti in movimento, animazione e lampeggianti

Scopo #

Lo scopo principale di questo test di accessibilità manuale è valutare meticolosamente tutti i contenuti dinamici, animati e lampeggianti su una piattaforma digitale per garantirne la conformità ai criteri di successo 2.2 delle Linee guida per l’accessibilità dei contenuti web (WCAG) 2.3.1 Tre lampeggi o inferiore alla soglia (A), 2.3.2 Tre lampeggi (nessuna eccezione) (AAA) e 2.3.3 Animazione da interazioni (AAA). L’obiettivo è verificare che i contenuti non lampeggino eccessivamente in modo da poter scatenare crisi epilettiche e che le animazioni non essenziali, in particolare quelle attivate dall’interazione dell’utente, possano essere controllate o disattivate dall’utente. Questo processo manuale si basa su un’attenta osservazione visiva e su un approccio sistematico per identificare gli effetti visivi problematici e valutarne la conformità alle linee guida di sicurezza per crisi epilettiche e disturbi vestibolari.

Criteri WCAG coperti #

Questi criteri sono pertinenti e verificati nei seguenti modi:

2.3.1 Tre lampeggi o al di sotto della soglia – A

Le pagine web non contengono nulla che lampeggi più di tre volte in un secondo, oppure il lampeggio è al di sotto delle soglie generali e rosse.

2.3.2 Tre lampi (nessuna eccezione) – AAA

Le pagine web non contengono nulla che lampeggi più di tre volte in un secondo.” Questa è una versione più restrittiva della 2.3.1, che rimuove l’eccezione “sotto la soglia”.

2.3.3 Animazione dalle interazioni – AAA

L’animazione del movimento attivata dall’interazione può essere disattivata, a meno che l’animazione non sia essenziale per la funzionalità o per le informazioni trasmesse. Questo criterio mira a fornire un controllo sulle animazioni che potrebbero causare disagio, distrazione o mal di movimento.

Frequenza del flash (2.3.1 A, 2.3.2 AAA)

Osserveremo manualmente tutti i contenuti animati o dinamici che presentano rapidi cambiamenti visivi per determinare se lampeggiano più di tre volte nell’arco di un secondo. Ciò richiede un conteggio e una tempistica accurati. Questo è il controllo fondamentale sia per la versione 2.3.1 che per la 2.3.2.

Frequenza del flash (2.3.1 A, 2.3.2 AAA)

Cambiamenti di luminanza e colore (2.3.1 A)

Presteremo molta attenzione alla natura dei flash, in particolare se comportano variazioni significative di luminanza (ad esempio, da buio a luce o viceversa) e se contengono una significativa quantità di rosso saturo, poiché questi sono noti fattori scatenanti di crisi epilettiche fotosensibili. Questo è particolarmente rilevante per determinare se un flash, anche se superiore a tre flash, rientri nella soglia generale o nella soglia del flash rosso.

Soglie Flash (Stima visiva – 2.3.1 A)

Sebbene una misurazione precisa richieda strumenti specializzati, valuteremo visivamente se i flash sembrano essere al di sotto della “soglia generale del flash” (ovvero se le variazioni di luminanza non superano una certa percentuale della luminanza relativa dello schermo) e della “soglia del flash rosso” (che è più restrittiva per il rosso, in quanto può essere più problematica). Ciò comporta la rilevazione delle dimensioni dell’area del flash e dell’intensità della variazione di luce. Questo controllo è valido solo per la sezione 2.3.1.

Conteggio assoluto dei flash (2.3.2 AAA)

Per una valutazione di Livello AAA, qualsiasi contenuto che lampeggia più di tre volte in un secondo è considerato un errore, indipendentemente dal fatto che sia inferiore o meno a una soglia visiva. Ciò significa che anche i flash più lievi e a basso contrasto sono problematici se la loro frequenza supera i tre al secondo.

Controllo utente sulle animazioni (2.3.3 AAA)

Identificheremo tutte le animazioni in movimento attivate dall’interazione dell’utente (ad esempio, effetti al passaggio del mouse, transizioni al clic, sezioni espandibili/comprimibili, caroselli che si avviano automaticamente dopo l’interazione). Per queste animazioni, verificheremo se è disponibile un meccanismo per disattivarle o ridurle (ad esempio, un’impostazione “riduci movimento” nelle preferenze utente o un’impostazione del sistema operativo che il contenuto rispetta). Valuteremo anche se l’animazione è davvero “essenziale” per la funzionalità, qualora non sia previsto alcun meccanismo di disattivazione.

Controllo utente e alternative (buone pratiche generali)

Oltre ai requisiti specifici della versione 2.3.3, verificheremo se la piattaforma offre preferenze o impostazioni utente più ampie per ridurre o eliminare animazioni e contenuti lampeggianti, il che rappresenta una buona pratica per la sensibilità al movimento e può attenuare vari problemi.

Ambiente di prova #

Questo test si basa principalmente sull’osservazione visiva su vari dispositivi e in genere non richiede tecnologie assistive specializzate.

Desktop #

Sistemi operativi: Windows (ultime due versioni), macOS (ultime due versioni).
Browser: ultime versioni stabili di Chrome, Firefox, Edge, Safari.
Metodi di input:
- mouse standard
- Tastiera (per la navigazione e l’attivazione delle interazioni).
Strumenti: un cronometro o un timer visivo possono essere utili per stimare manualmente la frequenza del flash. Impostazioni di accessibilità del sistema operativo per “ridurre il movimento” (ad esempio, macOS “Ridurre il movimento”, Windows “Mostra animazioni” in Windows).

Cellulari e tablet #

Sistemi operativi: iOS (ultime due versioni), Android (ultime due versioni).
Browser: browser predefiniti (Safari su iOS, Chrome su Android) e altri browser mobili più diffusi.
Metodi di input:
- Touchscreen (per la navigazione generale e l’attivazione delle interazioni).
Orientamento: modalità verticale e orizzontale.
Impostazioni: impostazioni di accessibilità a livello di dispositivo per “Riduci movimento” (iOS) o “Rimuovi animazioni” (Android).

Preparazione al test #

Prima di iniziare il test manuale, assicurarsi di aver completato i seguenti passaggi:

Identifica tutti i contenuti dinamici/animati:
Elenca sistematicamente tutte le aree della piattaforma che incorporano qualsiasi forma di animazione, modifiche visive dinamiche o contenuti video. Questo include:
- Pulsanti, collegamenti e controlli dei moduli (per l’annullamento del puntatore).
- Cursori, ingressi di intervallo, controlli del volume (per trascinare le alternative).
- Interfacce drag-and-drop (ad esempio, riordino di elenchi, spostamento di elementi).
- Caroselli, gallerie di immagini, mappe (per gesti di scorrimento/pizzicamento).
- Qualsiasi funzionalità attivata dal movimento del dispositivo (ad esempio, “scuoti per annullare”, funzionalità di realtà aumentata che implicano l’inclinazione del dispositivo).
- Interazioni o widget JavaScript personalizzati.
Comprendere le definizioni di “Flash” e “Animazione”:
Consultare il documento di comprensione WCAG per 2.3.1, 2.3.2 e 2.3.3 per comprendere appieno cosa costituisce un “flash” e un'”animazione” e le soglie/eccezioni specifiche.
Preparare gli scenari di test:
Pianifica di dedicare tempo sufficiente all’osservazione di ciascun elemento identificato, potenzialmente più volte, per contare accuratamente i flash o valutare il comportamento dell’animazione.
Ottimizza l’ambiente di test:
Assicuratevi che l’ambiente di test (illuminazione della stanza, luminosità dello schermo) sia uniforme per evitare che fattori esterni influenzino la percezione. Preparatevi ad attivare/disattivare le impostazioni di “riduzione del movimento” del sistema operativo.

Processo di test passo dopo passo #

Eseguire i seguenti passaggi per ciascun componente dinamico/animato identificato, sia su desktop che su dispositivi mobili/tablet. Documentare meticolosamente le osservazioni.

PASSO 1 – Procedura generale per il flashing dei contenuti (WCAG 2.3.1 A, 2.3.2 AAA) #

Scansione iniziale per rapidi cambiamenti visivi: #

Naviga tra tutte le pagine e i componenti interattivi della piattaforma.
Caso di prova:
identifica visivamente tutti gli elementi che presentano cambiamenti molto rapidi o improvvisi di colore, luminosità o pattern. Concentrati sugli elementi che sembrano “lampeggiare” o “sfarfallare”.

Valutazione della variazione di luminanza: #

Per ogni elemento identificato, osservare se il rapido cambiamento comporta uno spostamento significativo della luminanza (luminosità).
Caso di prova:
l’elemento passa rapidamente da stati molto scuri a stati molto chiari (ad esempio, da nero a bianco o da un colore molto scuro a uno molto chiaro)?
Caso di prova:
il lampeggiamento comporta un cambiamento da un colore rosso saturo a un altro?

Misurazione della frequenza (conteggio manuale): #

Concentrarsi su un elemento sospetto alla volta.
Utilizzando un cronometro o un timer digitale, avvia il timer e conta simultaneamente il numero di lampeggi (un ciclo completo da luce a buio e di nuovo luce, o viceversa) in un intervallo continuo di un secondo. Ripeti l’operazione più volte per una maggiore precisione.
Caso di prova:
in un dato periodo di un secondo, l’elemento lampeggia più di tre volte?
Caso di prova:
se lampeggia più di tre volte, il flash è al di sotto della soglia generale del flash? (Visivamente, l’area del flash è piccola o il contrasto è minimo? I flash più grandi e con un contrasto più elevato sono più problematici).
Caso di prova:
se l’elemento contiene una significativa quantità di rosso saturo e lampeggia, è rigorosamente al di sotto della soglia del lampeggiamento rosso? (I lampeggiamenti rossi hanno requisiti più rigorosi a causa del rischio più elevato).

Area del flash e campo visivo: #

Caso di prova:
il contenuto lampeggiante occupa una porzione ampia dello schermo (ad esempio, più del 10% del campo visivo dell’utente a una distanza tipica)? Aree lampeggianti più ampie comportano un rischio maggiore.

Comportamento contestuale: #

Caso di test (stati di caricamento):
osserva gli indicatori di caricamento o di avanzamento. Lampeggiano o cambiano rapidamente in un modo che potrebbe essere problematico?
Caso di test (messaggi di errore/successo):
i messaggi di avviso o di notifica sono progettati per lampeggiare o lampeggiare per attirare l’attenzione? In tal caso, assicurarsi che rispettino le regole di frequenza e soglia.
Caso di prova (riproduzione video):
se sono presenti video incorporati, esaminali brevemente per individuare eventuali scene che contengono rapidi effetti stroboscopici (ad esempio fulmini, luci lampeggianti, flash di fotocamere). Se presenti, annota la data e l’ora.
Caso di prova (feedback sull’interazione dell’utente):
gli elementi interattivi (ad esempio pulsanti, campi del modulo) forniscono un feedback visivo che lampeggia rapidamente quando si passa sopra, si passa il mouse o si fa clic?

PASSO 2 – Procedura generale per l’animazione dalle interazioni (WCAG 2.3.3 AAA) #

Identificare e attivare le animazioni: #

Esplora la piattaforma e identifica tutte le animazioni attivate dall’interazione dell’utente (ad esempio, cliccando su un pulsante, passando il mouse su un elemento, espandendo una fisarmonica, aprendo una finestra modale, scorrendo verso una nuova sezione che si anima).
Attiva ciascuna animazione identificata.
Caso di prova:
l’animazione prevede movimenti significativi (ad esempio, scorrimento parallasse, elementi che scorrono dentro/fuori, transizioni complesse, effetti di zoom)?

Verifica del meccanismo di disattivazione (preferenze utente/impostazioni del sistema operativo): #

Cerca l’impostazione “riduci movimento” o “disattiva animazioni” nelle preferenze utente o nelle impostazioni di accessibilità della piattaforma.
Se non è presente alcuna impostazione nella piattaforma, attivare l’impostazione “riduci movimento” o “rimuovi animazioni” del sistema operativo.
Caso di prova:
dopo aver abilitato l’impostazione “riduci movimento” (a livello di piattaforma o di sistema operativo), rivedere le animazioni identificate nel passaggio 1. Queste animazioni vengono ora riprodotte in forma ridotta (ad esempio, dissolvenza anziché scorrimento, modifica istantanea anziché transizione) o sono completamente disattivate?
Caso di prova:
la disattivazione dell’animazione non comporta la perdita di contenuti o funzionalità? (ad esempio, il contenuto viene comunque visualizzato, ma senza il movimento che distrae).

Valutare l’animazione “essenziale”: #

Se un’animazione non può essere disattivata:
Caso di prova:
l’animazione è davvero “essenziale” per la funzionalità o le informazioni trasmesse? (Un’animazione è essenziale se la sua rimozione altererebbe radicalmente la funzionalità o renderebbe le informazioni incomprensibili. Le animazioni puramente decorative o estetiche non sono essenziali).
- Esempio di elemento essenziale: un’animazione che mostra un’operazione di trascinamento della selezione in cui il percorso dell’elemento è l’unico modo per indicare dove viene spostato.
- Esempio di elemento non essenziale: un pulsante che si muove al passaggio del mouse o una sezione che scorre con un effetto spettacolare.

PASSO 3 – Preferenze/Opzioni utente (Controllo generale dei miglioramenti) #

Caso di prova:
è disponibile un’impostazione generale “riduci movimento” o “disabilita animazioni” nelle preferenze della piattaforma o nel sistema operativo che influisce su questo contenuto? (Sebbene testata specificamente per la versione 2.3.3, la sua assenza rappresenta un’area di miglioramento generale se il contenuto è molto animato).

Identificazione dei problemi #

Durante il processo di test, identificare e documentare eventuali deviazioni dal comportamento previsto in base alle WCAG 2.3.1, 2.3.2 e 2.3.3. Alcuni esempi di problemi includono:

Frequenza di lampeggiamento eccessiva (errore WCAG 2.3.1 A e 2.3.2 AAA):
qualsiasi contenuto (ad esempio GIF, animazione, segmento video) che lampeggia più di tre volte in un periodo di un secondo.
Oltre la soglia generale di flash (errore WCAG 2.3.1 A):
contenuto che lampeggia frequentemente e comprende ampie aree o cambiamenti di contrasto elevati, superando le soglie di luminanza sicure.
Oltre la soglia del flash rosso (guasto WCAG 2.3.1 A):
qualsiasi contenuto lampeggiante che includa elementi rossi saturi significativi e superi la soglia più rigorosa del flash rosso.
Lampeggiamento come unico indicatore:
quando informazioni critiche (ad esempio, un messaggio di errore) vengono trasmesse solo tramite lampeggio, senza un’alternativa visiva o udibile persistente.
Lampeggio incontrollabile:
contenuto lampeggiante la cui intensità non può essere messa in pausa, interrotta o ridotta dall’utente (se tali controlli sono ritenuti necessari in base alla gravità e al contesto).
Animazione non essenziale senza meccanismo di disattivazione (errore WCAG 2.3.3 AAA):
l’animazione del movimento attivata dall’interazione dell’utente (ad esempio passaggio del mouse, clic, scorrimento) non può essere disattivata o ridotta in modo significativo da una preferenza utente o da un’impostazione del sistema operativo e l’animazione non è essenziale per la funzionalità.
La disattivazione delle animazioni causa la perdita di contenuto/funzionalità (errore WCAG 2.3.3 AAA):
quando le animazioni vengono disattivate, il contenuto essenziale scompare, viene troncato o si perdono funzionalità.
L’animazione è essenziale ma dirompente:
se un’animazione è considerata essenziale, ma provoca comunque un forte disagio o distrazione, potrebbe indicare un difetto di progettazione che necessita di una rivalutazione.

Classificazione di gravità #

Assegnare un livello di gravità a ciascun problema identificato in base al suo potenziale impatto sulla sicurezza e l’accessibilità dell’utente:

Critico (WCAG 2.3.1 A):
Contenuti lampeggianti che superano nettamente la regola dei tre flash al secondo e presentano un grave rischio di indurre crisi epilettiche fotosensibili (ad esempio, flash di ampia area o flash rossi altamente saturi oltre le soglie). (Violazione diretta del Livello A, che comporta un rischio per la salute).
Alto (WCAG 2.3.2 AAA):
contenuti lampeggianti che superano la regola dei tre flash al secondo, anche se tecnicamente potrebbero essere al di sotto delle soglie visive (ovvero, non rientrano nella norma 2.3.2 AAA). Sebbene non siano necessariamente un fattore scatenante per tutti, possono comunque causare notevole disagio, distrazione o essere problematici per una più ampia gamma di utenti.
Medio (WCAG 2.3.1 A / 2.3.2 AAA / 2.3.3 AAA):
contenuto lampeggiante prossimo alla soglia (ad esempio, esattamente tre flash al secondo in modo coerente) o visivamente distraente/fastidioso, ma che non sembra violare le soglie specifiche per l’induzione di crisi epilettiche. Animazioni non essenziali che non possono essere disattivate (fallimento 2.3.3 AAA), che causano moderata distrazione o disagio, ma non bloccano la funzionalità.
Basso:
effetti o animazioni lampeggianti decorativi di lieve entità che rientrano ampiamente nelle soglie di sicurezza e non causano distrazioni o fastidi significativi. Aree che necessitano di lievi miglioramenti.

Nota finale #

Proteggere gli utenti da crisi epilettiche indotte visivamente e garantire il controllo sui movimenti potenzialmente dannosi sono questioni fondamentali nell’accessibilità digitale. Questo test manuale per contenuti in movimento, animazione e flashing funge da salvaguardia fondamentale, integrando gli strumenti automatizzati e fornendo un occhio umano per problemi sottili o dipendenti dal contesto. Identificando e correggendo con attenzione tutti gli effetti visivi problematici e garantendo all’utente il controllo sulle animazioni, le piattaforme possono garantire un’esperienza più sicura, inclusiva e confortevole per tutti.

What are your Feelings

Still stuck? How can we help?

Updated on Marzo 26, 2026