Animazioni, caroselli e video automatici: quando ostacolano l’uso del sito

Attribuire uno scopo a ogni effetto

Percorri homepage e pagine importanti annotando caroselli, video di sfondo, scritte scorrevoli, contatori e contenuti che compaiono durante lo scorrimento. Per ciascuno scrivi che cosa aggiunge all’esperienza. Mostrare il funzionamento di un prodotto è diverso da spostare continuamente una frase già comprensibile. Considera anche gli effetti introdotti da widget esterni.

Osserva una persona che cerca un’informazione specifica, senza spiegarle in anticipo dove si trova. Deve aspettare il passaggio di una slide? Perde il testo mentre lo legge? Cerca un comando che non compare? Le osservazioni aiutano a scegliere un intervento circoscritto. La guida ai test di usabilità spiega come organizzare questa prova senza confonderla con un sondaggio sui gusti grafici.

Dare tempo di leggere e possibilità di fermare

Il criterio WCAG 2.2.2 sul movimento automatico (si apre in una nuova scheda) richiede, nelle condizioni descritte, un modo per mettere in pausa, fermare o nascondere informazioni che si muovono per oltre cinque secondi accanto ad altri contenuti, salvo movimento essenziale. Gli aggiornamenti automatici hanno una disposizione specifica nello stesso criterio: non basta applicare a tutto il limite dei cinque secondi.

Prova il comando di pausa e poi continua a navigare nella pagina. Fermarsi soltanto quando il puntatore rimane sopra l’elemento non consente a tutti di leggere comodamente. Controlla che l’etichetta descriva l’azione disponibile e che il comando resti raggiungibile da tastiera e da telefono. Il contenuto fermato non deve coprire ciò che serve per proseguire.

Verificare il carosello oltre la prima slide

Il tutorial WAI sui caroselli (si apre in una nuova scheda) considera controlli, struttura e comportamento accessibile. Controlla tutte le slide, non soltanto quella fotografata per l’approvazione grafica: testi, collegamenti e stato corrente devono restare comprensibili. La navigazione non dovrebbe dipendere esclusivamente da un gesto che la persona deve intuire.

Confronta anche una lista o una griglia statica. Se le slide rappresentano servizi alternativi, mostrarli insieme può facilitare la scelta; se raccontano una sequenza, una progressione controllata dall’utente può avere più senso. Non esiste un numero di slide adatto a ogni sito. Usa contenuti reali e verifica che le informazioni più importanti non siano raggiungibili soltanto aspettando una rotazione automatica.

Rispettare chi preferisce meno movimento

La preferenza prefers-reduced-motion documentata da MDN (si apre in una nuova scheda) permette al sito di riconoscere la richiesta di ridurre movimenti non essenziali. Attivala sul dispositivo e riprova la pagina. Controlla effetti di zoom, parallasse, transizioni ampie e spostamenti legati allo scorrimento, senza supporre che una sola regola copra ogni componente.

La versione alternativa deve conservare i contenuti e lo stato dell’interazione. Disattivare un’animazione di ingresso non dovrebbe lasciare i testi trasparenti o fuori schermo. Per gli effetti comandati da script e i contenuti incorporati serve una verifica dedicata. Mantieni un feedback chiaro, per esempio una selezione visibile, anche quando viene ridotto il movimento che normalmente accompagna il comando.

Gestire il video anche quando non si avvia

I browser applicano politiche di riproduzione automatica, soprattutto per contenuti con audio, come spiega la guida MDN all’autoplay (si apre in una nuova scheda). Un sito non può basare un’informazione necessaria sulla certezza che il filmato parta. Verifica la copertina, il comando di avvio e ciò che rimane leggibile quando la riproduzione viene bloccata.

Per un video decorativo, chiedi se un’immagine statica comunica già l’atmosfera desiderata. Per un video informativo, prepara controlli e alternative adeguate al contenuto; approfondisci nella guida sui video del sito aziendale. Evita che una dimostrazione in movimento sia l’unico posto in cui compaiono prezzo, condizioni o istruzioni necessarie per la richiesta.

Confrontare l’effetto con il costo di caricamento

Misura la pagina nelle stesse condizioni con il componente attivo e con una variante predisposta nell’ambiente di prova. Annota dimensioni trasferite, attesa prima del contenuto e risposta ai comandi. Verifica anche se il video continua a impegnare risorse quando non è visibile. Il confronto deve conservare lo stesso contenuto essenziale per avere significato.

Esempio ipotetico: una struttura ricettiva apre il sito con un filmato, ma la richiesta di disponibilità resta in attesa degli effetti introduttivi. La prova mostra una fotografia iniziale con avvio del filmato su richiesta e un accesso immediato al modulo. Si confrontano così due percorsi completi, invece di considerare riuscita qualsiasi riduzione di file. Per la comparsa del contenuto principale, consulta la guida all’LCP.

Collaudare stati, comandi e contenuti

Prepara prove con mouse, tastiera e tocco; includi testo ingrandito, telefono ruotato, movimento ridotto e video indisponibile. Controlla che chi ferma un carosello possa leggere e attivare il collegamento senza una ripartenza inattesa. Rivedi anche il contrasto del testo su fotogrammi diversi: una scritta leggibile sulla copertina può diventare poco chiara durante il filmato.

Conserva la decisione per ciascun elemento: mantenere, modificare i controlli, rendere facoltativo oppure sostituire con contenuto fermo. Assegna un referente agli aggiornamenti, perché nuove slide e nuovi video possono cambiare tempi di lettura e comportamento. Un controllo finale di accessibilità dei percorsi aiuta a verificare che la revisione abbia migliorato l’uso reale.

Domande frequenti

Devo eliminare tutte le animazioni?

No. Valuta scopo, controlli e alternative. Un movimento che chiarisce un cambiamento può essere utile; un effetto che impedisce la lettura merita una revisione.

Un video senza audio è sempre utilizzabile in automatico?

L’assenza di audio non risolve distrazione, consumo di risorse e controllo della riproduzione. Prova il percorso e garantisci una presentazione comprensibile anche a video fermo.