Criterios de Operable
OperablePauta 2.2 Tiempo suficiente
2.2.2Pausar, detener, ocultar
Nivel ALo exige la normativa (EN 301 549).
Qué pide
Los contenidos que se mueven, parpadean o se actualizan solos durante más de 5 segundos se pueden pausar.
A quién ayuda: Personas con déficit de atención o dificultades de lectura.
Un caso real
Un carrusel automático en la portada de una tienda.
BienEl carrusel tiene botón de pausa y se detiene al recibir foco.
MalLas diapositivas pasan solas sin control y no da tiempo a leerlas.
Cómo aplicarlo en código
Carrusel automático con botón de pausa
Todo lo que se mueve solo durante más de 5 segundos necesita un control para pausarlo. Además, si la persona ha pedido menos movimiento, no arranques la animación.
<section class="carrusel" aria-label="Ofertas destacadas">
<button type="button" class="carrusel-pausa">Pausar</button>
<!-- … diapositivas … -->
</section>
<script>
const boton = document.querySelector(".carrusel-pausa");
const menosMovimiento = matchMedia("(prefers-reduced-motion: reduce)").matches;
let timer = menosMovimiento ? null : setInterval(siguiente, 6000);
boton.textContent = timer ? "Pausar" : "Reproducir";
boton.addEventListener("click", () => {
if (timer) {
clearInterval(timer);
timer = null;
} else {
timer = setInterval(siguiente, 6000);
}
boton.textContent = timer ? "Pausar" : "Reproducir";
});
</script><script>
// Gira para siempre y no hay forma de pararlo
setInterval(siguiente, 3000);
</script>Cómo comprobarlo
Localiza carruseles, animaciones y tickers y busca el control de pausa.