G186Ofrecer un control para detener lo que se mueve o parpadea

Por qué es importante

El movimiento constante distrae mucho a las personas con déficit de atención o con discapacidad intelectual. No pueden concentrarse en el resto de la página.

También afecta a quien lee despacio o usa ampliadores de pantalla: el texto desaparece antes de que lo hayan leído. Y un lector de pantalla puede anunciar cambios sin parar.

Cómo se hace

1. Localice todo lo que se mueve, parpadea o se actualiza solo: carruseles, teletipos, contadores, animaciones o listas en directo.
2. Añada un botón «Pausar» o «Detener» junto a ese contenido o al principio de la página.
3. Puede usar un control para todo o uno para cada elemento.
4. Haga que el control sea accesible: con nombre claro, buen contraste y que funcione con teclado.
5. Cuando el usuario lo reanude, muestre la información actualizada.
6. En contenido que se actualiza solo, puede ofrecer la opción de actualizar solo al pulsar un botón «Actualizar».

Cómo comprobarlo

1. Compruebe que hay un control para detener cada contenido que se mueve, parpadea o se actualiza solo.
2. Llegue al control con la tecla Tab y actívelo con Intro o la barra espaciadora.
3. Compruebe que el movimiento, el parpadeo o la actualización se detienen.

Ejemplo

Una franja de avisos que se desplaza sola tiene al lado un botón para pausarla y reanudarla.

<div class="avisos">
  <button type="button" id="pausa" aria-pressed="false">Pausar avisos</button>
  <p id="teletipo" class="desplazando">Corte de tráfico en la Gran Vía...</p>
</div>
<script>
  const boton = document.getElementById('pausa');
  boton.addEventListener('click', () => {
    const pausado = boton.getAttribute('aria-pressed') === 'true';
    boton.setAttribute('aria-pressed', String(!pausado));
    document.getElementById('teletipo').classList.toggle('desplazando', pausado);
  });
</script>