prefers-reduced-motion in CSS und JS
Erkennen und respektieren Sie die Bewegungseinstellung der nutzenden Person.
prefers-reduced-motion in CSS und JS ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Eine Einstellung, die Sie auslesen können
Betriebssysteme ermöglichen es Menschen, weniger Bewegung anzufordern. Die Media-Feature prefers-reduced-motion stellt diese Auswahl Ihrer Website direkt zur Verfügung. 🎚️
Wo Nutzerinnen und Nutzer die Einstellung aktivieren
Menschen aktivieren reduce motion in den Systemeinstellungen von macOS, iOS, Windows und Android. Ihre Aufgabe ist es, darauf zu reagieren, nicht die Entscheidung infrage zu stellen.
Zwei Werte
Das Feature meldet einen von zwei Zuständen. Entweder lautet der Wert reduce, also Animationen sollen ruhiger werden, oder no-preference für alle anderen.
In CSS abfragen
Umschließen Sie beruhigende Styles mit einer Media Query. Wenn jemand reduce motion anfordert, können Sie Übergänge auf ein Minimum reduzieren.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}Reduzieren, nicht immer entfernen
Bewegung zu beruhigen bedeutet nicht, eine eingefrorene Seite zu schaffen. Ersetzen Sie eine große Verschiebung durch ein sanftes fade, damit die Oberfläche lebendig bleibt, aber niemals ruckartig wirkt.
Motion-On zuerst gestalten
Erstellen Sie zunächst Ihre normalen animierten Styles und fügen Sie dann die Abfrage hinzu, um sie zurückzunehmen. Dieser progressive Ansatz hält das Standarderlebnis ansprechend.
In JavaScript auslesen
Bei skriptgesteuerten Animationen fragen Sie den Browser direkt. matchMedia gibt zurück, ob die Person momentan reduzierte Bewegung bevorzugt.
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) { /* skip the big animation */ }Auf Änderungen in Echtzeit reagieren
Menschen können die Einstellung während einer Sitzung ändern. Lauschen Sie auf Änderungen, damit Ihre JavaScript-Animationen die neue Präferenz ohne Neuladen berücksichtigen.
mq.addEventListener('change', e => updateMotion(e.matches));Scrollverhalten berücksichtigen
Auch flüssiges Scrollen zählt als Bewegung. Setzen Sie innerhalb der Abfrage scroll-behavior auf auto, damit Sprünge für diese Nutzerinnen und Nutzer sofort erfolgen.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}Ein echtes Bedürfnis
Das ist keine optionale Komfortfunktion. Für manche Menschen verursachen starke Bewegungen echte Übelkeit oder Schwindel. Deshalb ist es wichtig, diesen Wunsch zu respektieren.
Standardmäßig deaktiviert ist am sichersten
Wenn Sie unsicher sind, wählen Sie standardmäßig den sichersten Weg. Eine Ausrichtung auf ruhige Bewegung schadet niemandem und macht die Seite für alle angenehmer.
Kurztest
Wie erfährt eine Website, dass jemand weniger Bewegung wünscht?
Zusammenfassung
Lesen Sie prefers-reduced-motion in CSS oder mit matchMedia aus und beruhigen Sie anschließend die Animationen, statt die Seite vollständig zu deaktivieren. Berücksichtigen Sie auch Änderungen während der Nutzung. ✅
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „prefers-reduced-motion in CSS und JS“ kostenlos?
Ja — der vollständige Text von „prefers-reduced-motion in CSS und JS“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „prefers-reduced-motion in CSS und JS“?
Erkennen und respektieren Sie die Bewegungseinstellung der nutzenden Person. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „prefers-reduced-motion in CSS und JS“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- prefers-reduced-motion in CSS und JS
- Vestibuläre Erkrankungen und Parallax-Risiken
- Der Drei-Blitze-Schwellenwert für Krampfanfälle
- Pause, Stoppen, Ausblenden bei automatisch bewegten Inhalten