Skip to contentSkip to content

🗣️ Easy language · Stand: 27.05.2026  |  ← Normale Sprache

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?

Mechanics module WCAG 2.3.3 Level AAA

Reduced Motion Guard

Respects `prefers-reduced-motion` and stops aggressive animations, auto-plays and parallax.

What it does

Function in one sentence — and in three sentences

For people with migraines, vestibular disorders, or ADHD, aggressive web animations are a real problem. Browsers have offered the CSS media query `prefers-reduced-motion: reduce` since 2018 — but only a few themes implement it correctly.

The Reduced Motion Guard kicks in when the visitor's system requests reduced animations — and then freezes CSS transitions, GIFs and video auto-plays.

This is how the plugin implements it.

Technical measures

  • CSS override: global `animation-duration: 0.01ms` + `transition-duration: 0.01ms` for `prefers-reduced-motion`.
  • Pause animated GIFs: replaces it with a still image (first frame).
  • Pause auto-play videos: stops `
  • Disable parallax scripts: detects popular parallax plugins and disables them.
  • Frontend panel toggleAdditionally, the visitor can activate the module without changing any system settings.
In the plugin backend

You can find these settings in the module tab.

  • Strategy: CSS animations only / + GIFs / + Auto-Play / everything including parallax
  • Frontend panel integration: on/off
  • Exception selectors (e.g., subtle hover effects should remain)
  • Parallax plugin detection: explicit whitelist only / auto-detection

Path in Admin: WP-Admin → Accessibility → Modules → Reduced Motion Guard

When do you need the module?

Use case

Recommended for any page with hero animations, sliders, parallax, or GIFs. Mandatory for government and educational websites (BITV 2.0).

Related modules

That fits together thematically.

  • Visible focus

    WCAG 2.4.11

    Provides a strong, always visible focus ring on all focusable elements — with AAA contrast.

  • ARIA Manager

    WCAG 4.1.2

    Automatically assigns correct ARIA roles, states, and properties to interactive elements.

  • Video caption notice

    WCAG 1.2.2

    It recognizes videos without subtitles and displays an editorial note in the backend.

Activate the module for your site?

In the initial 15-minute consultation, we will clarify whether the module is relevant for your theme and content type — and what the setup looks like.

15-minute initial consultation
View all modules

Normale Sprache