Barrierefreie Animationen mit prefers-reduced-motion
Berücksichtigen Sie die Anforderungen an Barrierefreiheit, indem Sie Animationen für bewegungsempfindliche Personen deaktivieren oder reduzieren.
Barrierefreie Animationen mit prefers-reduced-motion ist eine kostenlose CSS 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 CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Bewegungen reduzieren?
Manche Menschen haben vestibuläre Störungen, Epilepsie oder andere Erkrankungen, durch die Animationen schädlich sein können. CSS stellt die Media Query prefers-reduced-motion bereit, um die Systemeinstellung zu erkennen und zu berücksichtigen.
Die Query prefers-reduced-motion
Query-Werte:
no-preference— die Person hat keine Präferenz angegebenreduce— die Person hat in den Betriebssystemeinstellungen reduzierte Bewegungen aktiviert
<div class="box"></div>
Die radikale Lösung (nicht empfohlen)
Eine verbreitete, aber grobe Umsetzung, die alle Animationen deaktiviert. Dadurch werden auch nützliche, nicht desorientierende Bewegungshinweise entfernt:
<div class="box"></div>
Besser: Bewegungen gezielt aktivieren
Ein sichereres Muster: Definieren Sie Animationen nur für Personen ohne Bewegungspräferenz, sodass der Standardzustand ohne Bewegung bleibt:
<button class="btn">Button</button>
<div class="card">Card</div>
Animationstypen austauschen
Ersetzen Sie desorientierende Bewegungen (translate, scale, rotate) für Personen, die reduzierte Bewegungen bevorzugen, durch zugängliche Alternativen (opacity, color):
<div class="card demo-hover">Hover me</div>
Endlosanimationen
Endlosanimationen (Ladeindikatoren, pulsierende Animationen) sind besonders problematisch. Bieten Sie eine statische Alternative an:
<div class="spinner"></div>
Parallax-Effekte
Parallax-Scrolling kann starke Bewegungskrankheit verursachen. Deaktivieren Sie es immer für Personen, die reduzierte Bewegungen bevorzugen:
<div class="parallax">Parallax section</div>
Zugriff mit JavaScript
Prüfen Sie die Präferenz in JavaScript, wenn Sie die Web Animations API oder Bibliotheken für Scroll-Animationen verwenden:
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
WCAG und Bewegung
WCAG 2.3.3 (AAA) verlangt, dass durch Interaktionen ausgelöste Animationen deaktivierbar sind. Die Verwendung von prefers-reduced-motion ist der empfohlene CSS-Ansatz, um dieses Kriterium zu erfüllen.
Reduzierte Bewegungen testen
Aktivieren Sie in den Chrome DevTools im Tab „Rendering“ die Option „Emulate CSS prefers-reduced-motion: reduce“, um das Verhalten ohne Änderung der Betriebssystemeinstellungen zu testen. Unter macOS: Systemeinstellungen → Bedienungshilfen → Bewegung reduzieren.
Die Absicht dokumentieren
Kommentieren Sie Animationen, um zu erklären, ob sie funktional oder lediglich dekorativ sind. Funktionale Animationen (zur Anzeige eines Vorgangs oder Fortschritts) sollten zugängliche Alternativen haben; dekorative Animationen können einfach entfernt werden.
Kurze Überprüfung
Welcher Ansatz eignet sich am besten für prefers-reduced-motion bei einem Hover-Lift-Effekt einer Karte?
Zusammenfassung
Verwenden Sie prefers-reduced-motion: reduce, um eine Bewegungsempfindlichkeit zu erkennen. Anstatt alle Animationen zu deaktivieren, sollten Sie einen Standardzustand ohne Bewegung anbieten und Bewegungen nur innerhalb von no-preference-Abfragen aktivieren. Ersetzen Sie desorientierende transform-Animationen für Personen mit reduzierter Bewegungspräferenz durch Transitionen von opacity oder color. Testen Sie das Verhalten mit der DevTools-Emulation.
Häufig gestellte Fragen
Ist die Lektion „Barrierefreie Animationen mit prefers-reduced-motion“ kostenlos?
Ja — der vollständige Text von „Barrierefreie Animationen mit prefers-reduced-motion“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Barrierefreie Animationen mit prefers-reduced-motion“?
Berücksichtigen Sie die Anforderungen an Barrierefreiheit, indem Sie Animationen für bewegungsempfindliche Personen deaktivieren oder reduzieren. Du übst CSS 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 CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS 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 „Barrierefreie Animationen mit prefers-reduced-motion“?
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 CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS 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
- @keyframes-Syntax und Animationseigenschaft
- Animationsrichtung, Fill-Mode und Wiederholungen
- Animationen verketten und sequenzieren
- Barrierefreie Animationen mit prefers-reduced-motion