A mí me funciona

El blog de Ignacio Cruz

Respeta la opción de Movimiento Reducido en tu sitio

17 jul. 2020
·
  • Accesibilidad
  • What is code
·

Gracias a K. Adam White, con quien tengo la gran suerte de compartir compañía, por el truco. Me chiva que el lo aprendió de Jinna Anne y Val Head.

Algo que no solemos tener en cuenta y que a mucha gente le puede ser molesta es la opción de accesibilidad Movimiento Reducido o Reduced Motion. Yo no soy para nada especialista en animaciones con CSS o JS pero a menudo estamos en proyectos en los que se exigen animaciones con ciertos elementos. Termina el proyecto y, oye, ha quedado fino con unos colorazos y nuestro sitio parece el Real Ballet de Moscú. A todo el mundo le gusta.

Según a11y-101.com (un sitio donde se recopila información sobre accesibilidad), puedes encontrarte con dos problemas:

  1. Las animaciones distraen a la gente y hacen que se olviden del contenido real
  2. Con ciertos colores y frecuencia en las animaciones (imaginemos un corazón latiendo muy rápido), las animaciones pueden marear a algunos visitantes. ¿Pero cómo va a ser? ¿quién no gusta de un buen GIF?

A lo largo de mi carrera en remoto me he encontrado con algunas personas a las que los GIFs o las animaciones en Slack les molestan. Al principio se piensa que la gente es un poco delicada pero te vas dando cuenta de que son molestias reales y que no pueden controlar, nada que ver con la delicadeza.

Para mejorar este aspecto en nuestro sitio web, podemos honrar la opción del navegador, prefers-reduced-motion, para que aquellas personas con dicha opción activada no tengan que ver nuestras increíbles e innecesarias animaciones.

CSS

<style>
.card {
  background: blue;
  padding: 50px;
  transition: background-color 2s ease-in-out;
}

.card:hover {
  background:red;
}
</style>
<div class="card">Hover me</div>

En este ejemplo tenemos un `div` por el que al pasar el ratón vemos una animación del color de fondo. Es un ejemplo simple y puede que no moleste a nadie pero para asegurarnos, desactivemos la animación dependiendo de qué valor tiene el usuario en prefers-reduced-motion:

@media screen and (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

JavaScript

Si nuestra animación viene dada por JS, podemos recoger la opción usando matchMedia, con la que podemos comprobar qué Media Query se cumple.

// Gracias a K. Adam por el código.
const safeToAnimate = window.matchMedia( '(prefers-reduced-motion: no-preference)' ).matches;
if ( safeToAnimate ) {
   // Animaciones aquí
}

Dónde cambiar la opción en el equipo

Todos los navegadores actuales tienen soporte para esta opción pero ésta se establece a nivel de sistema:

  • En Mac: “Preferencias de Sistema > Accesibilidad > Pantalla > Reducir movimiento”
  • En iOS: “Preferencias > General > Accesibilidad > Reducir movimiento”
  • En Windows 10: “Preferencias > Opciones de Accesibilidad (Creo) > Pantalla > Simplificar y Personalizar Windows > Mostrar animaciones en Windows (Creo)”.
RSS