WCAG 2.2.2: Pausar, detener, ocultar

Qué significa esta regla

WCAG 2.2.2 (Pausar, Detener, Ocultar) es un criterio de éxito de Nivel A bajo el principio de Operable. Regula cualquier contenido que se mueva, parpadee, se desplace o se actualice automáticamente en una página. La regla establece dos requisitos distintos según cómo se comporte el contenido:

Para contenido en movimiento, parpadeante o desplazable que se inicie automáticamente, dure más de cinco segundos y se presente junto con otro contenido, se debe proporcionar a las personas usuarias un mecanismo para pausarlo, detenerlo u ocultarlo. Esto abarca animaciones CSS, carruseles controlados por JavaScript, texto tipo marquee, elementos parpadeantes, cintillos desplazables y banners animados.

Para contenido que se actualiza automáticamente, como marcadores en vivo, cintillos de cotizaciones bursátiles, feeds de redes sociales o titulares de noticias que se actualizan a intervalos, las personas usuarias deben poder pausar, detener, ocultar o controlar la frecuencia de las actualizaciones.

Para aprobar, se requiere que haya un control claramente operable (un botón, un atajo de teclado o un mecanismo similar) disponible antes o junto al contenido animado, que permita a las personas usuarias congelarlo o eliminarlo sin necesidad de ayuda. El propio control debe ser accesible: alcanzable con el teclado, correctamente etiquetado y utilizable sin ratón.

Se produce un fallo cuando existe cualquiera de los siguientes casos: un elemento <blink> o CSS text-decoration: blink que no se pueda detener; un elemento <marquee> sin mecanismo de pausa; un carrusel animado que se reproduce indefinidamente sin botón de pausa; un widget de noticias con actualización automática que no se puede controlar; o un vídeo de fondo en bucle sin forma de detenerlo.

WCAG define dos excepciones explícitas. En primer lugar, la regla no se aplica a animaciones que duren cinco segundos o menos, porque un movimiento breve que termina por sí solo no crea una distracción sostenida. En segundo lugar, no se aplica cuando la animación es esencial para la actividad; por ejemplo, una interfaz de negociación bursátil en tiempo real donde los precios en vivo son el propósito completo de la página, y pausarlos cambiaría de forma fundamental la naturaleza del contenido. Estas excepciones son limitadas y no deben utilizarse como excusa general para omitir la implementación.

Por qué es importante

El contenido en movimiento y parpadeante crea barreras graves para varios grupos de discapacidad distintos, y las consecuencias van desde una distracción leve hasta un daño médico real.

Las personas con trastorno por déficit de atención con hiperactividad (TDAH) u otras discapacidades cognitivas a menudo encuentran imposible concentrarse en el contenido principal de una página cuando hay elementos animados presentes en su visión periférica. El cerebro humano está neurológicamente preparado para atender al movimiento como mecanismo de supervivencia, y las personas con TDAH experimentan esta atracción de forma mucho más intensa que las personas neurotípicas. Un cintillo desplazable en la parte inferior de una página de noticias o un banner publicitario animado en una barra lateral pueden hacer que leer el artículo principal sea prácticamente imposible.

Las personas con trastornos vestibulares, incluidos la laberintitis, el vértigo posicional paroxístico benigno (VPPB) y la enfermedad de Ménière, pueden experimentar náuseas, mareos y desorientación cuando se exponen a ciertos tipos de movimiento en pantalla. Para estas personas, un carrusel en bucle o un efecto de desplazamiento parallax no es simplemente molesto; puede causar malestar físico que las obliga a abandonar la página por completo. Se estima que los trastornos vestibulares afectan al 35% de las personas adultas mayores de 40 años solo en Estados Unidos.

Las personas con epilepsia fotosensible corren riesgo de sufrir convulsiones por contenido que destella o parpadea a ciertas frecuencias. Aunque el contenido con destellos se aborda más directamente en WCAG 2.3.1, el contenido parpadeante cubierto por 2.2.2 también puede ser un factor desencadenante. La Organización Mundial de la Salud estima que la epilepsia afecta aproximadamente a 50 millones de personas en todo el mundo.

Para las personas usuarias de lectores de pantalla, el contenido que se actualiza automáticamente crea un problema igualmente disruptivo. Cuando se actualiza una región en vivo, los lectores de pantalla anuncian el nuevo contenido, lo que interrumpe a la persona usuaria a mitad de una frase mientras está escuchando otra cosa. Sin la posibilidad de pausar las actualizaciones, navegar por una página con contenido en vivo se vuelve extremadamente difícil.

Considere este escenario real: una persona usuaria con TDAH está completando una transferencia bancaria en línea en un portal de banca de comercio electrónico turco. Un banner promocional rotatorio alterna entre cuatro ofertas cada tres segundos en el encabezado. La persona usuaria no puede concentrarse en introducir el número de cuenta correcto. Comete un error de transcripción, la transferencia falla y debe repetir todo el proceso. Si el banner hubiera incluido un botón de pausa, la tarea habría sido sencilla. Esto no es hipotético: es una categoría documentada de fallo de interacción que las personas auditoras de accesibilidad encuentran con regularidad.

Más allá del acceso para personas con discapacidad, eliminar el movimiento incontrolable mejora la usabilidad para todas las personas, reduce la carga cognitiva y puede mejorar señales de SEO como las puntuaciones de Core Web Vitals al reducir los cambios de diseño y la ejecución innecesaria de JavaScript.

Reglas relacionadas de Axe-core

• blink: Esta regla comprueba la presencia del elemento HTML obsoleto <blink> y de propiedades CSS que producen texto parpadeante (históricamente text-decoration: blink). El elemento <blink> hace que el texto destelle encendiéndose y apagándose continuamente sin un mecanismo nativo para que la persona usuaria lo detenga. Axe marca cualquier instancia de este elemento como una infracción porque incumple directamente 2.2.2: no existe un caso de uso conforme para <blink>. La regla también alerta sobre efectos de parpadeo impulsados por CSS cuando la animación no se puede pausar. La detección automatizada es fiable aquí porque el elemento y la propiedad son identificables sintácticamente en el DOM y en los estilos calculados.
• marquee: Esta regla comprueba la presencia del elemento HTML <marquee>, que hace que el texto o el contenido se desplace horizontal o verticalmente por la pantalla en un bucle continuo. El elemento <marquee> no tiene un mecanismo de pausa accesible incorporado y está obsoleto en HTML5. Axe marca cualquier instancia como una infracción. Al igual que <blink>, la detección es sencilla porque el elemento es identificable sintácticamente. Sin embargo, las herramientas automatizadas no pueden detectar todas las infracciones de 2.2.2: las animaciones CSS, los carruseles de JavaScript, los widgets AJAX con actualización automática y los vídeos HTML5 en bucle requieren revisión manual porque el mecanismo para pausar (o su ausencia) solo puede determinarlo una persona evaluadora al analizar la experiencia interactiva completa.

Cómo probar

1. Análisis automatizado con axe DevTools o Lighthouse: Abra la página en Chrome o Firefox. Abra DevTools (F12), vaya al panel de axe DevTools o a la auditoría de Accesibilidad de Lighthouse y ejecute un análisis completo. Busque específicamente infracciones etiquetadas como blink o marquee en los resultados. Cada infracción incluirá el nodo DOM, el nivel de impacto (grave o crítico) y un enlace a la guía de corrección. Tenga en cuenta que un análisis automatizado limpio no significa cumplimiento total; continúe con los pasos manuales.
2. Inspección manual de animaciones CSS y JavaScript: Revise visualmente la página en busca de cualquier contenido que se mueva, se desplace, parpadee o se actualice automáticamente. Para cada instancia, compruebe si hay un control de pausa, detención u ocultación presente y visible antes o junto al contenido animado. Verifique que el control sea alcanzable con el teclado (Tab hasta él) y que al pulsar Enter o Espacio se active. Compruebe que al activar el control el movimiento se detenga realmente y no solo se reduzca su velocidad.
3. Prueba solo con teclado: Desconecte el ratón. Use la tecla Tab para navegar por toda la página. Confirme que puede llegar al control de pausa/detención de cada elemento animado usando solo el teclado y que el control tiene un indicador de foco visible. Si no puede llegar al control, o si para alcanzarlo es necesario tabular primero a través del contenido animado (lo que puede resultar desorientador), se trata de un fallo.
4. Prueba con lector de pantalla usando NVDA y Firefox: Inicie NVDA, abra la página en Firefox y escuche si hay anuncios de regiones en vivo que interrumpan la lectura. Navegue hasta el contenido que se actualiza automáticamente y confirme que al usar el control de pausa se silencian los anuncios de NVDA. Pruebe con JAWS y Chrome, y con VoiceOver y Safari en macOS, siguiendo el mismo procedimiento.
5. Comprobación de contenido con actualización automática: Para contenido que se actualiza con un temporizador (feeds de noticias, paneles de control, marcadores), anote el intervalo de actualización. Confirme que existe un mecanismo para pausar las actualizaciones o controlar la frecuencia. Dispare la actualización manualmente si es posible y verifique que los lectores de pantalla solo la anuncian cuando la persona usuaria lo elige, no de forma involuntaria.
6. Prueba de preferencia de movimiento reducido: En su sistema operativo, active la configuración de accesibilidad "Reducir movimiento". Recargue la página y verifique que las animaciones respetan la media query CSS prefers-reduced-motion. Aunque esto no es estrictamente obligatorio según WCAG 2.2.2, es una técnica complementaria sólida y cada vez más esperada por las personas auditoras.

Cómo corregir

Elemento <marquee> obsoleto — Incorrecto

<!-- Scrolling text with no pause control; fails 2.2.2 -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

Elemento <marquee> obsoleto — Correcto

<!-- Replaced with a CSS animation that respects prefers-reduced-motion
     and includes an accessible pause button -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- The CSS should define .ticker-content with animation,
     and a .paused class that sets animation-play-state: paused.
     The JS toggleTicker() function adds/removes .paused
     and updates aria-pressed and aria-label accordingly. -->

Elemento <blink> obsoleto — Incorrecto

<!-- Blink element causes continuous unstoppable flashing; fails 2.2.2 -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

Elemento <blink> obsoleto — Correcto

<!-- Static, high-contrast warning with role='alert' for screen readers.
     No blinking required to communicate urgency. -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

Carrusel de reproducción automática sin control de pausa — Incorrecto

<!-- Carousel advances every 4 seconds with no way to stop it; fails 2.2.2 -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

Carrusel de reproducción automática sin control de pausa — Correcto

<!-- Carousel includes a visible, keyboard-accessible pause button.
     The aria-label updates dynamically to reflect current state.
     Autoplay also stops on focus/hover (WCAG best practice). -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- SVG pause icon or text label -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

Widget de datos en vivo con actualización automática — Incorrecto

<!-- Widget refreshes every 10 seconds via JS with no user control; fails 2.2.2 -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

Widget de datos en vivo con actualización automática — Correcto

<!-- Widget includes a pause button; aria-live is set to 'off' when paused
     so screen readers are not interrupted during paused state. -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS should toggle aria-live between 'polite' and 'off',
     stop the setInterval timer when paused, and update
     aria-pressed and aria-label on the button accordingly. -->

Errores comunes

• Usar elementos <marquee> o <blink> en cualquier parte del HTML de producción, incluso para estilos "retro" o decorativos: ambos elementos están obsoletos, carecen de significado semántico y siempre incumplen 2.2.2 sin vía de corrección distinta a su eliminación.
• Añadir un botón de pausa que solo sea visible al pasar el ratón por encima, lo que lo hace inaccesible para las personas usuarias que solo usan teclado, que son quienes más lo necesitan y que normalmente navegan con Tab en lugar de con el puntero.
• Implementar un botón de pausa que no se pueda alcanzar con la tecla Tab antes del contenido animado en el DOM, obligando a las personas usuarias a navegar a través del movimiento desorientador antes de poder detenerlo.
• Usar animation-play-state: paused en CSS para detener la animación visualmente, pero sin desactivar también el bucle de JavaScript setInterval o requestAnimationFrame que impulsa las actualizaciones de contenido: la apariencia visual se detiene, pero el DOM sigue cambiando, interrumpiendo igualmente a los lectores de pantalla.
• Configurar aria-live='polite' en un carrusel o cintillo y dejarlo activo incluso cuando la persona usuaria ha pulsado pausa: la región en vivo continúa anunciando cambios en el DOM a las personas usuarias de lectores de pantalla aunque la animación visual esté congelada.
• Confiar en autoplay=false en un elemento <video> sin verificar el comportamiento en todos los navegadores; algunas combinaciones de navegador y plugin anulan este atributo, haciendo que los vídeos se reproduzcan automáticamente en contra de la intención de la persona autora y de la expectativa de la persona usuaria.
• Tratar la excepción de cinco segundos como un período de gracia general y crear un carrusel que muestre cada diapositiva durante cuatro segundos suponiendo que cada transición individual está por debajo de cinco segundos: la animación en su conjunto es continua y dura mucho más de cinco segundos, por lo que la excepción no se aplica.
• Proporcionar un control de pausa que detiene la animación pero no indica visualmente el estado de pausa, dejando a las personas usuarias sin saber si su acción tuvo algún efecto: el botón debe reflejar su estado actual, idealmente usando aria-pressed y actualizando su etiqueta entre "Pause" y "Play".
• Aplicar prefers-reduced-motion solo a las transiciones CSS e ignorar las animaciones controladas por JavaScript que se ejecutan independientemente de CSS, lo que significa que las personas que han activado la configuración de reducción de movimiento a nivel del sistema siguen experimentando movimiento en la página.
• Colocar el control de pausa fuera del orden de tabulación del teclado configurando tabindex='-1' o incluyéndolo en un contenedor con display:none que solo se muestra condicionalmente con interacción de ratón: el control debe ser siempre alcanzable mediante navegación con teclado.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial de Turquía n.º 2025/10, publicada en el Boletín Oficial (Resmî Gazete) n.º 32933 el 21 de junio de 2025, establece requisitos obligatorios de accesibilidad web y móvil alineados con WCAG 2.2. WCAG 2.2.2 Pausar, Detener, Ocultar es un criterio de Nivel A, lo que significa que se sitúa en el nivel más fundamental de cumplimiento y es obligatorio sin excepción para todas las entidades cubiertas por la circular.

La circular establece plazos de cumplimiento escalonados: las instituciones y organismos públicos deben lograr la conformidad completa de Nivel A en el plazo de un año desde la fecha de publicación de la circular, y las entidades del sector privado deben hacerlo en el plazo de dos años. No existe una adhesión voluntaria: la circular impone una obligación legal, y las propiedades digitales que no cumplan están sujetas a supervisión administrativa y posibles acciones de ejecución.

Las entidades cubiertas por la circular incluyen una amplia sección de los servicios digitales turcos: todas las instituciones públicas y organismos gubernamentales; las plataformas de comercio electrónico que operan en Turquía; los bancos e instituciones de servicios financieros; los hospitales y proveedores de atención sanitaria privada; los operadores de telecomunicaciones con 200,000 o más abonados; las agencias de viajes; las empresas de transporte privado; y las escuelas privadas que cuenten con autorización del Ministerio de Educación Nacional (Millî Eğitim Bakanlığı, MoNE).

Para estas entidades, WCAG 2.2.2 tiene implicaciones directas y prácticas. Un sitio de comercio electrónico con un carrusel de productos de reproducción automática y sin botón de pausa está en infracción. El portal de banca por internet de un banco que utiliza un cintillo de avisos de seguridad desplazable sin control de detención no cumple la norma. La página de reserva de citas de un hospital que utiliza alertas animadas que no se pueden detener incumple el requisito. La página de inicio de una empresa de telecomunicaciones con un vídeo de fondo en bucle y sin control de detención visible debe corregirse antes de la fecha límite.

Más allá de la obligación legal, la legislación turca de accesibilidad se alinea con la tendencia europea más amplia ejemplificada por la Directiva de Accesibilidad Web de la UE y la Ley Europea de Accesibilidad (EAA). A medida que las empresas turcas se expanden a los mercados europeos o prestan servicio a personas usuarias europeas, la conformidad con WCAG 2.2 Nivel A —incluido el criterio 2.2.2— se convierte en un requisito de cumplimiento doble. Implementar correctamente Pausar, Detener, Ocultar es, por tanto, tanto una necesidad legal nacional como un activo estratégico para las organizaciones turcas con presencia digital internacional.