Mettere in pausa, fermare e nascondere i contenuti in movimento automatico
Dare agli utenti il controllo su caroselli e video
Mettere in pausa, fermare e nascondere i contenuti in movimento automatico è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Dia il controllo agli utenti
Se il contenuto si muove da solo, l'utente deve poterlo fermare. WCAG definisce questa esigenza pausa, arresto o occultamento per i contenuti in movimento automatico. ⏸️
Che cosa si considera movimento automatico
Si pensi a caroselli, presentazioni che avanzano automaticamente, ticker a scorrimento e video di sfondo in loop. Qualsiasi animazione che parte senza un'azione dell'utente rientra in questa categoria.
La regola dei cinque secondi
Il criterio riguarda i movimenti che durano più di cinque secondi e vengono eseguiti insieme ad altri contenuti. Una breve animazione introduttiva è esclusa.
Perché è importante
Il contenuto in movimento distrae e può essere impossibile da leggere per gli utenti con sensibilità cognitive o al movimento. Il controllo restituisce loro la pagina.
Offra un controllo di pausa
La soluzione più semplice è un vero pulsante di pausa. Permetta agli utenti di bloccare un carosello, così possono finire di leggere una diapositiva senza distrazioni.
<button aria-label="Pause slideshow">Pause</button>Arrestare è più efficace che mettere in pausa
La pausa può riprendere; l'arresto termina definitivamente il movimento. Entrambe le opzioni soddisfano la regola, purché l'utente abbia davvero il controllo.
Anche l'occultamento è un'opzione
A volte è meglio permettere agli utenti di nascondere completamente l'elemento in movimento. Un controllo per chiudere un ticker elimina del tutto la distrazione.
Metta in pausa al passaggio del mouse e al focus
Un carosello dovrebbe inoltre mettersi in pausa quando l'utente vi passa sopra con il mouse o vi sposta il focus tramite tabulazione, così la lettura o l'interazione non entrano in conflitto con l'avanzamento automatico.
Renda il controllo raggiungibile
Il pulsante di pausa deve essere accessibile tramite tastiera e avere un'etichetta chiara. Un controllo che nessuno riesce a trovare non è sufficiente.
Lo abbini alla riduzione del movimento
La soluzione migliore è non usare la riproduzione automatica per gli utenti che riducono il movimento. Combini il controllo della preferenza con un controllo di pausa visibile.
@media (prefers-reduced-motion: reduce) {
.carousel { animation-play-state: paused; }
}Salti l'avanzamento automatico
A dire il vero, molti caroselli funzionano meglio senza alcun auto-advance. Lasci che gli utenti procedano al proprio ritmo e il problema scompare.
Verifica rapida
Che cosa richiede la regola pausa, arresto o occultamento?
Riepilogo
I contenuti in movimento automatico devono offrire una pausa, un arresto o un occultamento controllabili dall'utente. Renda il controllo raggiungibile tramite tastiera ed eviti la riproduzione automatica quando il movimento è ridotto. ✅
Domande Frequenti
La lezione «Mettere in pausa, fermare e nascondere i contenuti in movimento automatico» è gratuita?
Sì — il testo completo di «Mettere in pausa, fermare e nascondere i contenuti in movimento automatico» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Mettere in pausa, fermare e nascondere i contenuti in movimento automatico»?
Dare agli utenti il controllo su caroselli e video Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Mettere in pausa, fermare e nascondere i contenuti in movimento automatico»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- prefers-reduced-motion in CSS e JS
- Disturbi vestibolari e rischi della parallasse
- La soglia dei tre flash per le crisi epilettiche
- Mettere in pausa, fermare e nascondere i contenuti in movimento automatico