Técnica CSS WCAG 2.2
C39Usar la consulta de medios prefers-reduced-motion de CSS para evitar el movimiento
En resumen
Esta técnica explica cómo usar la consulta de medios CSS prefers-reduced-motion para desactivar las animaciones con movimiento cuando el usuario ha indicado en su sistema operativo o navegador que prefiere reducirlo. Beneficia a personas con trastornos vestibulares o sensibles a las distracciones, y ayuda a cumplir el criterio 2.3.3 Animaciones desde interacciones.
Ejemplo práctico
Paneles que entran deslizándose, tarjetas que rebotan al pulsar o efectos «parallax» al desplazar son habituales en tiendas online. Con prefers-reduced-motion se respeta el ajuste de movimiento reducido del sistema (criterio 2.3.3 Animación desde interacciones).
Así no: Panel de ofertas que entra girando y rebotando
Al pulsar el botón, el panel entra desde la izquierda con giro y rebote durante 1,2 s, aunque la persona haya activado en su sistema la opción de reducir el movimiento. La web no consulta esa preferencia.
<style>
.panel { margin-top: 12px; padding: 4px 12px; background: #f3eef8; border-left: 4px solid #744E9A; opacity: 0; visibility: hidden; transform: translateX(-120%) rotate(-8deg); transition: transform 1.2s cubic-bezier(.5, 1.8, .5, 1), opacity 1.2s, visibility 1.2s; }
.panel.abierto { opacity: 1; visibility: visible; transform: none; }
</style>
<button type="button" id="btn-ofertas" aria-expanded="false" aria-controls="ofertas">Ver ofertas de la semana</button>
<div class="panel" id="ofertas">
<p>Aceite de oliva virgen extra, 5 l: 29,90 €</p>
<p>Queso manchego curado, 1 kg: 14,50 €</p>
</div>
<script>
const boton = document.getElementById('btn-ofertas');
const panel = document.getElementById('ofertas');
boton.addEventListener('click', () => {
const abierto = panel.classList.toggle('abierto');
boton.setAttribute('aria-expanded', abierto);
});
</script>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Sin desplazamiento cuando se pide movimiento reducido
Se añade una consulta @media (prefers-reduced-motion: reduce) que elimina el desplazamiento y el giro y deja solo un fundido breve. Para ver la diferencia, active «Reducir movimiento» en el sistema o emúlelo en las herramientas del navegador (panel Rendering).
<style>
.panel { margin-top: 12px; padding: 4px 12px; background: #f3eef8; border-left: 4px solid #744E9A; opacity: 0; visibility: hidden; transform: translateX(-120%) rotate(-8deg); transition: transform 1.2s cubic-bezier(.5, 1.8, .5, 1), opacity 1.2s, visibility 1.2s; }
.panel.abierto { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) {
.panel { transform: none; transition: opacity .2s, visibility .2s; }
}
</style>
<button type="button" id="btn-ofertas" aria-expanded="false" aria-controls="ofertas">Ver ofertas de la semana</button>
<div class="panel" id="ofertas">
<p>Aceite de oliva virgen extra, 5 l: 29,90 €</p>
<p>Queso manchego curado, 1 kg: 14,50 €</p>
</div>
<script>
const boton = document.getElementById('btn-ofertas');
const panel = document.getElementById('ofertas');
boton.addEventListener('click', () => {
const abierto = panel.classList.toggle('abierto');
boton.setAttribute('aria-expanded', abierto);
});
</script>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Añadir la consulta de medios para las animaciones CSS pero no para las de JavaScript (librerías de «scroll reveal», parallax, GSAP), que siguen moviéndose.
- Usar
animation: noneen la consulta y que el elemento se quede en su estado inicial invisible, con lo que el contenido desaparece. - Aplicar la consulta solo a algunos componentes y olvidar efectos al pasar el ratón o al desplazar, como tarjetas que se inclinan o fondos que se mueven.
- Carruseles con transición de deslizamiento que no cambian a un fundido o a un cambio directo cuando se pide movimiento reducido.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
CSS que provoca movimiento desencadenado por las interacciones del usuario.
Descripción
El objetivo de esta técnica es permitir que los usuarios eviten que se muestren animaciones (incluidas las animaciones con movimiento) en las páginas web, mediante el uso de la consulta de medios (media query) prefers-reduced-motion de CSS.
Algunos usuarios sufren distracción o náuseas con el contenido animado. Por ejemplo, si al desplazar una página los elementos se mueven (más allá del movimiento esencial asociado al desplazamiento del contenido, que está bajo el control del usuario), puede desencadenar trastornos vestibulares.
Las consultas de medios que activan o desactivan de forma selectiva las animaciones basadas en CSS según las preferencias del sistema operativo o del agente de usuario permiten a los usuarios evitar esos desencadenantes.
El documento de comprensión de Animaciones desde interacciones incluye enlaces para cambiar el ajuste de «movimiento reducido».
Ejemplos
Consulta de medios prefers-reduced-motion de CSS
Los usuarios pueden indicar en su sistema su preferencia de movimiento para las interfaces, y la consulta de medios prefers-reduced-motion de CSS respetará esa elección. A continuación puede aplicarse CSS para desactivar ese movimiento para los usuarios que así lo soliciten.
/* CSS for the motion effect */
@media (prefers-reduced-motion: reduce) {
/* CSS to disable motion goes here */
}Ejemplo práctico de la consulta de medios «prefers-reduced-motion» de CSS
Como alternativa, es posible seguir el planteamiento inverso: definir estilos estáticos y, después, incluir una consulta de medios que solo se aplique cuando el usuario no haya establecido la preferencia de movimiento reducido.
/* "Static" CSS styles */
@media (prefers-reduced-motion: no-preference) {
/* CSS for the motion effect goes here */
}Pruebas
Procedimiento
Para cada elemento interactivo que desencadena una animación con movimiento como resultado de una interacción del usuario:
- Activar el ajuste de movimiento reducido en el sistema;
- Comprobar que la animación con movimiento es esencial;
- Comprobar que la animación con movimiento se suprime.
Resultados esperados
- La comprobación n.º 2 o la n.º 3 es verdadera.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica C39 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
