CSS prefers reduced motion
CSS prefers reduced motion beginnt mit einem Inventar.
Finden Sie Animationen, Transitions und Smooth Scroll. Erzeugen Sie danach eine reduce-Regel, die große Bewegung entfernt und Information erhält.
01 / Bewegungspult
CSS einfügen, Bewegung finden, Reduce-Patch erzeugen.
Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört das Bewegungspult Ihnen.
Bewegungspult
Quelle → Risiko → Ersatz
CSS inventarisieren
Bewegungsinventar
3 Quellen- L2Animationoffen
.hero-orbitanimation: orbit 4s linear infinite - L6Transitionoffen
.product-cardtransition: transform 240ms ease - L14Smooth Scrolloffen
htmlscroll-behavior: smooth
Sicherer Patch
@media (prefers-reduced-motion: reduce) {
.hero-orbit { animation: none; }
.product-card { transition: none; }
html { scroll-behavior: auto; }
}Die echte Systemeinstellung bleibt immer vorrangig.
Drei Bewegungsquellen erkannt.
02 / Der Unterschied
Ein Code-Ausschnitt ist der Anfang, nicht die Website.
Bewegung verteilt sich über die Seite
Animationen, Hover-Transitions und Smooth Scroll stecken in vielen Selektoren und Dateien. Die Reduce-Regel fehlt oft ganz oder deckt nur einen Teil ab – für Menschen mit vestibulären Störungen bleibt jede Lücke ein Risiko.
Der Check prüft die gerenderte Seite
Die Code-Heuristik liest nur eingefügtes CSS. Der Website-Check prüft Bewegung im Seitenkontext und dazu weitere automatisch erkennbare Barrieren Ihrer Seiten.
Fundstellen statt Vermutung
Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos, ohne Installation, bereit für die direkte Behebung.
03 / Auf Ihrer Website
Jetzt die eigene Seite prüfen.
Das Bewegungspult prüft einen Code-Ausschnitt. Der Website-Check prüft Ihre Seiten auf Bewegungsrisiken und weitere automatisch erkennbare Barrieren.
Der Website-Check ist bereit.
- 1URL
- 2Auswahl
- 3Prüfung
- 4Ergebnis