2.2.2 Pausa, Detener, Ocultar
Criterio de éxito oficial
Para información en movimiento, parpadeante, desplazable o de actualización automática, se cumplen todas las siguientes condiciones:
- Movimiento, parpadeo, desplazamiento
- Para cualquier información que (1) se inicia automáticamente, (2) dura más de cinco segundos y (3) se presenta en paralelo con otro contenido, existe un mecanismo para pausarla, detenerla u ocultarla, a menos que sea esencial.
- Actualización automática
- Para cualquier información de actualización automática que (1) se inicia automáticamente y (2) se presenta en paralelo con otro contenido, existe un mecanismo para pausarla, detenerla, ocultarla o controlar la frecuencia, a menos que sea esencial.
Requisito de no interferencia
Cualquier contenido que no cumpla este criterio puede interferir con el uso de la página completa. Todo el contenido de la página debe cumplirlo. Ver Requisito de conformidad 5: No interferencia.
Parpadeo vs. destello
Parpadeo es contenido que distrae — se puede permitir si se detiene en 5 segundos. Destello (más de 3 por segundo, grande y brillante) puede provocar convulsiones y nunca se permite. Consulte la Directriz 2.3.
¿Qué es?
Este criterio evita que el contenido en movimiento, parpadeante o que se actualiza automáticamente distraiga a los usuarios. Animaciones, carruseles, tickers de noticias, GIFs animados y actualizaciones en vivo presentados junto a otro contenido deben poder ser controlados por el usuario.
La regla de los 5 segundos
El contenido en movimiento o parpadeante que se inicia automáticamente y dura más de 5 segundos, presentado junto a otro contenido, debe tener un mecanismo para pausarlo, detenerlo u ocultarlo. El contenido que se actualiza automáticamente no tiene esta excepción de 5 segundos.
Dos categorías de contenido
Movimiento / Parpadeo / Desplazamiento
Animaciones, carruseles, GIFs, banners, tickers, presentaciones con avance automático.
Actualización automática
Datos meteorológicos, precios de acciones, feeds de noticias, notificaciones que cambian sin intervención.
No aplica cuando
El contenido no se presenta en paralelo con otro contenido (como una animación de carga que es lo único en la página). Tampoco aplica a contenido cuyo movimiento es esencial para la actividad.
¿Por qué es importante?
El contenido en movimiento puede ser un obstáculo para quienes tienen dificultades para leer texto estático con rapidez, para quienes tienen dificultades para seguir objetos en movimiento, y puede causar problemas a los lectores de pantalla que se ven interrumpidos por actualizaciones constantes.
Para personas con TDAH, el contenido parpadeante es una distracción significativa. Los usuarios con trastornos vestibulares o convulsivos pueden verse gravemente afectados por el movimiento continuo.
Carrusel: sin control vs. con controles accesibles
¿Quién se ve afectado?
Personas con baja visión: Las lupas de pantalla pueden perder el seguimiento de contenido que se desplaza fuera del rango visible ampliado.
Personas con discapacidades cognitivas y TDAH: El contenido parpadeante es una distracción significativa que les impide concentrarse en el resto de la página.
Usuarios de lectores de pantalla: Las actualizaciones automáticas interrumpen constantemente la lectura con anuncios de los cambios.
Cómo implementar 2.2.2
Permitir pausar y reiniciar
Si el sitio muestra contenido que se desplaza o se mueve, proporciona controles claramente etiquetados para pausarlo o detenerlo. Una animación que se detiene solo mientras tiene foco y se reinicia al perderlo no se considera un mecanismo válido.
Controlar el parpadeo
El contenido parpadeante no debe durar más de cinco segundos. Para GIFs animados, ajusta el número de repeticiones y la frecuencia de fotogramas. Si el parpadeo debe durar más, proporciona un control para detenerlo.
Controlar actualizaciones automáticas
Para feeds, tickers y datos en vivo, ofrece controles para pausar la actualización o controlar su frecuencia. Los usuarios de lectores de pantalla se benefician especialmente de poder detener las interrupciones.
Ejemplos prácticos
Correcto GIF animado corto
Una animación que muestra el proceso de instalación de un software dura exactamente 4 segundos y luego se detiene. Como no supera los 5 segundos, no necesita controles de pausa.
Correcto Ticker de noticias con pausa
Un ticker de titulares de noticias en el pie de la página incluye un botón «Pausar» que detiene el desplazamiento. Al hacer clic de nuevo, el ticker se reanuda donde se pausó.
Fallo Carrusel que solo pausa al enfocarse
Un carrusel de imágenes se pausa cuando recibe foco del teclado y se reinicia en cuanto pierde el foco. Esto no cumple el criterio porque el usuario debe poder pausar de forma permanente sin mantener el foco.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G4 | Permitir pausar el contenido y reanudarlo donde se pausó | Suficiente |
| G11 | Crear contenido que parpadea a una velocidad de menos de 3 Hz | Suficiente |
| G152 | Configurar GIF animados para que se detengan tras n ciclos | Suficiente |
| G186 | Usar un control para detener, pausar o ocultar contenido en movimiento | Suficiente |
| G187 | Usar una tecnología que pueda reproducir contenido parpadeante de manera no parpadeante | Suficiente |
| SCR33 | Script para pausar contenido en movimiento | Suficiente |
Errores comunes
<blink>.