Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Preferencias de movimiento reducido

19/20
Recursos

Aportes 8

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Un muy buen modo de hacer que un usuario que tenga preferencias de movimiento reducido tenga una buena experiencia de usuario es usar este pequeña pieza de CSS que permite hacer que todas las animaciones se reduzcan:

@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;
  }
}

Si, se que el !important parece raro pero es un excelente modo de anular cualquier animación en caso de que el usuario prefiera las animaciones reducidas sin tener que preocuparse por cada animación en específico que tenemos en nuestro sitio.
.
Esto hace parte de un reset stylesheet que suelo usar bastante por si quieren verlo https://piccalil.li/blog/a-modern-css-reset/

Resumen de la clase

.
En relacion a la accesibilidad, cuando hablamos de transiciones, hay personas que pueden no querer ver las transiciones. Tu te podrías preguntar, ¿Quién no quiere ver las transiciones, si estas son geniales? Bueno, hay personas diversas en la viña del Señor…
.
El punto es que en el navegador hay un opción para “deshabilitar” este tipo de movimientos. Cuando esta opción este prendida, nosotros tendríamos que haber puesto un media queria, mejor conocido como @media. Y si, los media queries no solo sirven para hacer responsive design!
.
La manera en como lo hacemos es la siguiente:

@media (prefers-reduced-motion: no-preference){
	Your: code;
}

En el apartado de Your: code;, solo tendríamos que cambiar el código para que ya no haya transiciones tan alocadas y el usuario pueda ver algo menos escandaloso. En la clase dan un muy buen ejemplo practico

Preferencias de Usuario @media (propiedad: valor) {}

Dentro del apartado de media queries disponemos de una mecánica para detectar ciertas preferencias de usuario, o lo que es lo mismo, si el usuario ha indicado algunas preferencias por ciertos detalles en su dispositivo, sistema operativo o navegador que utiliza.

prefers-color-scheme

sistema que permite seleccionar un tema claro o un tema oscuro
Valores: dark, light

prefers-reduced-motion

Valores
no-preference
Indica que el usuario no ha dado a conocer ninguna preferencia al sistema.
reduce
Indica que el usuario ha notificado al sistema que prefiere una interfaz que elimine o reemplace los tipos de animación basada en movimiento que provocan incomodidad para las personas con trastornos del movimiento vestibular que puede causarles mareos, náuseas, dolores de cabeza o algo peor.

Entonces, ¿debería ir a lo seguro y deshacerme de toda mi animación?
Hacerlo sería una opción dramática y no necesariamente válida. Si se usan correctamente, las animaciones pueden incluso ayudar a la accesibilidad al ayudar a abordar los problemas de accesibilidad cognitiva.

Informate mas sobre la sensibilidad del movimiento Link

Aporte:
Si tienes muchas animaciones CSS en tu proyecto, puedes evitar que el usuario descargue las animaciones cuando cargue la pagina si tiene la preferencia de movimiento reducido activado.

Para ello se colocan todas las animaciones en un archivo .css y se llaman en el archivo raíz del documento a través de la etiqueta <link> y la propiedad media="(prefers-reduced-motion: no-preference)", de la siguiente manera:

<link rel="stylesheet" href="animations.css"
      media="(prefers-reduced-motion: no-preference)">

❤Accesibilidad con prefers-reduced-motion

Existen personas que previeron no ver ciertos movimientos de animación, y desean algo mas suave a la vista. La función de movimiento reducido se utiliza para detectar si el usuario ha solicitado que el sistema minimice la cantidad de movimiento no esencial que utiliza, permitiendo una mayor accesibilidad a todos los usuarios ❤️

Windows 10 animaciones

Para activar o desactivar las animaciones en Windows 10 precionamos “Win+U” y nos dirigimos a “Mostrar animaciones en Windows”.

Esto para poder probar lo que estamos viendo en esta clase, cumple la misma función de “Reduce motion” que tenemos en MAC.

Para profundizar en accesibilidad. Aquí el curso de Accesibilidad Web 😉