Le animazioni web accessibili partono da un accordo semplice: le persone devono poter capire la pagina e portare a termine la propria attività senza dipendere da movimenti decorativi. Mantieni le animazioni che spiegano un cambiamento utile, offri una presentazione più tranquilla a chi richiede un movimento ridotto e, dove necessario, permetti di controllare i movimenti continui.
Per un'azienda che commissiona un sito, la domanda pratica è cosa inserire nel brief e come verificare il lavoro consegnato. Questa guida propone un inventario delle animazioni, una tabella delle decisioni e una checklist di accettazione. Puoi usarli sia per un nuovo design sia per un sito esistente, senza dover decidere personalmente ogni dettaglio di implementazione.
1. Assegna uno scopo a ogni elemento in movimento
Inizia elencando ciò che si muove durante un normale percorso del cliente. Apri la homepage, leggi la descrizione di un servizio, espandi una domanda e raggiungi il modulo di contatto. Includi l'animazione iniziale, gli effetti legati allo scorrimento, le slide automatiche, il video di sfondo, le transizioni del menu, gli indicatori di caricamento e i messaggi di conferma. Guarda oltre la sezione iniziale più evidente: anche i piccoli effetti possono accumularsi lungo una pagina.
Per ogni elemento, descrivi cosa apprende il visitatore grazie al movimento. L'apertura di un pannello può mostrare dove si trovano le informazioni aggiuntive. Un indicatore di avanzamento può spiegare che una richiesta è ancora in elaborazione. Un oggetto decorativo che ruota può rafforzare l'identità visiva, ma non deve essere l'unico modo per scoprire il servizio o trovare il pulsante successivo.
Scrivi il risultato desiderato prima di discutere durata o stile. «Il cliente può vedere quale domanda è aperta» lascia al designer la libertà di scegliere una soluzione chiara. «Ogni sezione deve entrare in volo» vincola il progetto a un effetto prima che qualcuno abbia verificato se sia utile. Chiedi al team di mostrare una versione statica accanto al concept animato.
Prepara un breve inventario delle animazioni
Un inventario utile riporta la pagina, l'elemento, ciò che lo attiva, lo scopo, l'eventuale ripetizione, il comportamento proposto con movimento ridotto e la persona incaricata della verifica. Aggiungi una colonna per le evidenze: un indirizzo di anteprima, una registrazione o una nota di test. Diventa così un piccolo documento di accettazione da consultare quando una nuova campagna introduce un altro carosello o video.
2. Concorda il comportamento della versione più tranquilla
MDN documenta prefers-reduced-motion come un modo per consentire a un sito di rilevare la preferenza per la riduzione del movimento non essenziale. È un segnale al quale l'implementazione deve rispondere. Attivare l'impostazione del dispositivo non riprogetta automaticamente tutte le animazioni di un sito.
Chiedi di decidere il comportamento di ogni effetto. Uno zoom ampio potrebbe diventare un cambio di stato immediato; uno sfondo decorativo in movimento potrebbe diventare un'immagine fissa. Una risposta espandibile può apparire senza attraversare lo schermo. Non accettare «rallentiamo tutto» come piano completo: un movimento ampio, anche se più lento, può comunque essere una parte superflua dell'esperienza.
| Elemento e scopo | Presentazione più tranquilla da valutare | Domanda per l'accettazione |
|---|---|---|
| Il movimento decorativo nella sezione iniziale definisce lo stile visivo | Usare una composizione statica curata | Il visitatore può leggere subito l'offerta e usare il link principale? |
| Le sezioni entrano mentre il visitatore scorre la pagina | Mostrare i contenuti senza ampi spostamenti o attese | Ogni sezione è disponibile durante lo scorrimento rapido e la navigazione da tastiera? |
| Un menu mostra le opzioni di navigazione | Aprire e chiudere sul posto, con uno stato chiaro | Il visitatore può raggiungere i link e tornare al controllo che apre il menu? |
| Un carosello presenta più offerte | Fornire controlli espliciti e uno stato statico o in pausa concordato | Si possono raggiungere tutte le offerte senza dover anticipare i cambiamenti automatici? |
| Un modulo indica l'elaborazione e il completamento | Mantenere un testo di stato comprensibile e una conferma stabile | Il visitatore sa se deve attendere, riprovare o proseguire? |
Questa tabella è un esempio di pianificazione, non una prova che un determinato sito rispetti uno standard di accessibilità. Sostituisci le righe con i componenti reali del tuo progetto. Registra cosa succede al primo caricamento e cosa dovrebbe accadere se la preferenza cambia mentre la pagina è aperta. Chiedi allo sviluppatore di identificare eventuali componenti di terze parti il cui comportamento richiede una verifica separata.
3. Distingui preferenze, controlli e criteri di accessibilità
Il supporto al movimento ridotto e un pulsante di pausa risolvono problemi collegati, ma diversi. Una preferenza può selezionare un'esperienza più tranquilla fin dall'inizio. Un controllo visibile può consentire di fermare un movimento continuo durante la lettura. Il brief deve spiegare entrambi gli aspetti dove sono pertinenti, senza considerarne uno un sostituto universale dell'altro.
Il criterio 2.3.3 delle WCAG 2.2, Animazione da interazioni, è di livello AAA. Riguarda la possibilità di disattivare le animazioni di movimento attivate dall'interazione, a meno che siano essenziali per la funzionalità o le informazioni. Non presentare questo specifico criterio come un requisito di livello AA.
Il criterio 2.2.2, Pausa, stop, nascondi, è di livello A. La disposizione sui contenuti in movimento si applica quando il movimento parte automaticamente, dura più di cinque secondi e appare insieme ad altri contenuti, con un'eccezione per le attività essenziali. Contiene anche una disposizione separata per le informazioni che si aggiornano automaticamente, senza quell'eccezione dei cinque secondi. Queste distinzioni contano quando si verifica un carosello, una striscia di notizie scorrevoli o uno sfondo animato.
Chiedi al fornitore rispetto a quali criteri e livello di conformità sarà valutato il progetto, chi svolgerà la valutazione e quali evidenze saranno consegnate. Superare una checklist sul movimento ridotto non dimostra la piena conformità alle WCAG. La verifica del movimento è una parte di una valutazione più ampia che considera anche struttura, modalità di input, contrasto, alternative e altri requisiti.
Verifica che i controlli offrano un controllo effettivo
Un controllo di pausa deve essere facile da trovare, comprensibile e utilizzabile con le modalità di input concordate. Verifica cosa succede dopo aver spostato il focus altrove o aperto un altro componente. Un carosello che riparte appena il visitatore lascia il pulsante di pausa non offre una pausa utile alla lettura. Concorda se una preferenza o la scelta di mettere in pausa debba mantenersi durante la navigazione, poi verifica il comportamento concordato.
4. Mantieni l'attività praticabile quando cambia il movimento
La versione più tranquilla deve continuare a funzionare come una pagina completa. Rimuovere un'animazione non deve lasciare testo trasparente, elementi di navigazione fuori dall'area visibile o un pulsante in attesa della fine di un'animazione. Chiedi allo sviluppatore di dimostrare che il contenuto raggiunge uno stato finale utilizzabile anche quando la sequenza decorativa non viene eseguita.
Segui il focus della tastiera attraverso menu, finestre di dialogo e sezioni espandibili. Riesci a vedere dove ti trovi? Aprire un componente ti colloca in un contesto sensato e chiuderlo ti riporta nel punto previsto? Evita un design in cui il movimento visivo sia l'unico indizio di un cambiamento. Anche etichette chiare, stati di selezione e una disposizione stabile devono trasmettere il significato.
Presta particolare attenzione ai moduli. Una forma che ruota, da sola, non spiega se una richiesta è in elaborazione, è fallita o è andata a buon fine. Chiedi messaggi di stato chiari e una comunicazione appropriata degli aggiornamenti importanti alle tecnologie assistive. Se il team rimuove l'indicatore rotante nella versione più tranquilla, lo stato effettivo e l'azione successiva devono rimanere disponibili.
Per i contenuti che si muovono con lo scorrimento, confronta lo scorrimento lento, quello rapido e la navigazione da tastiera. Verifica se titoli, prezzi o controlli scompaiono prima di poter essere letti. Le informazioni essenziali non devono richiedere un gesto eseguito con una tempistica precisa. Se un racconto visivo necessita di una sequenza, concorda un modo accessibile per raggiungere le stesse informazioni senza eseguirla.
Un esempio ipotetico di verifica di una pagina servizi
Immagina una società di consulenza con un'animazione decorativa nella sezione iniziale e un modulo di contatto. Nella versione più tranquilla, la sezione iniziale diventa un'immagine fissa, i dettagli dei servizi appaiono subito e il modulo mantiene il messaggio di elaborazione e la conferma. Chi esegue la verifica controlla lo stesso percorso di richiesta in entrambe le versioni. Questo esempio illustra un metodo di accettazione; non è un risultato riferito da un cliente né una promessa di maggiori conversioni.
5. Verifica le pagine finite in entrambe le modalità
Richiedi l'anteprima della versione esatta destinata alla pubblicazione. Esaminala con l'impostazione ordinaria del movimento, poi con la preferenza per il movimento ridotto del dispositivo o del browser attivata. Un file di design può comunicare l'intento, ma non dimostra come risponde la pagina realizzata. Registra browser, dispositivo, impostazione e indirizzo della pagina accanto a ogni osservazione.
Usa un insieme ridotto e ripetibile di attività: leggere l'offerta, aprire la navigazione, espandere i dettagli di supporto e raggiungere il modulo di contatto. In un ambiente di test, includi gli stati di successo ed errore del modulo concordati. Non inviare vere richieste dei clienti solo per provare le animazioni. Il team di progetto deve fornire un modo sicuro per esaminare questi stati senza attivare messaggi operativi.
Verifica su telefono e computer e usa la tastiera oltre al touch o a un dispositivo di puntamento, dove applicabile. Aumenta la dimensione del testo per controllare se gli elementi sovrapposti in movimento nascondono contenuti. Se un effetto dipende dal passaggio del puntatore, chiedi come rendere disponibili le stesse informazioni tramite touch. Includi strumenti di prenotazione incorporati, video e altri componenti esterni che fanno parte del percorso del cliente.
Descrivi i difetti con esempi osservabili. «Con il movimento ridotto attivato, aprire il menu mobile lascia invisibile il link di contatto» consente di intervenire. «L'animazione non convince» richiede altre spiegazioni. Includi i passaggi, il comportamento atteso e una breve registrazione quando il problema riguarda il movimento. Dopo una correzione, ripeti l'attività interessata sull'anteprima corretta.
6. Chiedi evidenze coerenti con le affermazioni
Conserva l'inventario delle animazioni insieme ai risultati. Ogni riga deve indicare cosa è stato testato, cosa ha superato la verifica, cosa resta irrisolto e chi è responsabile dell'azione successiva. Chiedi quali pagine e stati siano stati effettivamente esaminati, anziché un bollino con scritto «accessibile». Un report automatico può aiutare a identificare alcuni problemi, mentre la verifica manuale delle attività mette in luce comportamenti che richiedono osservazione diretta.
La documentazione di Lighthouse di Chrome spiega che le verifiche manuali di accessibilità non contribuiscono al suo punteggio di accessibilità. Un punteggio di 100, quindi, non dimostra che ogni requisito di accessibilità sia stato valutato. Chiedi di vedere i risultati manuali insieme al report automatico, soprattutto per i controlli del movimento e per l'intero percorso di invio di una richiesta.
Valuta le prestazioni separatamente. Chiedi quale versione, profilo di dispositivo e condizioni abbiano prodotto un risultato di laboratorio e se le interazioni importanti siano state verificate dopo il caricamento iniziale. Un effetto decorativo che appare fluido sul computer del designer deve comunque essere valutato sui dispositivi di destinazione concordati. La preferenza per il movimento ridotto non è un indicatore affidabile di un dispositivo più lento, e anche la presentazione ordinaria richiede un'adeguata verifica delle prestazioni.
Mantieni precise le affermazioni nella documentazione di consegna. «Questi cinque componenti sono stati testati con il movimento ridotto attivato in questi browser» è un'evidenza utile. «Completamente accessibile perché le animazioni sono disattivate» non è una conclusione sostenuta da questa checklist. Se il progetto include una valutazione più ampia dell'accessibilità, registrane separatamente l'ambito e i problemi ancora aperti.
7. Includi il movimento nel brief e nella consegna
Prima di accettare il lavoro, concorda per iscritto queste decisioni. Rendono verificabile una preferenza visiva e aiutano chi aggiornerà il sito a non reintrodurre un problema irrisolto.
- Scopo: ogni componente in movimento ha un ruolo dichiarato e una persona responsabile del contenuto.
- Alternativa: il comportamento con movimento ridotto è definito, implementato e verificato sulle pagine effettive.
- Controllo: il movimento continuo e gli aggiornamenti automatici hanno i controlli e il comportamento concordati.
- Continuità: contenuti, focus della tastiera, messaggi di stato e attività principale del cliente restano utilizzabili.
- Evidenze: le note di verifica identificano versione, ambienti, risultati e problemi irrisolti.
- Manutenzione: qualcuno sa come verificare nuovi video, elementi incorporati e componenti delle campagne dopo il lancio.
Invia l'inventario, le pagine di riferimento e il percorso prioritario del cliente insieme alla richiesta per il progetto. La nostra guida al brief per un progetto web aiuta a organizzare l'ambito complessivo, mentre la checklist per il restyling di un sito aiuta a decidere cosa mantenere e verificare di nuovo in un sito esistente.
L'attuale pacchetto web di Digital Studio parte da 2.190 EUR e comprende fino a cinque pagine responsive, basi SEO, un modulo per acquisire contatti e il lancio sul tuo dominio. Consulta i servizi e l'ambito dell'offerta attuali e descrivi i tuoi requisiti di movimento e accessibilità nel brief per il sito. Concorda esplicitamente eventuali valutazioni specialistiche e lavori aggiuntivi; non dare per scontato che il prezzo di un pacchetto garantisca una particolare certificazione di accessibilità.
