moving-content-pausable
El contenido que se mueve por sí solo debería poder pausarse, detenerse u ocultarse
Pregunta, por los elementos animados al cargar la página durante más de cinco segundos o sin fin, si el movimiento se puede pausar, detener u ocultar.
Ámbito de aplicación. Elementos con una animación en curso cuando empieza el análisis, una animación CSS, una transición CSS o una que inició un script, en una línea de tiempo basada en el tiempo (no impulsada por el desplazamiento), que se renderizan y que duran más de cinco segundos desde su inicio (su retardo y cada iteración) o no terminan nunca. Ese movimiento empezó sin que el usuario lo pidiera. Sin el getAnimations de un navegador (jsdom), nada es aplicable.
Resultado esperado. WCAG 2.2.2 pide que el contenido en movimiento, parpadeante o con desplazamiento que empieza automáticamente, dura más de cinco segundos y se muestra junto a otro contenido se pueda pausar, detener u ocultar, salvo que el movimiento sea esencial. Si un control lo hace, y si el movimiento es esencial, es algo que debe comprobar una persona, así que se pregunta por cada elemento (cantTell), una sola vez, sean cuantas sean las animaciones que ejecute.
Qué informa un hallazgo.
reasonCode:MOVING_CONTENT_LOOPSpara una animación que no termina nunca,MOVING_CONTENT_OVER_5Spara una que termina después de más de cinco segundos.animations: las animaciones del elemento, hasta cinco, cada una con sukind(css-animation,css-transitionoscript), suname(el nombre de la animación o la propiedad en transición,''cuando no tiene ninguno) y suendTime, en milisegundos desde su inicio,nullcuando no termina nunca.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<style>@keyframes slide { to { transform: translateX(40px) } }</style><p style="animation: slide 2s linear infinite">Breaking news</p>
El párrafo se mueve por sí solo sin fin al cargar la página; una persona comprueba que un control lo pausa, lo detiene o lo oculta.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
MOVING_CONTENT_LOOPS
- Cargar la página y observar el elemento que indica el informe; su animación se inicia sola y nunca se detiene.
- Buscar una forma de pausarlo, detenerlo u ocultarlo. Suele estar junto al contenido, como un botón de pausa en un pase de diapositivas, pero puede estar en cualquier parte de la página, como un ajuste que detiene las animaciones. Probarla con el ratón y con el teclado (llegar a ella con Tab y pulsar Intro o Espacio).
- Comprobar si el movimiento se detiene realmente o el contenido se oculta, y si sigue así.
- Si no hay ningún control, decidir si el movimiento es esencial (quitarlo cambiaría el significado) o es un indicador de carga que se muestra solo.
Se cumple. Un control que funciona con el teclado pausa, detiene u oculta el movimiento, esté donde esté en la página, o el movimiento es esencial.
No se cumple. El contenido sigue moviéndose y nada en la página que funcione con el teclado lo pausa, detiene u oculta, lo que incumple WCAG 2.2.2.
MOVING_CONTENT_OVER_5S
- Cargar la página y observar el elemento que indica el informe; su animación se inicia sola y dura más de cinco segundos.
- Buscar una forma de pausarlo, detenerlo u ocultarlo. Suele estar junto al contenido, como un botón de pausa en un pase de diapositivas, pero puede estar en cualquier parte de la página, como un ajuste que detiene las animaciones. Probarla con el ratón y con el teclado (llegar a ella con Tab y pulsar Intro o Espacio).
- Comprobar si el movimiento se detiene realmente o el contenido se oculta, y si sigue así.
- Si no hay ningún control, decidir si el movimiento es esencial (quitarlo cambiaría el significado) o es un indicador de carga que se muestra solo.
Se cumple. Un control que funciona con el teclado pausa, detiene u oculta el movimiento, esté donde esté en la página, o el movimiento es esencial.
No se cumple. El contenido sigue moviéndose y nada en la página que funcione con el teclado lo pausa, detiene u oculta, lo que incumple WCAG 2.2.2.