CSS prefers-reduced-motion
Bewegung anhalten, Inhalt behalten
Laufschriften, Karussells, Übergänge: hier wirkt die Systemeinstellung zuerst.
Bewegung übersetzen
Die Information bleibt. Nur der Weg verschwindet.
prefers-reduced-motion ist kein pauschaler Ausschalter. Gestalten Sie für jeden bewegten Zustand eine ruhige, gleichwertige Darstellung.
reduce trifft zureduceKarussell
Die Auswahl bleibt erreichbar. Nur automatisches Weiterschalten entfällt.
Bewegter Weg
Wechsel: 1 → 2 → 3läuft automatisch
Ruhiger Zustand
Folie 2 von 3bleibt stehen
Ansichtswechsel
Der Zielzustand erscheint sofort, ohne Schieben, Zoomen oder Parallaxe.
Bewegter Weg
Alt gleitet ausNeu gleitet ein
Ruhiger Zustand
Neue Ansichterscheint direkt
Fortschritt
Eine klare Statuszeile trägt die Bedeutung, auch wenn kein Symbol kreist.
Bewegter Weg
Bericht wird erstelltKreissymbol rotiert
Ruhiger Zustand
Prüfung läuftGeladen ✓ · Bericht folgt
Drei Fragen vor jeder Korrektur
Robustes Muster
Erst den ruhigen Zustand bauen
So bleibt die Oberfläche ohne Bewegung vollständig. Die Animation kommt nur hinzu, wenn keine Präferenz geäußert wurde. JavaScript-Autoplay prüft denselben Systemwert.
.karte {
transition: none;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
.karte {
transition: transform 400ms ease;
}
}const motion = matchMedia(
'(prefers-reduced-motion: reduce)'
);
let timer;
function syncAutoplay() {
clearInterval(timer);
timer = motion.matches
? undefined
: setInterval(nextSlide, 5000);
}
motion.addEventListener('change', syncAutoplay);
syncAutoplay();So prüfen Sie es
Beide Darstellungen müssen dieselbe Aufgabe lösen
- Öffnen Sie in Chrome DevTools den Bereich „Rendering“ und wählen Sie bei
prefers-reduced-motionden Wertreduce. - Lösen Sie jeden Ansichtswechsel aus. Nichts darf über die Fläche fahren, skalieren oder automatisch weiterschalten.
- Prüfen Sie die Aussage: Auswahl, Status, Fortschritt und Bedienmöglichkeit müssen ohne Bewegung erhalten bleiben.
Aus dem Prüfbericht
Eine Regel, eine wandernde Zeile
Kritisch Die Meldung wandert durch die Zeile Regel marquee
Das marquee-Element bewegt Text ohne Halt und ohne Rücksicht auf die Systemeinstellung. Ein statischer Textblock zeigt denselben Satz an fester Stelle.
Zum Mitnehmen
Die Bewegung, korrigiert
Ein Element ersetzt, ein Medienblock ergänzt.
Korrektur in 3 Schritten ansehen
Die Laufschrift durch Text ersetzen
marquee ist veraltet und lässt sich nicht anhalten. Derselbe Satz in einem Textblock bleibt an seinem Platz lesbar.
KorrekturvergleichSchritt 1 · HTML Vorher
<marquee>Messpunkt nähert sich der Geraden</marquee>Nachher
<div class="meldung"> Messpunkt nähert sich der Geraden </div>Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Seite neu. Der Satz steht still und ist vollständig zu lesen.
Übergänge bei reduzierter Bewegung abschalten
Wer weniger Bewegung eingestellt hat, bekommt den Wechsel ohne Animation. Der Zustand ändert sich weiterhin, nur ohne den Weg dorthin.
KorrekturvergleichSchritt 2 · CSS Vorher
.karte { transition: transform 400ms ease; }Nachher
.karte { transition: transform 400ms ease; } @media (prefers-reduced-motion: reduce) { .karte { transition-duration: 1ms; } }Markierte Zeilen wurden geändert
So prüfen Sie es Stellen Sie im System weniger Bewegung ein. Die Karte springt in ihren neuen Zustand.
Das Karussell nicht selbst starten
Ein automatisch laufendes Karussell startet nur ohne eingestellte Bewegungsreduktion. Die Folien bleiben über die Schaltflächen erreichbar.
KorrekturvergleichSchritt 3 · JavaScript Vorher
setInterval(naechsteFolie, 5000);Nachher
const ruhig = matchMedia('(prefers-reduced-motion: reduce)'); if (!ruhig.matches) setInterval(naechsteFolie, 5000);Markierte Zeilen wurden geändert
So prüfen Sie es Stellen Sie weniger Bewegung ein und laden Sie neu. Das Karussell bleibt auf der ersten Folie.