F16Contenido que se mueve o se desplaza sin poder pausarlo

Por qué es importante

• Una persona con baja visión o que lee despacio no llega a leer un texto que pasa solo.
• Las personas con dificultades de atención se distraen y no pueden centrarse en el resto de la página.
• Quien usa un ampliador pierde de vista el texto en cuanto se mueve.

Por ejemplo, el aviso de un corte de agua pasa en un teletipo y desaparece antes de que la persona lo lea.

Cómo evitarlo

1. Valore si el movimiento es necesario. Lo más sencillo es que la persona avance cuando quiera.
2. Si hay movimiento, ponga junto al contenido un botón visible «Pausar» que funcione con teclado.
3. Al pausar, el movimiento debe detenerse y no volver a arrancar solo.
4. Ofrezca también «Reanudar», que continúe desde el punto en que se paró.
5. Como ayuda extra, detenga el movimiento mientras tiene el foco o el ratón encima. Respete también la preferencia del sistema prefers-reduced-motion.

Cómo comprobarlo

1. Cargue la página y busque elementos que se muevan, se desplacen o cambien solos: carruseles, teletipos o banners.
2. Localice un control para pausarlos o pararlos. Actívelo con el ratón y con el teclado.
3. Espere unos segundos y compruebe que el movimiento no se reanuda solo.
4. Use el control para reanudar y compruebe que sigue desde donde se paró.

Ejemplo

Teletipo de avisos municipales con un botón que lo pausa y lo reanuda.

<style>
  .texto { animation: pasar 20s linear infinite; }
  .pausado .texto { animation-play-state: paused; }
</style>
<div class="teletipo" id="teletipo">
  <button type="button" id="pausa">Pausar</button>
  <p class="texto">Corte de agua el martes de 8:00 a 12:00.</p>
</div>
<script>
  pausa.addEventListener('click', () => {
    const parado = teletipo.classList.toggle('pausado');
    pausa.textContent = parado ? 'Reanudar' : 'Pausar';
  });
</script>