Animaciones accesibles con prefers-reduced-motion
Respete las necesidades de accesibilidad desactivando o reduciendo las animaciones para usuarios sensibles al movimiento.
Animaciones accesibles con prefers-reduced-motion es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Por qué reducir el movimiento?
Algunas personas tienen trastornos vestibulares, epilepsia u otras afecciones que hacen que las animaciones resulten perjudiciales. CSS proporciona la consulta de medios prefers-reduced-motion para detectar y respetar sus preferencias del sistema.
La consulta prefers-reduced-motion
Valores de la consulta:
no-preference— la persona no ha expresado ninguna preferenciareduce— la persona ha activado la reducción de movimiento en la configuración del sistema operativo
<div class="box"></div>
La opción drástica (no recomendada)
Una implementación habitual, pero rudimentaria, que elimina todas las animaciones. También elimina señales de movimiento útiles que no causan desorientación:
<div class="box"></div>
Mejor opción: movimiento con inclusión explícita
Un patrón más seguro consiste en definir animaciones únicamente para las personas que no han indicado preferencias de movimiento y dejar el estado predeterminado sin movimiento:
<button class="btn">Button</button>
<div class="card">Card</div>
Cambiar los tipos de animación
Reemplace los movimientos que pueden causar desorientación (translate, scale, rotate) por alternativas accesibles (opacity, color) para las personas que prefieren reducir el movimiento:
<div class="card demo-hover">Hover me</div>
Animaciones infinitas
Las animaciones infinitas (indicadores giratorios, pulsaciones) son especialmente problemáticas. Proporcione una alternativa estática:
<div class="spinner"></div>
Efectos de paralaje
El desplazamiento con efecto de paralaje puede provocar un mareo intenso. Desactívelo siempre para las personas que prefieren reducir el movimiento:
<div class="parallax">Parallax section</div>
Acceso desde JavaScript
Compruebe la preferencia en JavaScript cuando use la API Web Animations o bibliotecas de desplazamiento:
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
WCAG y el movimiento
WCAG 2.3.3 (AAA) exige que las animaciones activadas por una interacción se puedan desactivar. Usar prefers-reduced-motion es el enfoque CSS recomendado para cumplir este criterio.
Probar la reducción de movimiento
En la pestaña Rendering de Chrome DevTools, active «Emulate CSS prefers-reduced-motion: reduce» para realizar pruebas sin cambiar la configuración del sistema operativo. En macOS: Preferencias del Sistema → Accesibilidad → Reducir movimiento.
Documentar la intención
Comente las animaciones para explicar si son funcionales o meramente decorativas. Las animaciones funcionales (que indican un proceso o progreso) deben tener alternativas accesibles; las decorativas simplemente se pueden eliminar.
Comprobación rápida
¿Qué enfoque gestiona mejor prefers-reduced-motion para un efecto de elevación de una tarjeta al pasar el cursor?
Repaso
Use prefers-reduced-motion: reduce para detectar la sensibilidad al movimiento. En lugar de eliminar todas las animaciones, proporcione un estado predeterminado sin movimiento y active el movimiento únicamente dentro de las consultas no-preference. Reemplace las animaciones de transform que pueden causar desorientación por transiciones de opacity o color para las personas que prefieren reducir el movimiento. Realice pruebas con la emulación de DevTools.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Animaciones accesibles con prefers-reduced-motion» es gratis?
Sí — el texto completo de «Animaciones accesibles con prefers-reduced-motion» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Animaciones accesibles con prefers-reduced-motion»?
Respete las necesidades de accesibilidad desactivando o reduciendo las animaciones para usuarios sensibles al movimiento. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Animaciones accesibles con prefers-reduced-motion»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Sintaxis de @keyframes y propiedad animation
- Dirección, fill-mode e iteración de animaciones
- Encadenamiento y secuenciación de animaciones
- Animaciones accesibles con prefers-reduced-motion