Principio 2/2.2 Tiempo Suficiente/2.2.2-A

2.2.2-A. Contenido en movimiento, parpadeo o desplazamiento

2_Operable 2.2_Tiempo_suficiente

• Nivel: A
• Versión: 2.2
• Principio: 2_Operable
• Pauta: 2.2_Tiempo_suficiente
• Grupo: Interacción
• Subgrupo: Movimiento_visual

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

• Cognitiva – Barrera grave

Enunciado del criterio (Observatorio de Accesibilidad Web)

• El contenido en movimiento, que se desplace o parpadee, que comience de forma automática, dure más de cinco segundos y se muestre junto a otro contenido, debe disponer de un mecanismo que permita a los usuarios pausarlo, detenerlo u ocultarlo.

Comprensión del criterio

Descripción resumida

Los elementos que se mueven o parpadean automáticamente durante más de cinco segundos deben ofrecer un control visible para pausarlos, detenerlos o esconderlos.

Objetivo

Evitar distracciones y sobrecarga cognitiva provocada por movimiento continuo en pantalla, permitiendo que las personas mantengan la atención y la capacidad de lectura o interacción.

Importancia de cumplir el criterio

El movimiento automático y prolongado puede impedir leer, generar confusión, provocar mareo o pérdida de foco, afectando especialmente a personas con discapacidad cognitiva o visual.

Referencias WCAG

• G4: Allowing the content to be paused and restarted from where it was paused
• SCR33: Using script to scroll content, and providing a mechanism to pause it
• G11: Creating content that blinks for less than 5 seconds
• G187: Using a technology to include blinking content that can be turned off via the user agent
• G152: Setting animated GIF images to stop blinking after n cycles (within 5 seconds)
• SCR22: Using scripts to control blinking and stop it in five seconds or less
• G186: Using a control in the Web page that stops moving, blinking, or auto-updating content
• G191: Providing a link, button, or other mechanism that reloads the page without any blinking content
• F16: Failure due to including scrolling content where movement is not essential to the activity
• F47: Failure due to using the <blink> element
• F4: Failure due to using text-decoration: blink without a mechanism to stop it in less than five seconds
• F50: Failure due to a script that causes a blink effect without a mechanism to stop the blinking at 5 seconds or less
• F7: Failure due to an object or applet that blinks for more than five seconds

Recursos de apoyo

No hay

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Localizar si existe en la página contenido en movimiento que se desplace o parpadee, que comience de forma automática, dure más de cinco segundos y se muestre junto a otro contenido.
2. Paso 2. Verificar que para este contenido se ofrece alguna de las siguientes opciones:
   • a. Se permite detener el movimiento, parpadeo o desplazamiento.
   • b. Se permite pausar y reiniciar el movimiento, parpadeo o desplazamiento.
   • c. Se permite ocultar el contenido en movimiento, parpadeo o desplazamiento.

Resultado esperado

El usuario puede pausar, detener u ocultar el movimiento sin perder acceso al contenido principal.

Ejemplo

HTML

<button id="pauseButton">Pausar animación</button>
<div id="banner" class="banner">Oferta especial</div>

CSS:

.banner {
  animation: slide 3s infinite linear;
  background: #ffe08a;
  padding: 10px;
  font-weight: bold;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}

Javascript:

const pauseButton = document.getElementById("pauseButton");
const banner = document.getElementById("banner");

let paused = false;

pauseButton.addEventListener("click", () => {
  paused = !paused;
  banner.style.animationPlayState = paused ? "paused" : "running";
  pauseButton.textContent = paused ? "Reanudar animación" : "Pausar animación";
});

Otras herramientas de evaluación

• Revisión visual: identificar contenido que se mueve, desplaza, parpadea o da vueltas automáticamente (carruseles, sliders, banners animados, tickers, animaciones).
• Prueba funcional: comprobar que, si la animación dura más de 5 segundos, el usuario puede pausar, detener u ocultar el movimiento mediante controles visibles y accesibles.
• Inspección del navegador: revisar el código para detectar animaciones automáticas (CSS, JavaScript, librerías como Swiper, Slick, GSAP).
• Pruebas con teclado y lectores de pantalla: (NVDA, JAWS, VoiceOver) asegurar que los controles de pausa/detener/ocultar son operables con teclado, tienen foco visible y se anuncian correctamente.

Comentarios

A continuación se muestran comentarios sobre el criterio 2.2.2-A. Contenido en movimiento, parpadeo o desplazamiento

Loading comments...