Respetar las preferencias de movimiento de los usuarios

 

 

 

  • ¡Registro!
  • Accesibilidad para diseñadores, con Stéphanie Walter

  • Índice
    1. ¿Qué regla?
    2. Uso práctico: aplicación prefers-reduced-motiondel comportamiento de desplazamiento
    3. Catering para preferencias de movimiento en Javascript
    4. reduced-motionNo significa que no haya movimiento
      1. Cuando eliminar la animación es mejor
    5. La suma de todas las partes
    6. Alternancia de movimiento explícito
      1. Propiedades personalizadas
      2. Componente de vídeo
      3. Usando el pictureelemento
    7. Soporte del navegador y reflexiones finales
      1. Recursos Relacionados

    La prefers-reduced-motionconsulta de medios tiene un soporte excelente en todos los navegadores modernos desde hace un par de años. En este artículo, Michelle Barker explica por qué no hay motivo para no utilizarlo hoy en día para hacer que sus sitios sean más accesibles.

     

    Cuando se trabaja con movimiento en la web, es importante tener en cuenta que no todo el mundo lo experimenta de la misma manera. Lo que puede parecer suave y resbaladizo para algunos puede resultar molesto o distraer a otros o, peor aún, provocar sensaciones de malestar o incluso provocar convulsiones. Los sitios web con mucho movimiento también pueden tener un mayor impacto en la duración de la batería de los dispositivos móviles o hacer que se utilicen más datos (la reproducción automática de videos, por ejemplo, requerirá más datos del usuario que una imagen estática). Estas son sólo algunas de las razones por las que los sitios con mucho movimiento pueden no ser deseables para todos.

    La mayoría de los sistemas operativos nuevos permiten al usuario establecer sus preferencias de movimiento en la configuración a nivel de sistema. La prefers-reduced-motionconsulta de medios (parte de la especificación de consultas de medios de nivel 5 ) nos permite detectar las preferencias de movimiento a nivel del sistema de los usuarios y aplicar estilos CSS que las respeten.

     

    Las dos opciones para prefers-reduced-motionson reduceo no-preference. Podemos usarlo de la siguiente manera en nuestro CSS para desactivar la animación de un elemento si el usuario ha establecido explícitamente una preferencia de movimiento reducido :

    .some-element { animation: bounce 1200ms;}@media (prefers-reduced-motion: reduce) { .some-element { animation: none; }}

    Por el contrario, podríamos configurar la animación sólo si el usuario no tiene preferencia de movimiento. Esto tiene la ventaja de reducir la cantidad de código que necesitamos escribir y significa que es menos probable que nos olvidemos de atender las preferencias de movimiento de los usuarios:

    @media (prefers-reduced-motion: no-preference) { .some-element { animation: bounce 1200ms; }}

    Una ventaja adicional es que los navegadores más antiguos que no son compatibles prefers-reduced-motionignorarán la regla y solo mostrarán nuestro elemento original sin movimiento.

    ¿Qué regla?

    A diferencia min-widthde las max-widthconsultas de los medios, donde el consenso más o menos establecido es que los dispositivos móviles primero (por lo tanto, favorecen a min-width), no existe una única forma "correcta" de escribir sus estilos de movimiento reducido. Tiendo a favorecer el segundo ejemplo (aplicar animaciones solo si prefers-reduced-motion: no-preferencese evalúa como verdadero), por las razones enumeradas anteriormente. Tatiana Mac escribió este excelente artículo que cubre algunos de los enfoques que los desarrolladores podrían considerar adoptar, así como muchos otros puntos interesantes, incluidas preguntas clave que se deben plantear al diseñar con movimiento en la web.

    Como siempre, la comunicación en equipo y una estrategia coherente son clave para garantizar que se cubran todas las bases en lo que respecta a la accesibilidad web.

    Uso práctico: aplicación prefers-reduced-motiondel comportamiento de desplazamiento

    prefers-reduced-motiontiene muchas aplicaciones más allá de aplicar (o no aplicar) animaciones o transiciones de fotogramas clave. Un ejemplo es el desplazamiento suave. Si configuramos scroll-behaviour: smoothnuestro htmlelemento, cuando un usuario haga clic en un enlace de anclaje en la página, se desplazará suavemente a la posición apropiada en la página ( actualmente no es compatible con Safari ):

     

    html { scroll-behavior: smooth;}

    Desafortunadamente, en CSS no tenemos mucho control sobre ese comportamiento en este momento. Si tenemos una página de contenido larga, la página se desplaza muy rápido, lo que puede ser una experiencia bastante desagradable para alguien con sensibilidad al movimiento. Al incluirlo en una consulta de medios, podemos evitar que ese comportamiento se aplique en los casos en que el usuario tenga una reduced-motionpreferencia:

    @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; }}

    Catering para preferencias de movimiento en Javascript

    A veces necesitamos aplicar movimiento en JavaScript en lugar de CSS. De manera similar, podemos detectar las preferencias de movimiento de un usuario con JS, usando matchMedia. Veamos cómo podemos implementar condicionalmente un comportamiento de desplazamiento suave en nuestro código JS:

    /* Set the media query */const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')button.addEventListener('click', () = { /* If the media query matches, set scroll behavior variable to 'auto', otherwise set it to 'smooth' */ const behavior = prefersReducedMotion.matches ? 'auto' : 'smooth' /* When the button is clicked, the user will be scrolled to the top */ window.scrollTo({ x: 0, y: 0, behavior })})

    Se puede utilizar el mismo principio para detectar si se deben implementar UI ricas en movimiento con bibliotecas JS, o incluso si se deben cargar las bibliotecas mismas.

    En el siguiente fragmento de código, la función regresa antes si el usuario prefiere un movimiento reducido, evitando la importación innecesaria de una gran dependencia: una ganancia de rendimiento para el usuario. Si no tienen ninguna preferencia de movimiento establecida, podemos importar dinámicamente la biblioteca de animaciones de Greensock e inicializar nuestras animaciones.

    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')const loadGSAPAndInitAnimations = () = { /* If user prefers reduced motion, do nothing */ if (prefersReducedMotion.matches) return /* Otherwise, import the GSAP module and initialize animations */ import('gsap').then((object) = { const gsap = object.default /* Initialize animations with GSAP here */ })}loadGSAPAndInitAnimations()

    reduced-motionNo significa que no haya movimiento

    Al aplicar estilos para preferencias de movimiento reducido, es importante que sigamos proporcionando al usuario indicadores significativos y accesibles de cuándo se ha producido una acción. Por ejemplo, al desactivar un estado de desplazamiento que distraiga o que requiera mucho movimiento para los usuarios que prefieren un movimiento reducido, debemos tener cuidado de proporcionar un estilo alternativo claro para cuando el usuario esté flotando sobre el elemento.

    La siguiente demostración muestra una transición elaborada cuando el usuario se desplaza o se concentra en un elemento de la galería si no tiene ninguna preferencia de movimiento establecida. Si prefieren un movimiento reducido, la transición es más sutil, pero aún así indica claramente el estado de desplazamiento:

     

    Vea el bolígrafo [Galería con movimiento preferido] (https://codepen.io/smashingmag/pen/KKvMqaL) de Michelle Barker .

    Reducir el movimiento tampoco significa necesariamente eliminar todas las transformaciones de nuestra página web. Por ejemplo, es poco probable que un botón que tiene un pequeño ícono de flecha que se mueve unos pocos píxeles al pasar el mouse cause problemas a alguien que prefiere una experiencia de movimiento reducido, y proporciona un indicador más útil de un cambio de estado que el color solo.

    A veces veo desarrolladores que aplican estilos de movimiento reducido de la siguiente manera, lo que elimina todas las transiciones y animaciones en todos los elementos:

    @media screen and (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }}

    Podría decirse que esto es mejor que ignorar las preferencias de movimiento de los usuarios, pero no nos permite adaptar fácilmente los elementos para proporcionar transiciones más sutiles cuando sea necesario.

    En el siguiente fragmento de código, tenemos un botón que crece en escala al pasar el mouse . Estamos cambiando los colores y la escala, pero los usuarios que prefieran el movimiento reducido no obtendrán ninguna transición:

    button { background-color: hotpink; transition: color 300ms, background-color 300ms, transform 500ms cubic-bezier(.44, .23, .47, 1.27);}button:hover,button:focus { background-color: darkviolet; color: white; transform: scale(1.2);}@media screen and (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } button { /* Even though we would still like to transition the colors of our button, the following rule will have no effect */ transition: color 200ms, background-color 200ms; } button:hover, button:focus { /* Preventing the button scaling on hover */ transform: scale(1); }}

    Mira esta demostración para ver el efecto. Quizás esto no sea ideal, ya que el cambio repentino de color sin una transición podría resultar más discordante que una transición de un par de cientos de milisegundos. Ésta es una de las razones por las que, en general, prefiero diseñar para lograr un movimiento reducido , caso por caso. Cambiar bañera por plato de ducha | Mamparas - Bricoducha

    Si está interesado, esta es la misma demostración refactorizada para permitir personalizar la transición cuando sea necesario. Utiliza una propiedad personalizada para la duración de la transición, lo que nos permite activar y desactivar la transición de escala sin tener que reescribir toda la declaración.

    Cuando eliminar la animación es mejor

    Eric Bailey plantea el punto de que "no todos los dispositivos que pueden acceder a la web también pueden renderizar animaciones, o renderizar animaciones sin problemas" en su artículo, " Revisitar prefiere el movimiento reducido, la consulta de medios de movimiento reducido ". Para dispositivos con una frecuencia de actualización baja, que puede provocar animaciones entrecortadas, podría ser preferible eliminar la animación . La updatefunción multimedia se puede utilizar para determinar esto:

    @media screen and (prefers-reduced-motion: reduce), (update: slow) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }}

    Asegúrese de leer el artículo completo para conocer las recomendaciones de Eric, ya que es una persona de primer nivel a seguir en el campo de la accesibilidad.

     

    La suma de todas las partes

    Es importante tener en cuenta el diseño general de la página cuando se centra tanto en CSS a nivel de componente. Lo que podría parecer una animación bastante inofensiva a nivel de componente podría tener un impacto mucho mayor cuando se repite a lo largo de la página y es una de muchas partes móviles.

    En el artículo de Tatiana, sugiere organizar animaciones (con prefers-reduced-motion) en un único archivo CSS, que se puede cargar sólo si (prefers-reduced-motion: no-preference)se evalúa como verdadero. Ver la suma total de todas nuestras animaciones podría tener el beneficio adicional de ayudarnos a visualizar la experiencia de visitar el sitio en su conjunto y adaptar nuestros estilos de movimiento reducido en consecuencia.

    Alternancia de movimiento explícito

    Si bien prefers-reduced-motiones útil, tiene el inconveniente de que sólo está dirigido a usuarios que conocen la función en la configuración de su sistema. Muchos usuarios desconocen esta configuración, mientras que otros pueden estar usando una computadora prestada, sin acceso a la configuración a nivel del sistema. Aún así, otros podrían estar contentos con el movimiento para la gran mayoría de los sitios, pero encontrar sitios con un uso intensivo de movimiento difíciles de soportar.

    Puede resultar molesto tener que ajustar las preferencias del sistema sólo para visitar un sitio. Por estos motivos, en algunos casos, podría ser preferible proporcionar un control explícito en el sitio mismo para activar y desactivar el movimiento . Podemos implementar esto con JS.

    La siguiente demostración tiene varios círculos flotando en el fondo. Los estilos de animación iniciales están determinados por las preferencias del sistema del usuario (con prefers-reduced-motion); sin embargo, el usuario tiene la capacidad de activar o desactivar el movimiento mediante un botón. Esto agrega una clase a body, que podemos usar para establecer estilos según la preferencia seleccionada. Como beneficio adicional, la elección de preferencia de movimiento también se conserva en el almacenamiento local, por lo que se “recuerda” en la próxima visita del usuario.

    Vea el lápiz [alternancia de movimiento reducido] (https://codepen.io/smashingmag/pen/porEQLB) de Michelle Barker .

    Propiedades personalizadas

    Una característica de la demostración es que la palanca establece una propiedad personalizada, --playStateque podemos usar para reproducir o pausar animaciones. Esto podría resultar especialmente útil si necesita pausar o reproducir varias animaciones a la vez. En primer lugar, configuramos el estado de reproducción en paused:

    .circle { animation-play-state: var(--playState, paused);}

    Si el usuario ha establecido una preferencia para el movimiento reducido en la configuración de su sistema, podemos configurar el estado de reproducción en running:

     

    @media (prefers-reduced-motion: no-preference) { body { --playState: running; }}

    Nota: Establecer esto en body, a diferencia del elemento individual, significa que la propiedad personalizada se puede heredar.

    Cuando el usuario hace clic en el botón de alternancia, la propiedad personalizada se actualiza en body, lo que alternará cualquier instancia en la que se use:

    // This will pause all animations that use the `--playState` custom propertydocument.body.style.setProperty('--playState', 'paused')

    Puede que esta no sea la solución ideal en todos los casos, pero una ventaja es que la animación simplemente se detiene cuando el usuario hace clic en el botón, en lugar de volver a su estado inicial, lo que podría resultar bastante discordante.

    Un agradecimiento especial a Scott O'Hara por sus recomendaciones para mejorar la accesibilidad del interruptor. Me hizo saber que algunos lectores de pantalla no anuncian el texto del botón actualizado, que cambia cuando un usuario hace clic en el botón, y role="switch"en su lugar lo sugieren, aria-checkedconmutando hacia ono offal hacer clic.

    Componente de vídeo

    En algunos casos, alternar el movimiento a nivel de componente podría ser una mejor opción. Tome una página web con un fondo de vídeo de reproducción automática. Debemos asegurarnos de que el video no se reproduzca automáticamente para los usuarios que prefieren el movimiento reducido, pero aún así debemos brindarles una forma de reproducir el video solo si así lo desean . (Algunos podrían argumentar que deberíamos evitar la reproducción automática de videos y punto, ¡pero no siempre ganamos esa batalla!) Del mismo modo, si un video está configurado para que se reproduzca automáticamente para usuarios sin una preferencia declarada, también debemos brindarles una manera de reproducirlos automáticamente. pausar el vídeo.

    Esta demostración muestra cómo podemos configurar el atributo de reproducción automática cuando el usuario no tiene ninguna preferencia de movimiento establecida, implementando un botón personalizado de reproducción/pausa para permitirle alternar también la reproducción, independientemente de su preferencia:

    Vea el lápiz [vídeo con preferencia de movimiento] (https://codepen.io/smashingmag/pen/qBXNjqR) de Michelle Barker .

    (Posteriormente encontré esta publicación de Scott O'Hara , que detalla este caso de uso exacto).

    Usando el pictureelemento

    Chris Coyier escribió un artículo interesante que combina un par de técnicas para cargar diferentes fuentes de medios según las preferencias de movimiento del usuario. Esto es genial, ya que significa que para los usuarios que prefieren el movimiento reducido , ni siquiera se descargará el archivo GIF, mucho más grande. La desventaja, hasta donde puedo ver, es que una vez descargado el archivo, el usuario no tiene forma de volver a la alternativa sin movimiento.

    Creo una versión modificada de la demostración que agrega esta opción. (Active reduced-motionlas preferencias de su sistema para verlo en acción). Desafortunadamente, al alternar entre las opciones animadas y sin movimiento en Chrome, parece que el archivo GIF se descarga de nuevo cada vez, lo que no es el caso en otros navegadores:

    Vea el bolígrafo [¡Prefiere la técnica de movimiento de reducción PLUS! [bifurcado]](https://codepen.io/smashingmag/pen/porbPXG) por Michelle Barker .

    Aún así, esta técnica parece una forma más respetuosa de mostrar GIF, lo que puede ser una fuente de frustración para los usuarios.

    Soporte del navegador y reflexiones finales

    prefers-reduced-motiontiene un excelente soporte en todos los navegadores modernos desde hace un par de años. Como hemos visto, al adoptar un enfoque de movimiento reducido primero, los navegadores no compatibles simplemente obtendrán un reduced-motionrespaldo. No hay razón para no usarlo hoy para hacer que sus sitios sean más accesibles.

    Los cambios personalizados definitivamente tienen un lugar y pueden mejorar enormemente la experiencia de los usuarios que no conocen esta configuración o lo que hace. La desventaja para el usuario es la inconsistencia: si cada desarrollador se ve obligado a idear su propia solución, el usuario debe buscar un interruptor de movimiento en un lugar diferente en cada sitio web.

    Parece que la capa que falta aquí son los navegadores . Me encantaría ver que los navegadores implementen reduced-motionalternancias, en algún lugar de fácil acceso para el usuario, para que las personas sepan dónde encontrarlo independientemente del sitio que estén navegando. También podría alentar a los desarrolladores a dedicar más tiempo a garantizar la accesibilidad al movimiento.

    Recursos Relacionados

    • Especificación de consultas de medios de nivel 5 , Consorcio World Wide Web (W3C)
    • prefers-reduced-motion, Documentos web MDN, Mozilla
    • Diseño con movimiento reducido para sensibilidades de movimiento , Val Head, Smashing Magazine
    • Adoptando un enfoque sin movimiento para las animaciones , Tatiana Mac
    • Técnica cinematográfica reducida, toma 2 , Chris Coyier, CSS-Tricks
    • Revisando prefers-reduced-motion, The Reduced Motion Media Query , Eric Bailey, CSS-Tricks
    • Reducir el movimiento para mejorar la accesibilidad , Lindsey Kopacz

    (vf, yk, il)Explora más en

    • CSS
    • javascript
    • Actuación
    • Animación





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Respetar las preferencias de movimiento de los usuarios

    Respetar las preferencias de movimiento de los usuarios

    ¡Registro! Accesibilidad para diseñadores, con Stéphanie Walter Índice ¿Qué regla?

    programar

    es

    https://aprendeprogramando.es/static/images/programar-respetar-las-preferencias-de-movimiento-de-los-usuarios-1122-0.jpg

    2024-04-04

     

    Respetar las preferencias de movimiento de los usuarios
    Respetar las preferencias de movimiento de los usuarios

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20