🗣️ Leichte Sprache · 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?

Mechanik-Modul · WCAG 2.3.3 · Stufe AAA

Reduced Motion Guard

Respektiert `prefers-reduced-motion` und stoppt aggressive Animationen, Auto-Plays und Parallax.

Was es macht

Funktion in einem Satz — und in 3 Sätzen

Für Menschen mit Migräne, Vestibularstörungen oder ADHS sind aggressive Web-Animationen ein echtes Problem. Browser bieten seit 2018 die CSS-Media-Query `prefers-reduced-motion: reduce` — aber nur wenige Themes setzen sie korrekt um.

Der Reduced Motion Guard greift, wenn das System des Besuchers reduzierte Animationen wünscht — und friert dann CSS-Transitions, GIFs und Video-Auto-Plays ein.

So implementiert das Plugin es

Technische Maßnahmen

CSS-Override: globales `animation-duration: 0.01ms` + `transition-duration: 0.01ms` bei `prefers-reduced-motion`.
Animated GIFs anhalten: ersetzt sie durch ein Standbild (erstes Frame).
Auto-Play-Videos pausieren: stoppt `
Parallax-Scripts deaktivieren: erkennt populäre Parallax-Plugins und schaltet sie aus.
Frontend-Panel-Toggle: zusätzlich kann der Besucher das Modul ohne System-Einstellung aktivieren.

Im Plugin-Backend

Diese Einstellungen findest du im Modul-Tab

Strategie: nur CSS-Animationen / + GIFs / + Auto-Play / alles inkl. Parallax
Frontend-Panel-Integration: an / aus
Ausnahme-Selektoren (z. B. dezente Hover-Effekte sollen bleiben)
Parallax-Plugin-Detection: nur explizite Whitelist / Auto-Detection

Pfad im Admin: WP-Admin → Barrierefreiheit → Module → Reduced Motion Guard

Wann brauchst du das Modul?

Anwendungsfall

Empfohlen für jede Seite mit Hero-Animationen, Slidern, Parallax oder GIFs. Pflicht für Behörden- und Bildungssites (BITV 2.0).

Verwandte Module

Das passt thematisch zusammen

Sichtbarer Fokus
WCAG 2.4.11
Sorgt für einen kräftigen, immer sichtbaren Fokus-Ring auf allen fokussierbaren Elementen — mit AAA-Kontrast.
ARIA Manager
WCAG 4.1.2
Vergibt automatisch korrekte ARIA-Roles, States und Properties auf interaktive Elemente.
Video-Caption-Hinweis
WCAG 1.2.2
Erkennt Videos ohne Untertitel und blendet Redaktions-Hinweis im Backend ein.

Modul für deine Seite aktivieren?

Im 15-Minuten-Erstgespräch klären wir, ob das Modul für deinen Theme- und Inhalts-Typ relevant ist — und wie die Einrichtung aussieht.

15-Min-Erstgespräch
Alle Module ansehen