prefers-reduced-motion berücksichtigen
Erkennen Sie die Media Query prefers-reduced-motion und deaktivieren oder reduzieren Sie Animationen für Benutzer, die weniger Bewegung angefordert haben.
prefers-reduced-motion berücksichtigen ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Das Media-Feature prefers-reduced-motion
Bei manchen Menschen können Bewegungen in Benutzeroberflächen Übelkeit, Schwindel oder Krampfanfälle auslösen. Sie stellen ihr Betriebssystem so ein, dass Bewegungen reduziert werden. Das Media-Feature prefers-reduced-motion erkennt diese Einstellung, damit CSS darauf reagieren kann.
Reduzierte Bewegung in CSS erkennen
Schließen Sie Animationen in die umgekehrte Abfrage ein: Wenden Sie Animationen standardmäßig an und überschreiben oder deaktivieren Sie sie anschließend für Benutzer, die weniger Bewegung bevorzugen.
/* Apply animation by default */
.spinner {
animation: spin 1s linear infinite;
}
/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
}Das Prinzip „Reduziert, nicht vollständig entfernen“
prefers-reduced-motion: reduce bedeutet nicht, dass überhaupt keine Bewegung verwendet werden darf. Manche Bewegungen vermitteln wichtige Änderungen des UI-Zustands. Entfernen Sie Animationen daher nicht vollständig, sondern verlangsamen oder vereinfachen Sie sie beispielsweise zu Überblendungen.
@media (prefers-reduced-motion: reduce) {
.modal {
/* Replace scale + fade with just fade */
animation: fadeOnly 0.1s linear;
}
@keyframes fadeOnly {
from { opacity: 0; }
to { opacity: 1; }
}
}Die radikale Option: Alle Animationen deaktivieren
Ein häufig verwendetes Muster besteht darin, für Benutzer mit reduzierter Bewegungspräferenz alle Transitions und Animationen global zu deaktivieren. Das ist eine sichere Grundlage, auch wenn nicht jede Animation individuell angepasst wurde.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Reduzierte Bewegung in JavaScript erkennen
Verwenden Sie die matchMedia-API, um die Einstellung in JavaScript zu erkennen – das ist nützlich, um Canvas-Animationen, per JavaScript gesteuerte Bewegungen oder die automatische Videowiedergabe zu kontrollieren.
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReduced.matches) {
// skip gsap or canvas animations
} else {
startAnimation();
}
// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
if (e.matches) stopAnimations();
else startAnimations();
});Scrollverhalten und automatische Wiedergabe
Deaktivieren Sie für Benutzer mit reduzierter Bewegungspräferenz auch das sanfte Scrollen: scroll-behavior: auto. Beenden Sie die automatische Videowiedergabe. Lassen Sie Inhalte nicht aufblitzen oder flackern.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
// In JS:
if (!prefersReduced.matches) {
element.scrollIntoView({ behavior: 'smooth' });
} else {
element.scrollIntoView(); // instant
}WCAG 2.3.3 — Animationen durch Interaktionen
WCAG 2.3.3 (Level AAA) verlangt, dass durch Benutzerinteraktionen ausgelöste Bewegungen deaktiviert werden können. Indem Sie prefers-reduced-motion berücksichtigen, erfüllen Sie dieses Kriterium und verbessern die Barrierefreiheit für Menschen mit vestibulären Erkrankungen.
Reduzierte Bewegung testen
Öffnen Sie in den Chrome DevTools das Rendering-Panel (Dreipunktmenü → Weitere Tools → Rendering) und aktivieren Sie „CSS-Media-Feature prefers-reduced-motion emulieren“. Testen Sie Ihre Benutzeroberfläche in diesem Modus, bevor Sie sie veröffentlichen.
Praxis: Sicheres Animationsmuster
Eine bewegungssichere Animation wird standardmäßig angewendet und so eingebunden, dass sie sich einfach global deaktivieren lässt.
@keyframes slideIn {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
.alert {
animation: slideIn 0.3s ease;
}
}Fokusanimationen sollten erhalten bleiben
Fokusindikatoren (der Ring, der anzeigt, welches Element fokussiert ist) sollten auch für Benutzer mit reduzierter Bewegungspräferenz NICHT entfernt werden. Sie sind für die Tastaturnavigation unerlässlich und lösen normalerweise keine vestibulären Beschwerden aus.
Bibliotheken und prefers-reduced-motion
Beliebte Animationsbibliotheken (Framer Motion, GSAP, Anime.js) bieten integrierte Unterstützung für reduzierte Bewegung. Der Hook useReducedMotion() von Framer Motion erleichtert es, komplexe Animationen in React bedingt zu deaktivieren.
Kurzer Test
Welches CSS-Media-Feature erkennt die Präferenz eines Benutzers, weniger Bewegung in der Benutzeroberfläche zu sehen?
Zusammenfassung: prefers-reduced-motion
Manche Benutzer benötigen aus Gründen der vestibulären oder neurologischen Gesundheit weniger Bewegung. Verwenden Sie @media (prefers-reduced-motion: reduce), um Animationen zu deaktivieren oder zu vereinfachen. Erkennen Sie die Einstellung in JS mit matchMedia. Die radikale Option: Setzen Sie animation/transition-duration global auf 0.01ms. WCAG 2.3.3 empfiehlt dies. Testen Sie mit dem Rendering-Panel der DevTools.
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
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „prefers-reduced-motion berücksichtigen“ kostenlos?
Ja — der vollständige Text von „prefers-reduced-motion berücksichtigen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „prefers-reduced-motion berücksichtigen“?
Erkennen Sie die Media Query prefers-reduced-motion und deaktivieren oder reduzieren Sie Animationen für Benutzer, die weniger Bewegung angefordert haben. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 4 von 4.
Wie lange dauert die Lektion „prefers-reduced-motion berücksichtigen“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- CSS Custom Properties: deklarieren und aktualisieren
- Transitions: Eigenschaft, Dauer, Timing
- @keyframes-Animationen
- prefers-reduced-motion berücksichtigen