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 66,3% mit einem Loop, den man nicht pausieren kann (WCAG 2.2.2, Level A), und 96,9% ohne reduced‑motion‑Guard. Das ist das Tool, das dir sagt, ob deine dazugehört — und wie du es behebst.
Zur Einordnung: MotionSpec verifiziert und kompiliert UI-Animation in KI-generierten Web-Apps — es erzeugt kein KI-Video.
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.
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.
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.
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.
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. Menschlich geprüft, zitiert und gegen 196 KI‑gebaute Seiten benchmarked? Der 29‑€‑Motion‑Report ist innerhalb von 14 Tagen erstattbar, ohne Nachfragen.
Eine Erkennungs‑Prüfung — wir finden und zeigen die Probleme; wir versprechen nicht, deine Seite konform zu machen. Wie der Check funktioniert →
Wie verbreitet ist still‑kaputte Motion wirklich?
In einer 196‑App‑Studie, die MotionSpec am 16.07.2026 veröffentlicht hat, lieferten 66,3% der KI‑generierten Produktiv‑Apps einen Loop, den man nicht pausieren kann (WCAG 2.2.2, Level A), und 96,9% lieferten Motion ohne reduced‑motion‑Guard (WCAG 2.3.3 — eine Best‑Practice‑Lücke, nie ein A/AA‑Verstoß). Nur 3,1% kamen sauber zurück, also ist die Wahrscheinlichkeit hoch, dass deine Seite etwas hat, das sich zu beheben lohnt.
liefen mit einem Loop ohne Pausier‑Möglichkeit (WCAG 2.2.2 Pause, Stopp, Ausblenden · Level A)
lieferten Motion ohne reduced‑motion‑Guard (WCAG 2.3.3 — eine Best‑Practice‑Lücke, kein A/AA‑Verstoß)
Median distinkter Motion‑Ursachen pro App
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 → (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“.
Was bekommst du konkret — messbar?
MotionSpec macht aus „ist meine Motion OK?“ drei Zahlen, die du auf deiner eigenen Seite prüfen kannst.
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.
Seiten ohne „Reduce‑Motion“‑Fallback → deine abgedeckt
96,9% der von uns gemessenen Seiten 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.
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.
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
Beliebige URL scannen, alle Fixes bekommen. Keine Anmeldung, nichts wird gespeichert. Jetzt ausführen → (englisch)
npm + kostenloses MCP
Aus 40 verifizierten Primitiven komponieren oder das schlüssellose motion_validate‑Tool in deinen KI‑Coding‑Agent einbinden. Verbinden → (englisch)
Motion‑Report
Eine URL, menschlich geprüft, WCAG‑belegt, dein Perzentil vs. die 196‑Seiten‑Studie. PDF in ≤1 Werktag — innerhalb von 14 Tagen erstattbar, ohne Nachfragen. Report holen →
Dev Key
Schlüsselgebundenes MCP + API: kompilieren, auditieren und signierte Zertifikate in CI. Jederzeit kündbar. Schlüssel holen →
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 (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 96,9% ein reduced‑motion‑Guard (2.3.3), aber 66,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.
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.
Kundenseiten ausliefern? Für Agenturen → · Baust du eine Plattform? Für Plattformen → · EAA‑betroffen? Für Enterprise →