Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.
Leer es un acto motor. El ojo no se desliza suavemente a lo largo de la línea; salta en sacadas y aterriza en fijaciones, y la comprensión ocurre en los aterrizajes. Cualquier cosa que se mueva en la página compite por esos aterrizajes. El movimiento es la señal de atención más fuerte que posee el sistema visual — una alarma evolutiva que no puede apagarse con fuerza de voluntad — y por eso los elementos animados cerca del texto son tan corrosivos para la lectura, y por eso el texto que se mueve por sí mismo es apenas legible.
La web moderna está saturada de movimiento: animaciones de entrada, escenografías en parallax, apariciones activadas por el desplazamiento, carruseles que avanzan solos. Parte de ello es oficio. Buena parte es decoración a costa del lector. Y para un grupo de lectores, es algo peor que una distracción.
Trastornos vestibulares: el movimiento como daño
Para las personas con trastornos vestibulares — afecciones del oído interno y del sistema del equilibrio — el movimiento en pantalla puede desencadenar mareo, náuseas, vértigo y dolores de cabeza que persisten mucho después de apartar la vista. Los desencadenantes son específicos y están bien descritos por los usuarios afectados: elementos grandes deslizándose por el viewport, efectos de zoom y de escala, capas de parallax moviéndose a velocidades distintas, y animación vinculada al desplazamiento que desacopla lo que el ojo ve de lo que la mano hizo. Esto no es una molestia; es una reacción física, más cercana al mareo por movimiento que al desagrado. Una página puede enfermar a un lector.
Las WCAG abordan esto en el 2.3.3 (Animación a partir de interacciones): la animación de movimiento activada por la interacción debe poder desactivarse salvo que la animación sea esencial. Es un criterio AAA, lo que subestima su importancia — para la población afectada, no es una mejora sino la diferencia entre lo usable y lo inusable.
El interruptor del lector: prefers-reduced-motion
Todos los sistemas operativos principales ofrecen hoy un ajuste de "reducir movimiento", y la media query prefers-reduced-motion lo expone a las hojas de estilo y a los scripts. Respetarlo es un requisito estricto de la práctica responsable, no una mejora progresiva, por una razón sencilla: quienes lo activaron lo hicieron porque el movimiento les hace daño. Ignorar el ajuste es ignorar una adaptación médica declarada.
Respetarlo bien implica más que apagar las animaciones:
- Sustituya el movimiento por opacidad. Un fundido comunica "esto apareció" sin trasladar nada por la pantalla; los fundidos cruzados se toleran ampliamente allí donde los deslizamientos y los zooms no.
- Desactive por completo el parallax y los efectos vinculados al desplazamiento bajo movimiento reducido — no existe una versión reducida del parallax que merezca conservarse.
- Aplique la preferencia también en la animación gobernada por JavaScript, no solo en CSS; la media query puede consultarse desde el script, y las bibliotecas de animación pueden condicionarse a ella.
- No interprete "reducir" como "eliminar todo cambio de estado". Las transiciones instantáneas también pueden desorientar; el objetivo es eliminar el movimiento espacial gratuito, no la retroalimentación.
El texto en movimiento es texto ilegible
El texto que se desplaza, avanza como teletipo, se desliza o parpadea derrota de plano la maquinaria de sacadas y fijaciones. Los lectores con baja visión, los que usan magnificación (para quienes un objetivo en movimiento puede salirse de la región magnificada a mitad de palabra), los lectores con dislexia o dificultades de atención, y los que simplemente leen despacio, resultan castigados de forma desproporcionada: el texto se va antes de que lo terminen.
El criterio 2.2.2 de las WCAG (Pausar, detener, ocultar) — de Nivel A, el escalón más bajo y menos negociable — exige que cualquier contenido en movimiento, parpadeante o con desplazamiento que arranque automáticamente y dure más de cinco segundos disponga de un mecanismo para pausarlo, detenerlo u ocultarlo. El infractor más común, con diferencia, es el carrusel de avance automático, especialmente el que lleva texto. Un carrusel que rota con temporizador garantiza que algunos lectores nunca terminen una diapositiva; el control de "pausa", cuando existe, es rutinariamente minúsculo, carece de etiqueta o solo se descubre después de la frustración que debía haber evitado. Si el contenido importa, merece quietud. Si rota automáticamente, el diseño ya ha admitido que no importa — y debería avanzar solo bajo el control del lector.
Los efectos de texto activados por el desplazamiento merecen una sospecha particular: párrafos que se funden al entrar en el viewport, titulares ensamblados letra a letra, texto fijado mientras los fondos se desplazan. Cada uno interpone una animación entre el lector y las palabras. El lector llegó para leer; haga que las palabras estén ahí.
El movimiento que respeta la lectura
Nada de esto aboga por una web estática. El movimiento tiene un trabajo legítimo: indicar que una acción se registró, mostrar adónde fue un panel descartado, atraer el ojo hacia un cambio que de otro modo pasaría inadvertido. El movimiento a ese servicio es breve, pequeño, infrecuente y nunca se aplica al texto de lectura. Un conjunto útil de pruebas:
- ¿El movimiento transmite algo que el lector necesita, o decora algo que le gusta al diseñador?
- ¿Está cerca o encima de texto que alguien está leyendo en ese momento?
- ¿Se ejecuta una vez, brevemente, o se repite en bucle?
- ¿Respeta
prefers-reduced-motionpor completo?
Por qué este capítulo es nuevo
La primera edición fue anterior a las condiciones que hacen necesario este capítulo. En 2005, CSS no podía animar; el movimiento serio requería Flash, y su conversación sobre accesibilidad se centraba en el parpadeo y el riesgo de convulsiones, no en el daño vestibular. La query prefers-reduced-motion no apareció en los navegadores hasta 2017, el 2.3.3 de las WCAG llegó con la versión 2.1 en 2018, y el estilo de casa saturado de animación y activado por el desplazamiento de la web moderna es más joven que eso. El movimiento se volvió barato; la disciplina de la contención es lo que estas pautas pueden añadir ahora.
En CSS
/* Default: entrance combines movement and fade */
.reveal {
animation: slide-fade-in 300ms ease-out;
}
@keyframes slide-fade-in {
from { opacity: 0; transform: translateY(1rem); }
to { opacity: 1; transform: none; }
}
/* Reduced motion: keep the fade, drop the movement */
@media (prefers-reduced-motion: reduce) {
.reveal {
animation: fade-in 200ms ease-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* Coarse safety net for unaudited animation — a last
resort, not the practice; it also removes the fades
and feedback worth keeping */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Recomendaciones
- Respete
prefers-reduced-motionen todas partes — CSS y JavaScript — como requisito estricto. - Bajo movimiento reducido, sustituya deslizamientos y zooms por fundidos; elimine de plano el parallax y los efectos vinculados al desplazamiento.
- Nunca anime el texto de lectura. La lectura y el movimiento son enemigos.
- Cumpla el 2.2.2 de las WCAG: todo lo que se mueva automáticamente durante más de cinco segundos necesita un control visible para pausar, detener u ocultar.
- Evite los carruseles de avance automático para contenido significativo; si existe uno, deje que el lector lo conduzca.
- Mantenga el movimiento con propósito breve, pequeño y sin bucles, y manténgalo lejos del texto que se está leyendo.
- Pruebe las páginas clave con el ajuste de reducir movimiento del sistema operativo activado; trate cualquier animación espacial superviviente como un error.