prefers reduced motion CSS

`prefers reduced motion CSS`: erst still, dann bewegt.

Das Labor findet CSS-Bewegung, gewichtet ihr Risiko und baut sie nur für Menschen ein, die keine Reduktion angefordert haben.

01 / Motion-Labor

CSS einfügen, Risiko und sichere Variante sofort sehen.

Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört das Labor Ihnen.

Motion Flight Recorder

Quelle → Belastung → sicherer Standard

Inventar

3 offen

7 RP

.hero__planetanimation: orbit 6s linear infinite

Progressive CSS

Still ist der Standard

System: unbekannt

.hero__planet {
  animation: none;
}

.card {
  transition: none;
}

html {
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__planet {
    animation: orbit 6s linear infinite
  }
  .card {
    transition: transform 260ms ease
  }
  html {
    scroll-behavior: smooth
  }
}

reduce

02 / Der Unterschied

Ein Stylesheet ist der Anfang, nicht die Website.

Bewegung kommt nicht nur aus CSS
Karussells, Autoplay-Videos und Parallax-Effekte per JavaScript lösen denselben Schwindel aus, stehen aber in keinem Stylesheet. Das Labor sieht nur die CSS-Hälfte.
Der Check sieht die gerenderte Seite
Der Website-Check prüft Ihre veröffentlichten Seiten im Kontext und findet automatisch erkennbare Barrieren – von Bewegung ohne Stopp-Steuerung bis zu fehlenden Alt-Texten.
Fundstellen statt Muster
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 Labor prüft CSS-Muster. Der Website-Check sucht auf Ihren Seiten nach Bewegung ohne Ausstieg und weiteren automatisch erkennbaren Barrieren.

1URL
2Auswahl
3Prüfung
4Ergebnis

Bewegung kommt nicht nur aus CSS

Der Check sieht die gerenderte Seite

Fundstellen statt Muster