Bewegung reduzieren ist eine Systemeinstellung, mit der Nutzer Animationen abbestellen, und zugleich die Abfrage, über die eine Website sie berücksichtigt. Ist sie gesetzt, sollen Bewegungen entfallen oder sich auf das Nötige beschränken.
- Bewegung reduzieren
Systemeinstellung, mit der Nutzer Animationen abbestellen, und die Abfrage, die sie berücksichtigt.
Beispiel: „Mit ‚Bewegung reduzieren‘ steht die animierte Abbildung im Glossar still.“Auch: prefers-reduced-motion, nach dem Namen der CSS-Abfrage. In den Systemeinstellungen heißt die Option bei Apple „Bewegung reduzieren“, unter Windows „Animationseffekte“.
Abgrenzung zum Abschalten durch die Website: Hier entscheidet der Nutzer einmal für alle Angebote. Eine Schaltfläche auf der Seite selbst ist zusätzlich möglich, ersetzt die Einstellung aber nicht.
Warum die Einstellung existiert
Weil Bewegung im Sichtfeld körperlich wirkt. Bei Menschen mit vestibulären Störungen lösen Parallaxe, zoomende Übergänge und großflächiges Verschieben Schwindel, Übelkeit und Kopfschmerzen aus. Es handelt sich um eine körperliche Reaktion, die sich nicht abstellen lässt, und damit um etwas anderes als eine Vorliebe.
Betroffen ist dabei mehr als eine Randgruppe. Die Einstellung wird auch von Menschen gesetzt, die sich schlicht weniger Unruhe auf dem Bildschirm wünschen, und auf älteren Geräten spart abgeschaltete Bewegung zusätzlich Rechenzeit.
Das Erfolgskriterium Animation aus Interaktionen (2.3.3) verlangt deshalb, dass sich durch Interaktion ausgelöste Bewegung abschalten lässt, sofern sie nicht unverzichtbar ist.
Was die Abfrage bewirkt
Sie meldet die Einstellung des Betriebssystems an das Stylesheet. Zwei Werte gibt es: reduce, wenn der Nutzer sie gesetzt hat, und no-preference sonst. Alles, was sich bewegt, gehört in einen Block, der auf reduce reagiert.
@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;
}
}Was reduziert wirklich heißt
Nicht jede Bewegung muss verschwinden. Ein kurzer Übergang, der einen Zustandswechsel verständlich macht, darf bleiben; er hilft beim Verstehen und bewegt kaum Fläche. Weg gehören die großen Bewegungen: Parallaxe, selbstlaufende Bildfolgen, zoomende Seitenwechsel, alles, was sich über den halben Bildschirm schiebt.
Aus unserer Arbeit an über 2.500 Website-Projekten ist der Block mit dem Sternchen-Selektor ein brauchbarer Notnagel für Bestandsseiten, aber kein Ersatz für die Entscheidung je Animation. Wer neu baut, prüft jede Bewegung einzeln und schaltet gezielt ab.