Accesibilidad Web: Implementación de Reduce Motion en Animaciones

Las preferencias de movimiento reducido consisten en que el usuario notifica al sistema que prefiere eliminar o reemplazar las animaciones de la página web.

Si tenemos animaciones que muestran un contenido específico después de un accionador de eventos (voltear la carta, mostrar algo, menús desplegables, etc.), esto provoca que el usuario no pueda verlo.

Media query “prefers-reduced-motion”

La media query prefers-reduced-motion si el usuario tiene alguna opción para eliminar o reemplazar animaciones. Los dos posibles valores que recibe son:

• no-preference: indica que el usuario no tiene preferencias para reducir las animaciones.
• reduce: indica que el usuario tiene preferencias para reducir las animaciones.

@media (prefers-reduced-motion: no-preference) {
    /* Código de animaciones */
}

/* Código sin animaciones */

En esta media query nos permitirá colocar el código que tiene animaciones, y dejar afuera el código sin animaciones como forma de accesibilidad. De esta manera, la página web será más accesible a todo el mundo.

Ejemplo de voltear la tarjeta de manera accesible

• Con animaciones.

• Sin animaciones, usando opacity.

• Ejemplo usando la media query “prefers-reduced-motion”.

Contribución creada por Andrés Guano.