Poner en pausa, detener, ocultar
El contenido en movimiento, parpadeante, desplazable o que se actualiza automáticamente y dura más de cinco segundos debe poder ser pausado, detenido u ocultado por el usuario. Abarca carruseles, marquesinas, teletipo de noticias, anuncios animados y feeds de actualización automática.
Qué exige
Para cualquier contenido que cumpla las tres condiciones siguientes: (a) se mueve, parpadea, desplaza o actualiza automáticamente, (b) comienza de forma automática, (c) dura más de cinco segundos y se muestra en paralelo con otro contenido, el usuario debe disponer de un mecanismo para pausarlo, detenerlo u ocultarlo. Lo mismo aplica al contenido de actualización automática que no implique movimiento (feeds de noticias en directo, marcadores deportivos, chat).
Excepciones: cuando el movimiento es esencial para la actividad (un vídeo que se está visualizando, un tutorial de animación), y cuando el contenido es lo único visible en pantalla (un indicador de carga antes de que aparezca el contenido).
Cómo cumplirlo
- Debe añadirse un botón visible de Pausa/Reproducción a cada carrusel, presentación de diapositivas o banner de avance automático. Conviene que sea el primer elemento con foco del widget de carrusel.
- Se recomienda pausar automáticamente los carruseles al pasar el cursor por encima y al recibir el foco de teclado — pero el usuario debe seguir pudiendo detenerlos completamente.
- Para teletipo de noticias, marquesinas y bandas de precios de bolsa, debe exponerse un botón de pausa en la misma fila, con un tamaño mínimo de 24×24 píxeles.
- Para paneles de control de actualización automática (Kibana, Grafana, deportes en directo), se recomienda ofrecer al usuario un selector de intervalo de actualización que incluya una opción de «solo actualización manual».
- Los GIFs animados en bucle indefinido deben sustituirse por elementos
<video>con controles nativos, o por un patrón de reproducción al hacer clic.
Fallos habituales
- Carruseles de cabecera que rotan cada tres a cinco segundos sin control de pausa — sigue siendo el fallo más habitual de 2.2.2 en las auditorías.
- Vídeos de fondo con reproducción automática y sin controles, especialmente en páginas de marketing.
- Teletipo de sitios de noticias que se desplaza horizontalmente sin botón de pausa.
- Ilustraciones SVG animadas en páginas de inicio que se repiten indefinidamente sin posibilidad de detenerlas.
- Notificaciones emergentes que se acumulan continuamente desde un feed en directo sin forma de silenciarlas.
axe y Lighthouse pueden detectar <marquee> y algunas vulnerabilidades de prefers-reduced-motion, pero no pueden identificar un carrusel basado en JavaScript sin controles. Se requiere revisión manual.
Por qué es importante
El contenido en movimiento automático es uno de los patrones más discapacitantes de la web. Desvía la atención de personas con discapacidades relacionadas con la concentración (TDAH, ciertos trastornos de ansiedad, síndrome post-conmoción), obliga a las usuarias de lectores de pantalla a perder continuamente su posición a medida que se actualizan los nodos del DOM, e imposibilita la lectura a personas con baja visión que siguen el texto lentamente. Un botón de pausa es una de las mejoras de accesibilidad más baratas y de mayor impacto que puede incorporar un equipo de marketing.