Pausa, Stop, Nascondi

Cosa richiede

Per qualsiasi contenuto che soddisfi tutte e tre le seguenti condizioni: (a) si muove, lampeggia, scorre o si aggiorna automaticamente, (b) si avvia automaticamente, (c) dura più di cinque secondi ed è visualizzato in parallelo con altri contenuti — l’utente deve disporre di un meccanismo per metterlo in pausa, fermarlo o nasconderlo. Lo stesso vale per i contenuti con aggiornamento automatico che non implicano movimento (feed di notizie in diretta, tabelloni segnapunti, chat).

Eccezioni: quando il movimento è essenziale per l’attività (un video in riproduzione, un tutorial di animazione) e quando il contenuto è l’unico elemento sullo schermo (uno spinner di caricamento prima che appaia il contenuto).

Come soddisfarlo

• Aggiungere un pulsante Pausa/Riproduci visibile a ogni carosello, slideshow o banner con avanzamento automatico. Renderlo il primo elemento attivabile tramite tastiera nel widget del carosello.
• Mettere automaticamente in pausa i caroselli al passaggio del mouse e al focus da tastiera — ma l’utente deve comunque poterli fermare completamente.
• Per i ticker di notizie, le marquee e le strisce dei prezzi azionari, esporre un pulsante di pausa nella stessa riga, con dimensione minima di 24×24 pixel.
• Per i pannelli con aggiornamento automatico (Kibana, Grafana, sport in diretta), offrire all’utente un selettore dell’intervallo di aggiornamento che includa l’opzione «Solo aggiornamento manuale».
• Le GIF animate in loop infinito dovrebbero essere sostituite con elementi <video> che espongono i controlli nativi, oppure con un pattern di riproduzione al clic.

Errori frequenti

• Caroselli hero che ruotano ogni tre-cinque secondi senza alcun controllo di pausa — ancora il tipo di violazione 2.2.2 più comune negli audit.
• Video di sfondo con riproduzione automatica e nessun controllo, specialmente nelle pagine di marketing.
• Ticker sui siti di notizie che scorrono orizzontalmente senza pulsante di pausa.
• Illustrazioni SVG animate nelle landing page che si ripetono all’infinito senza possibilità di fermarle.
• Notifiche toast che si accumulano in modo continuo da un feed in diretta senza possibilità di silenziarlo.

axe e Lighthouse sono in grado di rilevare <marquee> e alcune violazioni legate a prefers-reduced-motion, ma non possono identificare un carosello guidato da JavaScript privo di controlli. È necessaria una revisione manuale.

Perché è importante

I contenuti in movimento automatico sono uno dei pattern più invalidanti sul web. Attirano l’attenzione di chiunque abbia disabilità legate all’attenzione (ADHD, alcuni disturbi d’ansia, sindrome post-concussiva), costringono gli utenti di screen reader a perdere continuamente il filo mentre i nodi del DOM si aggiornano, e rendono impossibile la lettura per gli utenti ipovedenti che seguono il testo lentamente. Un pulsante di pausa è uno degli interventi di accessibilità più economici e ad alto impatto che un team di marketing possa realizzare.