Respektiert `prefers-reduced-motion` und stoppt starke Animationen, Auto-Abspielen und Parallax.
Starke Web-Animationen sind für einige Menschen ein Problem. Zum Beispiel bei Migräne, Gleichgewichtsstörungen oder ADHS. Browser bieten seit 2018 eine Lösung. Diese heißt `prefers-reduced-motion: reduce` in CSS. Doch viele Designs nutzen sie nicht richtig. Der Reduced Motion Guard hilft dabei. Wenn der Besucher weniger Bewegung will, stoppt das System Animationen. Es friert Übergänge, GIFs und Video-Abspielen ein.
Gehe in der Verwaltung zu: WP-Admin → Barrierefreiheit → Module → Reduced Motion Guard
Wir empfehlen das Modul bei Seiten mit großen Animationen und beweglichen Bildern. Behörden- und Bildungsseiten müssen es haben. Das steht in den BITV 2.0-Regeln.
Wir bieten ein kurzes Gespräch an. Es dauert 15 Minuten. Dabei sprechen wir über das Modul. Passt es zu deinem Design? Wie richtet man es ein?
Protector de movimiento reducido
Respeta la opción `prefers-reduced-motion` y detiene las animaciones agresivas, la reproducción automática y el efecto parallax.
Función en una oración — y en tres oraciones
Para las personas con migrañas, trastornos vestibulares o TDAH, las animaciones web agresivas representan un verdadero problema. Los navegadores ofrecen la consulta de medios CSS `prefers-reduced-motion: reduce` desde 2018, pero solo unos pocos temas la implementan correctamente.
La función Reduced Motion Guard se activa cuando el sistema del visitante solicita animaciones reducidas y, a continuación, congela las transiciones CSS, los GIF y la reproducción automática de vídeos.
Medidas técnicas
- Anulación de CSS: global `animation-duration: 0.01ms` + `transition-duration: 0.01ms` para `prefers-reduced-motion`.
- Pausar GIFs animados: lo reemplaza con una imagen fija (primer fotograma).
- Pausar la reproducción automática de videos: se detiene
- Deshabilitar los scripts de paralaje: detecta los plugins de paralaje más populares y los desactiva.
- Alternar panel de interfazAdemás, el visitante puede activar el módulo sin modificar ninguna configuración del sistema.
Puedes encontrar estos ajustes en la pestaña del módulo.
- Estrategia: Animaciones CSS únicamente / + GIFs / + Reproducción automática / todo incluido el efecto parallax
- Integración del panel de interfaz: activado/desactivado
- Selectores de excepción (por ejemplo, los sutiles efectos al pasar el cursor deben mantenerse).
- Detección de complementos de paralaje: solo lista blanca explícita / detección automática
Ruta en el administrador: WP-Admin → Accesibilidad → Módulos → Reduced Motion Guard
Caso de uso
Recomendado para cualquier página con animaciones principales, carruseles, efectos parallax o GIF. Obligatorio para sitios web gubernamentales y educativos (BITV 2.0).
Eso encaja temáticamente.
Enfoque visible
WCAG 2.4.11Proporciona un anillo de enfoque nítido y siempre visible en todos los elementos enfocables, con un contraste AAA.
Gerente de ARIA
WCAG 4.1.2Asigna automáticamente los roles, estados y propiedades ARIA correctos a los elementos interactivos.
Aviso sobre los subtítulos del vídeo
WCAG 1.2.2Reconoce los vídeos sin subtítulos y muestra una nota editorial en el servidor.
¿Activar el módulo para su sitio?
En la consulta inicial de 15 minutos, aclararemos si el módulo es relevante para su tema y tipo de contenido, y cómo es la configuración.
