WCAG 2.2.2: Pausa, Interrompi, Nascondi

Cosa Significa Questa Regola

WCAG 2.2.2 (Pausa, Stop, Nascondi) è un criterio di successo di Livello A sotto il principio Operabile. Regola qualsiasi contenuto che si muove, lampeggia, scorre o si aggiorna automaticamente in una pagina. La regola stabilisce due requisiti distinti a seconda di come si comporta il contenuto:

Per contenuti in movimento, lampeggianti o a scorrimento che partono automaticamente, durano più di cinque secondi e sono presentati insieme ad altro contenuto, agli utenti deve essere fornito un meccanismo per metterli in pausa, fermarli o nasconderli. Questo include animazioni CSS, caroselli gestiti da JavaScript, testo a scorrimento, elementi lampeggianti, ticker scorrevoli e banner animati.

Per contenuti che si aggiornano automaticamente — come tabelloni segnapunti in tempo reale, ticker azionari, feed di social media o titoli di notizie che si aggiornano a intervalli — gli utenti devono poter mettere in pausa, fermare, nascondere o controllare la frequenza degli aggiornamenti.

Per superare il criterio è necessario che sia disponibile, prima o insieme al contenuto animato, un controllo chiaramente utilizzabile (un pulsante, una scorciatoia da tastiera o un meccanismo simile) che consenta agli utenti di bloccarlo o rimuoverlo senza richiedere assistenza. Il controllo stesso deve essere accessibile — raggiungibile da tastiera, correttamente etichettato e utilizzabile senza mouse.

Si ha un fallimento quando esiste una delle seguenti condizioni: un elemento <blink> o un CSS text-decoration: blink che non può essere fermato; un elemento <marquee> senza meccanismo di pausa; un carosello animato che viene riprodotto indefinitamente senza pulsante di pausa; un widget di notizie con aggiornamento automatico che non può essere controllato; oppure un video di sfondo in loop senza alcun modo per fermarlo.

WCAG definisce due eccezioni esplicite. Primo, la regola non si applica alle animazioni che durano cinque secondi o meno, perché un movimento breve che termina da solo non crea una distrazione prolungata. Secondo, non si applica quando l’animazione è essenziale all’attività — per esempio, un’interfaccia di trading azionario in tempo reale in cui i prezzi live sono l’intero scopo della pagina, e metterli in pausa cambierebbe in modo sostanziale la natura del contenuto. Queste eccezioni sono ristrette e non dovrebbero essere usate come scusa generale per evitare l’implementazione.

Perché È Importante

I contenuti in movimento e lampeggianti creano barriere serie per diversi gruppi di persone con disabilità, e le conseguenze vanno dalla lieve distrazione a un reale danno medico.

Le persone con disturbo da deficit di attenzione e iperattività (ADHD) o altre disabilità cognitive spesso trovano impossibile concentrarsi sul contenuto principale di una pagina quando sono presenti elementi animati nella loro visione periferica. Il cervello umano è neurologicamente predisposto a prestare attenzione al movimento come meccanismo di sopravvivenza, e le persone con ADHD sperimentano questa attrazione in modo molto più intenso rispetto agli utenti neurotipici. Un ticker scorrevole in fondo a una pagina di notizie o un banner pubblicitario animato in una barra laterale possono rendere la lettura dell’articolo principale praticamente impossibile.

Le persone con disturbi vestibolari — inclusi labirintite, vertigine parossistica posizionale benigna (BPPV) e morbo di Ménière — possono sperimentare nausea, vertigini e disorientamento quando sono esposte a determinati tipi di movimento sullo schermo. Per questi utenti, un carosello in loop o un effetto di scorrimento parallasse non sono semplicemente fastidiosi; possono causare un malessere fisico che li costringe ad abbandonare completamente la pagina. I disturbi vestibolari colpiscono una stima del 35% degli adulti oltre i 40 anni solo negli Stati Uniti.

Le persone con epilessia fotosensibile sono a rischio di crisi epilettiche a causa di contenuti che lampeggiano o brillano a determinate frequenze. Sebbene i contenuti lampeggianti siano affrontati più direttamente da WCAG 2.3.1, i contenuti lampeggianti coperti da 2.2.2 possono anch’essi essere un fattore scatenante. L’Organizzazione Mondiale della Sanità stima che l’epilessia colpisca circa 50 milioni di persone in tutto il mondo.

Per gli utenti di screen reader, i contenuti che si aggiornano automaticamente creano un problema altrettanto dirompente. Quando una live region si aggiorna, gli screen reader annunciano il nuovo contenuto, interrompendo l’utente a metà frase mentre sta ascoltando qualcos’altro. Senza la possibilità di mettere in pausa gli aggiornamenti, navigare in una pagina con contenuti live diventa estremamente difficile.

Consideriamo questo scenario reale: una persona con ADHD sta completando un bonifico bancario online su un portale di banking e-commerce turco. Un banner promozionale rotante scorre tra quattro offerte ogni tre secondi nell’header. L’utente non riesce a concentrarsi sull’inserimento del numero di conto corretto. Commette un errore di trascrizione, il bonifico fallisce e deve ripetere l’intera procedura. Se il banner avesse incluso un pulsante di pausa, il compito sarebbe stato semplice. Questo non è un caso ipotetico — è una categoria documentata di fallimento di interazione che gli auditor di accessibilità incontrano regolarmente.

Oltre all’accesso per le persone con disabilità, eliminare il movimento incontrollabile migliora l’usabilità per tutti, riduce il carico cognitivo e può migliorare segnali SEO come i punteggi Core Web Vitals riducendo gli spostamenti di layout e l’esecuzione non necessaria di JavaScript.

Regole Axe-core Correlate

• blink: Questa regola verifica la presenza dell’elemento HTML deprecato <blink> e di proprietà CSS che producono testo lampeggiante (storicamente text-decoration: blink). L’elemento <blink> fa lampeggiare il testo accendendolo e spegnendolo continuamente senza alcun meccanismo nativo che consenta all’utente di fermarlo. Axe segnala qualsiasi istanza di questo elemento come violazione perché fallisce direttamente il criterio 2.2.2 — non esiste un caso d’uso conforme per <blink>. La regola segnala anche gli effetti di lampeggio generati da CSS quando l’animazione non può essere messa in pausa. Il rilevamento automatico è affidabile in questo caso perché l’elemento e la proprietà sono identificabili sintatticamente nel DOM e negli stili calcolati.
• marquee: Questa regola verifica la presenza dell’elemento HTML <marquee>, che fa scorrere testo o contenuto orizzontalmente o verticalmente sullo schermo in un loop continuo. L’elemento <marquee> non ha un meccanismo di pausa integrato e accessibile ed è deprecato in HTML5. Axe segnala qualsiasi istanza come violazione. Come per <blink>, il rilevamento è semplice perché l’elemento è identificabile sintatticamente. Tuttavia, gli strumenti automatici non possono rilevare tutte le violazioni di 2.2.2 — animazioni CSS, caroselli JavaScript, widget AJAX con aggiornamento automatico e video HTML5 in loop richiedono tutti una revisione manuale perché il meccanismo di pausa (o la sua assenza) può essere determinato solo da un tester umano che valuti l’intera esperienza interattiva.

Come Testare

1. Scansione automatizzata con axe DevTools o Lighthouse: Apri la pagina in Chrome o Firefox. Apri DevTools (F12), vai al pannello axe DevTools o all’audit Accessibility di Lighthouse ed esegui una scansione completa. Cerca in particolare le violazioni contrassegnate come blink o marquee nei risultati. Ogni violazione includerà il nodo DOM, il livello di impatto (serious o critical) e un link alle indicazioni per la correzione. Nota che una scansione automatizzata pulita non significa conformità completa — procedi con i passaggi manuali.
2. Ispezione manuale per animazioni CSS e JavaScript: Esamina visivamente la pagina per qualsiasi contenuto che si muove, scorre, lampeggia o si aggiorna automaticamente. Per ogni istanza, verifica se è presente un controllo per mettere in pausa, fermare o nascondere il contenuto e se è visibile prima o insieme al contenuto animato. Verifica che il controllo sia raggiungibile da tastiera (raggiungilo con Tab) e che premere Invio o Barra spaziatrice lo attivi. Controlla che l’attivazione del controllo arresti effettivamente il movimento e non ne riduca semplicemente la velocità.
3. Test solo tastiera: Disconnetti il mouse. Usa il tasto Tab per navigare l’intera pagina. Conferma di poter raggiungere il controllo di pausa/stop per ogni elemento animato usando solo la tastiera e che il controllo abbia un indicatore di focus visibile. Se non puoi raggiungere il controllo, o se per raggiungerlo è necessario tabulare prima attraverso il contenuto animato (cosa che può essere disorientante), si tratta di un fallimento.
4. Test con screen reader usando NVDA e Firefox: Avvia NVDA, apri la pagina in Firefox e ascolta eventuali annunci di live region che interrompono la lettura. Naviga ai contenuti che si aggiornano automaticamente e conferma che l’uso del controllo di pausa silenzi gli annunci di NVDA. Esegui test con JAWS e Chrome, e con VoiceOver e Safari su macOS, seguendo la stessa procedura.
5. Verifica dei contenuti con aggiornamento automatico: Per i contenuti che si aggiornano a intervalli temporizzati (feed di notizie, dashboard, tabelloni segnapunti), annota l’intervallo di aggiornamento. Conferma che esista un meccanismo per mettere in pausa gli aggiornamenti o controllarne la frequenza. Attiva l’aggiornamento manualmente se possibile e verifica che gli screen reader lo annuncino solo quando l’utente lo sceglie, non in modo involontario.
6. Test della preferenza di riduzione del movimento: Nel sistema operativo, abilita l’impostazione di accessibilità “Riduci movimento”. Ricarica la pagina e verifica che le animazioni rispettino la media query CSS prefers-reduced-motion. Sebbene questo non sia strettamente richiesto da WCAG 2.2.2, è una tecnica fortemente complementare ed è sempre più attesa dagli auditor.

Come Correggere

Elemento <marquee> deprecato — Non corretto

<!-- Testo scorrevole senza controllo di pausa; non conforme a 2.2.2 -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

Elemento <marquee> deprecato — Corretto

<!-- Sostituito con un'animazione CSS che rispetta prefers-reduced-motion
     e include un pulsante di pausa accessibile -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- Il CSS dovrebbe definire .ticker-content con animazione
     e una classe .paused che imposta animation-play-state: paused.
     La funzione JS toggleTicker() aggiunge/rimuove .paused
     e aggiorna aria-pressed e aria-label di conseguenza. -->

Elemento <blink> deprecato — Non corretto

<!-- L'elemento blink causa un lampeggio continuo e inarrestabile; non conforme a 2.2.2 -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

Elemento <blink> deprecato — Corretto

<!-- Avviso statico ad alto contrasto con role='alert' per gli screen reader.
     Non è necessario il lampeggio per comunicare urgenza. -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

Carosello in autoplay senza controllo di pausa — Non corretto

<!-- Il carosello avanza ogni 4 secondi senza possibilità di fermarlo; non conforme a 2.2.2 -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

Carosello in autoplay senza controllo di pausa — Corretto

<!-- Il carosello include un pulsante di pausa visibile e accessibile da tastiera.
     L'attributo aria-label viene aggiornato dinamicamente per riflettere lo stato corrente.
     L'autoplay si ferma anche su focus/hover (best practice WCAG). -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- Icona di pausa SVG o etichetta testuale -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

Widget di dati live con aggiornamento automatico — Non corretto

<!-- Il widget si aggiorna ogni 10 secondi tramite JS senza controllo da parte dell'utente; non conforme a 2.2.2 -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

Widget di dati live con aggiornamento automatico — Corretto

<!-- Il widget include un pulsante di pausa; aria-live è impostato su 'off' quando in pausa
     in modo che gli screen reader non vengano interrotti durante lo stato di pausa. -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS dovrebbe alternare aria-live tra 'polite' e 'off',
     fermare il timer setInterval quando in pausa e aggiornare
     aria-pressed e aria-label sul pulsante di conseguenza. -->

Errori Comuni

• Usare elementi <marquee> o <blink> in qualsiasi punto dell’HTML di produzione, anche per uno stile “retrò” o decorativo — entrambi gli elementi sono deprecati, semanticamente privi di significato e falliscono sempre il criterio 2.2.2 senza alcun percorso di correzione diverso dalla rimozione.
• Aggiungere un pulsante di pausa visibile solo al passaggio del mouse, rendendolo inaccessibile agli utenti che usano solo la tastiera, che ne hanno più bisogno e che in genere navigano con Tab piuttosto che con l’hover.
• Implementare un pulsante di pausa che non è raggiungibile con il tasto Tab prima del contenuto animato nel DOM, costringendo gli utenti a navigare attraverso il movimento disorientante prima di poterlo fermare.
• Usare animation-play-state: paused in CSS per fermare visivamente l’animazione, ma non disabilitare anche il loop JavaScript setInterval o requestAnimationFrame che gestisce gli aggiornamenti del contenuto — l’aspetto visivo si ferma ma il DOM continua a cambiare, interrompendo comunque gli screen reader.
• Impostare aria-live='polite' su un carosello o un ticker e lasciarlo attivo anche quando l’utente ha premuto pausa — la live region continua ad annunciare i cambiamenti del DOM agli utenti di screen reader anche se l’animazione visiva è congelata.
• Fare affidamento su autoplay=false su un elemento <video> senza verificare il comportamento tra i vari browser; alcune combinazioni di browser e plugin ignorano questo attributo, facendo partire i video automaticamente contro l’intenzione dell’autore e le aspettative dell’utente.
• Trattare l’eccezione dei cinque secondi come un periodo di tolleranza generale e costruire un carosello che mostra ogni slide per quattro secondi partendo dal presupposto che ogni singola transizione di slide sia inferiore a cinque secondi — l’animazione nel suo complesso è continua e dura molto più di cinque secondi, quindi l’eccezione non si applica.
• Fornire un controllo di pausa che ferma l’animazione ma non indica visivamente lo stato di pausa, lasciando gli utenti incerti sul fatto che la loro azione abbia avuto effetto — il pulsante deve riflettere il suo stato corrente, idealmente usando aria-pressed e aggiornando la sua etichetta tra “Pause” e “Play”.
• Applicare prefers-reduced-motion solo alle transizioni CSS e ignorare le animazioni gestite da JavaScript che funzionano indipendentemente dal CSS, il che significa che gli utenti che hanno abilitato l’impostazione di sistema per ridurre il movimento sperimentano comunque movimento nella pagina.
• Posizionare il controllo di pausa al di fuori dell’ordine di tabulazione della tastiera impostando tabindex='-1' o racchiudendolo in un contenitore con display:none che viene mostrato in modo condizionale solo con l’interazione del mouse — il controllo deve essere sempre raggiungibile tramite la navigazione da tastiera.

Relazione con le Normative di Accessibilità della Turchia

La Circolare Presidenziale n. 2025/10 della Turchia, pubblicata nella Gazzetta Ufficiale (Resmî Gazete) n. 32933 il 21 giugno 2025, stabilisce requisiti obbligatori di accessibilità web e mobile allineati a WCAG 2.2. WCAG 2.2.2 Pausa, Stop, Nascondi è un criterio di Livello A, il che significa che si colloca al livello più fondamentale di conformità ed è obbligatorio senza eccezioni per tutte le entità coperte dalla circolare.

La circolare stabilisce scadenze di conformità scaglionate: le istituzioni e gli enti pubblici devono raggiungere la piena conformità al Livello A entro un anno dalla data di pubblicazione della circolare, e le entità del settore privato devono farlo entro due anni. Non esiste un’adesione volontaria — la circolare impone un obbligo legale e le proprietà digitali non conformi sono soggette a vigilanza amministrativa e a potenziali azioni esecutive.

Le entità coperte dalla circolare includono un’ampia sezione trasversale dei servizi digitali turchi: tutte le istituzioni e gli enti governativi; le piattaforme di e-commerce che operano in Turchia; le banche e le istituzioni di servizi finanziari; gli ospedali e i fornitori di assistenza sanitaria privati; gli operatori di telecomunicazioni con 200,000 o più abbonati; le agenzie di viaggio; le società di trasporto privato; e le scuole private autorizzate dal Ministero dell’Istruzione Nazionale (Millî Eğitim Bakanlığı, MoNE).

Per queste entità, WCAG 2.2.2 ha implicazioni dirette e pratiche. Un sito di e-commerce con un carosello di prodotti in autoplay e senza pulsante di pausa è in violazione. Il portale di internet banking di una banca che utilizza un ticker di avvisi di sicurezza a scorrimento senza controllo di stop non è conforme. La pagina di prenotazione appuntamenti di un ospedale che utilizza avvisi animati che non possono essere fermati non soddisfa il requisito. La homepage di una società di telecomunicazioni con un video di sfondo in loop e senza un controllo di stop visibile deve essere corretta prima della scadenza.

Oltre all’obbligo legale, la legge turca sull’accessibilità è allineata alla più ampia tendenza europea esemplificata dalla Direttiva UE sull’accessibilità del web e dall’European Accessibility Act (EAA). Man mano che le aziende turche si espandono nei mercati europei o servono utenti europei, la conformità a WCAG 2.2 Livello A — incluso il criterio 2.2.2 — diventa un requisito di conformità doppio. Implementare correttamente Pausa, Stop, Nascondi è quindi sia una necessità legale nazionale sia un asset strategico per le organizzazioni turche con presenza digitale internazionale.