Wie man prefers-reduced-motion fachgerecht unterstützt
Vollständiger Leitfaden zu prefers-reduced-motion: Vestibulärer Komfort, CSS Media Queries, JavaScript-Hooks und Gestaltung sanfter Alternativen.
Kernaussage
prefers-reduced-motion fachgerecht zu unterstützen bedeutet nicht, jedes Feedback zu streichen und die Oberfläche leblos wirken zu lassen. Es bedeutet, raumgreifende, schnelle oder desorientierende Bewegungen (wie Parallax, 3D-Drehungen und weite Wischdistanzen) zu entfernen und durch unmittelbare Wechsel, sanfte Überblendungen oder Farbwechsel zu ersetzen.
Vestibuläre Störungen und Bewegungskrankheit verstehen
Menschen mit vestibulären Störungen leiden unter Schwindel und Übelkeit, wenn Bildschirmbewegungen nicht mit ihrer physischen Balance übereinstimmen. Großflächige Übergänge, automatisch abspielende Videos und hüpfende Symbole lösen binnen Sekunden körperliches Unbehagen aus.
Der fatale Pauschal-Reset
Ein verbreitetes, aber schädliches Muster ist das Einfügen von * { animation: none !important; transition: none !important; } in CSS. Dies zerstört mehrstufige Abläufe, lässt Tooltips vor dem Lesen verschwinden und raubt jedes Lade-Feedback. Bewegung gehört angepasst, nicht vernichtet.
- Entfernen Sie weite Verschiebungen, starke Skalierungen und Parallax-Effekte
- Erhalten Sie sanfte Deckkraft-Überblendungen (100 ms) gegen abrupte Kanten
- Ersetzen Sie rotierende Spinner durch Textanzeigen oder Schrittbalken
- Bieten Sie zusätzlich einen Schalter in den Profileinstellungen der App an
Umsetzung mit CSS und Design Tokens
Bauen Sie Motion Tokens so auf, dass Verschiebungs-Tokens unter @media (prefers-reduced-motion: reduce) auf 0 ms aufgelöst werden, während Transparenz-Tokens bei sanften 80 bis 100 ms verbleiben.
Behandlung in JavaScript- und Physik-Engines
Hören Sie in JavaScript-Frameworks auf window.matchMedia('(prefers-reduced-motion: reduce)'). Übergeben Sie reducedMotion: true an Ihre Animations-Engines, damit Federn direkt am Zielwert einrasten.
Wichtige Prinzipien
- Streichen Sie niemals funktionale Rückmeldungen; ersetzen Sie Bewegung durch Überblendung
- Beseitigen Sie weite Distanzen und Parallax bei Beibehaltung sanfter Farbwechsel
- Strukturieren Sie Design Tokens zur zentralen Steuerung reduzierter Bewegung
- Testen Sie sowohl über Betriebssystem-Schalter als auch über Browser-DevTools