# Für Entwickler

Canonical: https://motionspec.dev/de/for/developers

Barrierefreie Motion für Entwickler — MotionSpec

MotionSpec
← motionspec.dev

Lösungen · Demos · Programm · Preise · MCP testen · Guides · Motion reduzieren · GitHub · EN / DE

Für Entwickler & Vibe-Coder · kostenloser Motion-Check

## Barrierefreie CSS-Animation, ohne Rätselraten.

Füge deine URL ein und MotionSpec zeigt dir jede CSS-Animation, die still die Motion-Barrierefreiheit bricht — geprüft gegen WCAG 2.2.2 (Pause, Stopp, Ausblenden) und WCAG 2.3.3 — jede mit dem exakten Fix. Kostenlos, keine Anmeldung, nichts wird gespeichert.

Von 196 KI-gebauten Apps, die wir am 16.07.2026 gemessen haben, liefen 61,3 % der 124 distinkten Motion-Signaturen mit einem Loop, den man nicht pausieren kann (WCAG 2.2.2, Level A), und 99,2 % ohne reduced-motion-Guard. Das ist das Tool, das dir sagt, ob deine dazugehört — und wie du es behebst.

Kostenlosen Motion-Check starten (https://motionspec.dev/motion-check) (englisch) · Kostenloses MCP testen → (https://motionspec.dev/docs) (englisch) · 29-$-Report ansehen (https://motionspec.dev/de/pricing#p-report)

npm motionspec v1.2.7 · 40 geprüfte Primitive · 295 automatisierte Tests · MIT-Core

Zur Einordnung: MotionSpec prüft und kompiliert UI-Animation in KI-generierten Web-Apps — es erzeugt kein KI-Video.

Das Problem, für dich

## Deine Animationen sehen super aus — warum sollten sie einen Barrierefreiheits-Check reißen?

Motion-Slop ist Animation, die von Haus aus kaputt ausgeliefert wird — kein prefers-reduced-motion-Guard oder ein endloser Loop ohne Pausier-Möglichkeit — und für einen Besucher mit vestibulärer Störung kann das echte Übelkeit, Schwindel oder Migräne bedeuten, nicht nur eine Design-Kleinigkeit. Der Level-A-Fehler, den ein Prüfer tatsächlich aufschreibt, ist WCAG 2.2.2 (Pause, Stopp, Ausblenden): Motion, die von selbst startet, länger als fünf Sekunden läuft und loopt, ohne Kontrolle, sie zu stoppen.

„Keine Zeit — ich füge einfach eine Media Query hinzu" ist der richtige Instinkt. Aber in einem @media (prefers-reduced-motion: reduce)-Block übersieht man leicht ein Keyframe, und gegen diesen nicht-pausierbaren Loop tut er gar nichts. Du kannst nicht per Augenmaß sehen, welche deiner @keyframes und transitions tatsächlich abgedeckt sind. Ein Scan kann das — in etwa zehn Sekunden.

```
/* motion slop — wird von Haus aus ausgeliefert, ignoriert den Besucher */
.hero { animation: float 3s ease-in-out infinite; }      /* keine Pausier-Kontrolle → WCAG 2.2.2, Level A */
@keyframes float { to { transform: translateY(-12px) } }  /* kein reduced-motion-Guard → WCAG 2.3.3 */
```

Was du bekommst · kostenloser Motion-Check

## Was genau fängt der kostenlose Check ab?

Der kostenlose Motion-Check ist ein statischer Scan des verlinkten CSS und der <style>-Blöcke einer beliebigen URL gegen WCAG 2.2.2 (Pause, Stopp, Ausblenden) und WCAG 2.3.3 (Animation aus Interaktionen) und gibt jede erkannte CSS-Motion-Schwachstelle mit einem Copy-Paste-Fix zurück. Es ist dieselbe MIT-Engine, die MotionSpec betreibt — kein Mock.

### 1 · Einfügen — Beliebige URL einfügen
Keine Anmeldung, nichts wird gespeichert. Wir holen das verlinkte CSS und inline <style> der Seite und scannen es statisch — Sekunden, kein Crawl.

### 2 · Sehen — Funde nach Ursache gruppiert
Jede Schwachstelle wird WCAG 2.2.2 oder 2.3.3 zugeordnet und nach der gebrochenen Regel gruppiert, damit du die Ursache einmal behebst, statt Dutzenden Selektoren hinterherzujagen.

### 3 · Beheben — Das exakte CSS kopieren
Jeder Fund kommt mit einem Copy-Paste-Fix — meist der fehlende @media (prefers-reduced-motion: reduce)-Guard oder ein Pause-Hook. Dann npm i motionspec, damit neue Motion sauber bleibt.

Statischer Scan von verlinktem CSS + <style>, sonst nichts. Kein vollständiges Barrierefreiheits-Audit, kein Konformitäts-Urteil; Laufzeit-JS/GSAP-Motion ist nicht abgedeckt. Es wird nichts gespeichert.

**Sieh jede Motion-Schwachstelle, die wir in deinem CSS finden — kostenlos.**

Der kostenlose Motion-Check scannt dein verlinktes CSS gegen WCAG 2.2.2 (Pause, Stopp, Ausblenden — Stufe A) und WCAG 2.3.3 und zeigt jede erkannte CSS-Motion-Schwachstelle mit dem Fix. Datiert, zitiert und gegen 196 KI-gebaute Seiten benchmarked? Der 29-$-Motion-Report ist innerhalb von 14 Tagen erstattbar, ohne Nachfragen.

Kostenlosen Motion-Check starten (https://motionspec.dev/motion-check) (englisch) · 29-$-Motion-Report holen (https://motionspec.dev/de/pricing#p-report)

Eine Erkennungs-Prüfung — wir finden und zeigen die Probleme; wir versprechen nicht, deine Seite konform zu machen. Währung wird an der Kasse angezeigt Wie der Check funktioniert: https://motionspec.dev/guarantee (englisch)

Beleg · die 196-Seiten-Studie

## Wie verbreitet ist still-kaputte Motion wirklich?

In einer 196-App-Studie, die MotionSpec am 16.07.2026 veröffentlicht hat, lieferten 61,3 % der distinkten Motion-Signaturen einen Loop, den man nicht pausieren kann (WCAG 2.2.2, Level A), und 99,2 % der 124 distinkten Motion-Signaturen lieferten Motion ohne reduced-motion-Guard (WCAG 2.3.3 — eine Best-Practice-Lücke, nie ein A/AA-Verstoß). Nur 0,8 % kamen sauber zurück, also ist die Wahrscheinlichkeit hoch, dass deine Seite etwas hat, das sich zu beheben lohnt.

- 61,3 % der 124 distinkten Motion-Signaturen — liefen mit einem Loop ohne Pausier-Möglichkeit (WCAG 2.2.2 Pause, Stopp, Ausblenden · Level A)
- 99,2 % der 124 distinkten Motion-Signaturen — lieferten Motion ohne reduced-motion-Guard (WCAG 2.3.3 — eine Best-Practice-Lücke, kein A/AA-Verstoß)
- 17 — Median distinkter Motion-Ursachen pro App
- 0,8 % der 124 distinkten Motion-Signaturen — kamen sauber zurück

Wir bauen das Tool, das das behebt — also haben wir Methode und Rohdaten veröffentlicht. Prüf unsere Arbeit nach. Studie & offenen Datensatz lesen: https://motionspec.dev/blog/state-of-motion-ai-generated-uis (englisch)

Ehrlicher Umfang: Ein statischer Scan ist eine Untergrenze — er liest dein CSS, nicht Laufzeit-JS oder GSAP. Wir sagen, die Motion, die wir kompilieren, ist „reduced-motion-sicher per Konstruktion", nie „garantiert barrierefrei".

Der Nutzen, gemessen

## Was bekommst du konkret — messbar?

MotionSpec macht aus „ist meine Motion OK?" drei Zahlen, die du auf deiner eigenen Seite prüfen kannst.

- 17 — Probleme auf der typischen Seite — deine siehst du kostenlos in ~10 Sek. Füge eine beliebige URL ein: eine Anzahl der Motion-Probleme, jedes mit einem Copy-Paste-Fix, und wo du im Vergleich zu den 196 echten Seiten stehst, die wir gemessen haben. Keine Anmeldung — auf deiner eigenen Seite sofort nachprüfbar.
- 99,2 % → 0 — Seiten ohne „Reduce-Motion"-Fallback → deine abgedeckt. 99,2 % der 124 von uns gemessenen Motion-Signaturen liefern Animation ohne Fallback für Menschen, die ihr Gerät auf „Motion reduzieren" gestellt haben. MotionSpec gibt jeder Animation diesen ruhigen Fallback — damit du diese Besucher nicht mehr abweist.
- 1,8s → 1,0s — leichtere, schnellere Seiten — ein gemessener Pilot. die schwere, dauerlaufende Motion, die wir markieren, ist genau das, was Seiten ruckeln und Akku leeren lässt — sie zu beheben ist zwei-für-eins: barrierefreier UND leichter. In unserem ersten echten Deployment erschien der Hauptinhalt in ~1,0s statt 1,8s, Score 71→90.

Du musst uns kein Wort glauben — Methode und Rohdaten hinter den ersten beiden Zahlen liegen komplett offen, prüf sie selbst nach. Die Speed-Zahlen stammen aus einem gemessenen Deployment als Beispiel — kein Versprechen.

Dein nächster Schritt

## Was ist der schnellste Weg, es tatsächlich zu beheben?

Kostenlos starten: die URL scannen, die Fixes kopieren und npm i motionspec, damit neue Animation per Konstruktion reduced-motion-sicher ist. Wenn du es schriftlich brauchst — für einen Kunden, einen Chef oder ein Audit — sind die bezahlten Schritte richtig dimensioniert und reversibel, nie ein Compliance-Versprechen.

- Kostenloser Motion-Check (0 $) — beliebige URL scannen, alle Fixes bekommen. Keine Anmeldung, nichts wird gespeichert. Jetzt ausführen: https://motionspec.dev/motion-check (englisch)
- npm + kostenloses MCP (Kostenlos · MIT) — aus 40 kuratierten Primitiven komponieren oder das schlüssellose motion_validate-Tool in deinen KI-Coding-Agent einbinden. Verbinden: https://motionspec.dev/docs (englisch)
- Motion-Report (29 $ einmalig) — eine URL, WCAG-belegt, wo dein Score unter den 196 Seiten der Studie liegt. sofort im Browser abrufbar — innerhalb von 14 Tagen erstattbar, ohne Nachfragen. Report holen: https://motionspec.dev/de/pricing#p-report
- Dev Key (39 $ / Monat) — schlüsselgebundenes MCP + API: kompilieren, auditieren und /certify-Signatur für MotionSpec-Spec-Dokumente in CI. Jederzeit kündbar. Status: https://motionspec.dev/de/pricing#self-serve

Alle Preise ansehen: https://motionspec.dev/de/pricing

FAQ

## Entwickler-Fragen zu barrierefreier Motion.

Wie teste ich prefers-reduced-motion?
Du kannst prefers-reduced-motion auf drei Arten testen: „Bewegung reduzieren" in den Barrierefreiheits-Einstellungen deines Betriebssystems umschalten, prefers-reduced-motion: reduce im Rendering-Panel deiner Browser-DevTools emulieren, oder deine URL in MotionSpecs kostenlosen Motion-Check einfügen, der jede @keyframes und transition markiert, die nicht in einem @media (prefers-reduced-motion: reduce)-Guard steckt, und den Fix zeigt.
Ausführen: motionspec.dev/motion-check (englisch) · Hintergrund: der prefers-reduced-motion-Guide (https://motionspec.dev/blog/prefers-reduced-motion) (englisch)

Wie füge ich GSAP reduzierte Bewegung hinzu?
GSAP-Animationen laufen in JavaScript, daher kann ein statischer CSS-Scan — auch MotionSpecs kostenloser Check — sie nicht sehen. Um sie reduced-motion-sicher zu machen, koppel sie an die Präferenz des Nutzers: GSAPs gsap.matchMedia() erlaubt es, einen „(prefers-reduced-motion: reduce)"-Kontext zu registrieren, der eine ruhigere Variante ausführt — oder keine —, sodass die Animation die OS-Einstellung des Besuchers respektiert.

Ist ein fehlendes prefers-reduced-motion ein WCAG-Verstoß?
Nein. Ein fehlender prefers-reduced-motion-Guard entspricht WCAG 2.3.3 Animation aus Interaktionen, einem Best-Practice-Kriterium (AAA-Umfang) — kein A- oder AA-Verstoß. Der Level-A-Fehler, auf den es ankommt, ist WCAG 2.2.2 Pause, Stopp, Ausblenden: Motion, die automatisch startet, länger als fünf Sekunden läuft und loopt, ohne Möglichkeit, sie zu pausieren, zu stoppen oder auszublenden. In unserer 196-App-Studie fehlte 99,2 % der 124 distinkten Motion-Signaturen ein reduced-motion-Guard (2.3.3), aber 61,3 % lieferten diesen nicht-pausierbaren Loop (2.2.2, Level A).

Was deckt der kostenlose Check ab?
Der kostenlose Motion-Check scannt das verlinkte CSS und die inline <style>-Blöcke einer Seite statisch gegen WCAG 2.2.2 (Pause, Stopp, Ausblenden) und WCAG 2.3.3 (Animation aus Interaktionen) und zeigt jeden Fund mit einem Copy-Paste-Fix. Es ist kein vollständiges Barrierefreiheits-Audit und kein Konformitäts-Urteil; Laufzeit-JS- und GSAP-Motion sind nicht abgedeckt, und nichts, was du übermittelst, wird gespeichert.

Hier starten

## Scanne deine Seite kostenlos.

Füge deine URL ein, sieh jede erkannte CSS-Motion-Schwachstelle mit ihrem Fix und kopier, was du brauchst — keine Anmeldung, nichts wird gespeichert.

Kostenlosen Motion-Check starten (https://motionspec.dev/motion-check) (englisch) · Kostenloses MCP testen → (https://motionspec.dev/docs) (englisch)

Kundenseiten ausliefern? Baust du eine Plattform? EAA-betroffen? — alle Rollen ansehen: https://motionspec.dev/de/#de-roles

MotionSpec — ein Open-Core-Motion-Trust-Layer.
Beispielreport ansehen → https://motionspec.dev/report-example (Markdown: https://motionspec.dev/md/report-example.md) — ein vollständiger Bericht aus einem echten Scan unserer eigenen Demo-Seite /before-after, kein Nachbau. Der Bericht ist englisch.

Für Barrierefreiheits-Prüfer und Beratende → https://motionspec.dev/de/for/auditors (Markdown: https://motionspec.dev/md/for/auditors.de.md)

hello@motionspec.dev npm Motion-Check Vorher/nachher Playground Guides FAQ About Docs Privacy Preise AGB Verträge hier kündigen Impressum Datenschutz

Gebaut von Fröba Sales Solutions UG (haftungsbeschränkt), Kronach, Deutschland. MotionSpec erzwingt reduced-motion-Sicherheit und ein Performance-Budget für die Motion, die es kompiliert; es ist keine allgemeine Barrierefreiheits-Garantie und beansprucht keine Konformität mit einem bestimmten Barrierefreiheits-Gesetz. Die kostenlose Prüfung deckt nur bestimmte Motion-Kriterien ab. Performance-Zahlen stammen aus einem Pilot-Einsatz unter den genannten Bedingungen. MotionSpec™ — EUIPO-Markenanmeldung anhängig. © 2026 Fröba Sales Solutions UG (haftungsbeschränkt).