Pausar, detener y ocultar contenido en movimiento automático
Dé a los usuarios el control sobre carruseles y vídeos.
Pausar, detener y ocultar contenido en movimiento automático es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Dé el control a los usuarios
Si el contenido se mueve por sí solo, el usuario necesita una salida. WCAG lo denomina pausar, detener u ocultar el contenido que se mueve automáticamente. ⏸️
Qué se considera movimiento automático
Piense en carruseles, presentaciones que avanzan automáticamente, cintas de texto en desplazamiento y vídeos de fondo en bucle. Todo lo que se anime sin una acción del usuario cumple esta condición.
La regla de los cinco segundos
El criterio se aplica al movimiento que dura más de cinco segundos y se ejecuta junto con otro contenido. Una breve animación introductoria queda exenta.
Por qué importa
El contenido en movimiento distrae y puede resultar imposible de leer para usuarios con sensibilidades cognitivas o al movimiento. El control devuelve la página al usuario.
Ofrezca un control de pausa
La solución más sencilla es un botón real de pausa. Permita que los usuarios congelen un carrusel para terminar de leer una diapositiva tranquilamente.
<button aria-label="Pause slideshow">Pause</button>Detener es más contundente que pausar
La pausa puede reanudarse; detener pone fin al movimiento. Cualquiera de las dos opciones cumple la regla, siempre que el usuario tenga realmente el control.
Ocultar también es una opción
A veces lo mejor es permitir que los usuarios oculten por completo el elemento en movimiento. Un control para descartar una cinta de texto elimina la distracción de inmediato.
Pause al pasar el cursor y al recibir el foco
Un carrusel también debe pausarse cuando el usuario pasa el cursor sobre él o accede a él mediante el tabulador, para que leer o interactuar no entre en conflicto con el avance automático.
Haga que el control sea accesible
El propio botón de pausa debe ser accesible mediante teclado y tener una etiqueta clara. Un control que nadie puede encontrar no cuenta.
Combínelo con la reducción del movimiento
Lo mejor es no reproducir automáticamente el contenido para quienes reduzcan el movimiento. Combine la comprobación de la preferencia con un control de pausa visible.
@media (prefers-reduced-motion: reduce) {
.carousel { animation-play-state: paused; }
}Omita el avance automático
La verdad es que muchos carruseles funcionan mejor sin avance automático. Permita que los usuarios avancen a su propio ritmo y el problema desaparecerá.
Comprobación rápida
¿Qué exige la regla de pausar, detener u ocultar?
Recapitulación
El contenido que se mueve automáticamente necesita una opción controlada por el usuario para pausar, detenerlo u ocultarlo. Haga que sea accesible mediante teclado y omita la reproducción automática cuando se reduzca el movimiento. ✅
Preguntas frecuentes
¿La lección «Pausar, detener y ocultar contenido en movimiento automático» es gratis?
Sí — el texto completo de «Pausar, detener y ocultar contenido en movimiento automático» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Pausar, detener y ocultar contenido en movimiento automático»?
Dé a los usuarios el control sobre carruseles y vídeos. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Pausar, detener y ocultar contenido en movimiento automático»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- prefers-reduced-motion en CSS y JS
- Trastornos vestibulares y riesgos del paralaje
- El umbral de tres destellos para las convulsiones
- Pausar, detener y ocultar contenido en movimiento automático