Diseño · Guía práctica
Cómo abrir un menú sin deslizamiento cuando el usuario pide reducir el movimiento
La consulta CSS detecta la preferencia. El menú puede seguir abriendo, cerrando y mostrando su estado sin una transición de posición.
La consulta prefers-reduced-motion permite a una hoja de estilos adaptar su presentación a la preferencia de reducir movimiento. En la sección 12.1 de Media Queries Level 5, el W3C distingue reduce y no-preference. La consulta ofrece una condición para aplicar estilos: las declaraciones que quitan el desplazamiento siguen siendo responsabilidad de quien mantiene la página.
Ejemplo editorial ficticio: un menú lateral se desliza durante 250 milisegundos cuando se abre. La regla para la preferencia reduce puede fijar transition: none en el panel. La declaración de posición del estado abierto se conserva, de modo que el panel aparece en su destino sin recorrer la pantalla. El ejemplo supone que el desplazamiento usa una transición CSS en ese panel.
Conviene comprobar dos cosas por separado. Primero, al activar el botón, el contenido se muestra y el estado del control pasa a expandido. Después, al desactivar el botón, el contenido se oculta y el estado vuelve a contraído. Estas comprobaciones deben dar el mismo resultado con ambas preferencias de movimiento. La diferencia buscada está en cómo se llega al estado, no en qué enlaces quedan disponibles.
Si el código espera un evento de fin de transición para ocultar el panel o liberar el foco, quitar la transición puede dejar esa tarea pendiente. Revisa ese camino en la implementación real: la lógica que completa el cierre debe funcionar también cuando no se ejecuta la animación. Comprueba además que el foco siga una ruta predecible con teclado.
Una forma de documentar la comprobación es anotar la preferencia, la acción de abrir o cerrar, el estado anunciado y la posición final. Compara esos datos antes de dar por buena la adaptación. La ficha describe un ejercicio propuesto, no una prueba ejecutada sobre un navegador o una certificación de accesibilidad.
Comprobación práctica
- Conserva la acción de abrir
- Quita el deslizamiento decorativo
- Comprueba estado y foco
- Verifica también el cierre