Reduce Motion in mobilen Apps: Wesen und Einstellungen zur Bewegungsreduzierung

Was ist Reduce Motion in der Barrierefreiheit?

Reduce Motion — eine Systemeinstellung, die Betriebssystem, Browser und Anwendungen anweist, Animation, Bewegung, Skalierung und Parallax-Effekte zu minimieren oder vollständig zu deaktivieren. Die Funktion richtet sich an Menschen mit vestibulären Störungen, bei denen bewegte Oberflächenelemente Übelkeit, Schwindel, Desorientierung und Migräne auslösen.

Das vestibuläre System des Innenohrs ist für den Gleichgewichtssinn und die räumliche Orientierung zuständig. Wenn die Augen Bewegung auf dem Bildschirm sehen, das Vestibularorgan aber keine entsprechende Bewegung des Körpers wahrnimmt, entsteht ein sensorischer Konflikt. Dieser Konflikt löst eine vegetative Reaktion aus: Übelkeit, kalter Schweiß, Schwindel. Laut Vestibular Disorders Association empfinden etwa 35% der Menschen über 40 Beschwerden durch Motion-Effekte in Oberflächen.

Der entscheidende Unterschied zwischen Reduce Motion und einfacher Deaktivierung von Animation ist die Systemebene. Bei Aktivierung wird die Einstellung über die OS-API oder die CSS-Media-Funktion prefers-reduced-motion an alle Apps und Websites weitergegeben. Der Entwickler muss nicht raten, ob der Nutzer Animation möchte — das OS teilt es mit. Dies ist Teil des Progressive-Enhancement-Ansatzes: Animation ist eine Verbesserung, kein Pflichtelement.

Welche Effekte deaktiviert Reduce Motion

Reduce Motion wirkt sich auf Parallax-Effekte (Verschiebung des Hintergrunds beim Neigen des Geräts), Übergangsanimationen zwischen Bildschirmen (push, slide, fade), Skalierung von Icons beim Tippen, Nachrichten-Effekte (SMS-Blasen), Ladeanimationen (Spinner, Skeleton, Progressbar-Animation), Parallax in Spielen und Web-Effekte des Parallax-Scrollings aus. Statische Bilder und Videos sind nicht betroffen.

Wer braucht Reduce Motion

Das Hauptpublikum für Reduce Motion sind Menschen mit vestibulären Störungen (Morbus Menière, Labyrinthitis, BPPV), Migräne (besonders mit Aura), Kinetose (Reisekrankheit im Transport) und bestimmten Formen von Epilepsie. Die Funktion ist auch für ältere Nutzer nützlich — altersbedingte Veränderungen des Vestibularorgans erhöhen die Empfindlichkeit für Motion — sowie für Nutzer mit ADHS, da bewegte Elemente vom Lesen ablenken.

Reduce Motion unter iOS: Einstellung und Systemeffekte

Unter iOS befindet sich Reduce Motion unter Settings > Accessibility > Motion und umfasst drei Optionen: Reduce Motion (Hauptschalter), Auto-Play Message Effects (Autowiedergabe von iMessage-Effekten) und Auto-Play Video Previews (Autowiedergabe von Videos im App Store). Reduce Motion ist am wirkungsvollsten: Es deaktiviert Parallax des Hintergrunds, die Animation beim Öffnen von Apps (Zoom), Übergänge zwischen Bildschirmen (push wird durch cross-fade ersetzt) und Icon-Effekte auf dem Home-Bildschirm.

Technisch setzt iOS Reduce Motion auf UIKit-Ebene über UIView animations und UIViewControllerAnimatedTransitioning um. Bei aktiver Einstellung wird UIView.animate mit einer Dauer > 0 auf 0,01 Sekunden reduziert, und UIViewController.transitionDuration gibt 0 zurück. Für Parallax deaktiviert iOS UIInterpolatingMotionEffect auf UIWindow. Der Entwickler kann den Zustand über UIAccessibility.isReduceMotionEnabled prüfen.

Reduce Motion in einer iOS-App prüfen

Ein Entwickler kann Animationen unter iOS an Reduce Motion anpassen: komplexe Übergänge durch Fade-Effekte ersetzen, Parallax in benutzerdefinierten UI-Komponenten deaktivieren und die Dauer von Animationen verkürzen. SwiftUI bietet einen speziellen Modifier .animation(nil) bei aktivem reduceMotion an.

import UIKit

class MotionManager {

    // Reduce-Motion-Status prüfen
    static var isReduceMotionEnabled: Bool {
        return UIAccessibility.isReduceMotionEnabled
    }

    // Sichere Animation unter Berücksichtigung von Reduce Motion
    static func animate(
        duration: TimeInterval,
        delay: TimeInterval = 0,
        options: UIView.AnimationOptions = [],
        animations: @escaping () -> Void,
        completion: ((Bool) -> Void)? = nil
    ) {
        let adjustedDuration = isReduceMotionEnabled
            ? 0.01
            : max(duration, 0.01)
        UIView.animate(
            withDuration: adjustedDuration,
            delay: delay,
            options: options,
            animations: animations,
            completion: completion
        )
    }
}

// SwiftUI — Modifier für Reduce Motion
import SwiftUI

struct MotionAwareView: View {
    @Environment(\.accessibilityReduceMotion)
    private var reduceMotion

    @State private var isAnimating = false

    var body: some View {
        Circle()
            .scaleEffect(isAnimating ? 1.2 : 1.0)
            .animation(
                reduceMotion
                    ? nil
                    : .easeInOut(duration: 1.0).repeatForever(),
                value: isAnimating
            )
            .onAppear { isAnimating = true }
    }
}

// Reduce-Motion-Änderungen abonnieren
NotificationCenter.default.addObserver(
    self,
    selector: #selector(motionStatusChanged),
    name: UIAccessibility.reduceMotionStatusDidChangeNotification,
    object: nil
)

Die Klasse MotionManager prüft isReduceMotionEnabled und passt die Dauer der Animation an: Bei aktivem Reduce Motion wird die Dauer auf 0,01 Sekunden (praktisch sofort) reduziert. Der SwiftUI-Modifier .animation(nil) deaktiviert die Animation vollständig, wenn reduceMotion == true ist. Das Abonnieren von reduceMotionStatusDidChangeNotification ermöglicht es, Animationen ohne Neustart der App dynamisch umzuschalten.

Auto-Play Message Effects in iMessage

Eine separate iOS-Option — Auto-Play Message Effects — steuert die Wiedergabe von Effekten in iMessage: Ballon-Animation, Konfetti, Laser und Feuerwerk. Bei aktivem Reduce Motion werden iMessage-Effekte automatisch deaktiviert. Ein Entwickler kann diese Option über UIAccessibility.isReduceMotionEnabled prüfen — eine separate API für Message Effects gibt es nicht; sie sind an die allgemeine Einstellung gebunden.

Animationen unter Android entfernen: Entwickleroptionen und Barrierefreiheit

Unter Android befindet sich die Einstellung „Animationen entfernen“ an zwei Orten: Settings > Accessibility > Animationen entfernen (für Barrierefreiheitseinstellungen) und Entwickleroptionen > Animationsskalierung (für Entwickler). Die Barrierefreiheitsversion deaktiviert alle Systemanimationen, einschließlich Übergängen zwischen Bildschirmen, Animation beim Öffnen von Apps und Ladeeffekten. Die Entwickleroptionen erlauben es, die Skalierung auf 0,5x, 0,1x zu reduzieren oder vollständig zu deaktivieren.

Technisch setzt Android die Deaktivierung von Animationen über System-Properties um: window_animation_scale, transition_animation_scale und animator_duration_scale. Bei der Barrierefreiheitseinstellung erhalten alle drei den Wert 0. Der System-Launcher und System-Apps prüfen diese Werte. Für Drittanbieter-Apps empfiehlt Android die Verwendung von Jetpack Compose und dem View-System, die die Systemeinstellung automatisch über AnimationScaleObserver auslesen.

Prüfung in einer Android-App

Ein Entwickler kann den Zustand der Animation unter Android über Settings.Global prüfen und die UI anpassen. Jetpack Compose bietet AnimationScaleObserver zur automatischen Anpassung. Der entscheidende Wert ist animator_duration_scale: Ist er 0, ist die Animation vollständig deaktiviert.

import android.content.Context
import android.provider.Settings
import android.database.ContentObserver
import android.os.Handler
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.runtime.getValue

class AndroidMotionHelper {

    // Prüfen, ob Animationen deaktiviert sind
    fun isAnimationDisabled(context: Context): Boolean {
        return try {
            Settings.Global.getFloat(
                context.contentResolver,
                Settings.Global.ANIMATOR_DURATION_SCALE
            ) == 0f
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Animationsänderungen beobachten (ContentObserver)
    fun observeAnimationScale(
        context: Context,
        onChange: (Boolean) -> Unit
    ): ContentObserver {
        val observer = object : ContentObserver(Handler()) {
            override fun onChange(selfChange: Boolean) {
                onChange(isAnimationDisabled(context))
            }
        }
        context.contentResolver.registerContentObserver(
            Settings.Global.getUriFor(
                Settings.Global.ANIMATOR_DURATION_SCALE
            ),
            false,
            observer
        )
        return observer
    }
}

// Jetpack Compose — Animation unter Berücksichtigung der Einstellungen
@Composable
fun MotionAwareAnimation(enabled: Boolean) {
    val context = androidx.compose.ui.platform.LocalContext.current
    val noMotion = AndroidMotionHelper().isAnimationDisabled(context)

    val scale by animateFloatAsState(
        targetValue = if (enabled) 1f else 0f,
        animationSpec = if (noMotion) {
            androidx.compose.animation.core.tween(durationMillis = 0)
        } else {
            androidx.compose.animation.core.spring()
        },
        label = "scale"
    )
    // UI mit Animation
}

Die Klasse AndroidMotionHelper prüft ANIMATOR_DURATION_SCALE über Settings.Global, stellt einen ContentObserver zum Verfolgen von Änderungen bereit und ermöglicht es Jetpack-Compose-Animationen, sich anzupassen: Bei deaktivierter Animation gilt durationMillis = 0 (sofortige Anwendung). Verwenden Sie für das View-System ViewPropertyAnimator.withLayer() und prüfen Sie isAnimationDisabled(), bevor Sie eine Animation starten.

Unterschied zwischen Barrierefreiheit und Entwickleroptionen

Die Barrierefreiheitseinstellung „Animationen entfernen“ unter Android ist der einzige Weg für einen normalen Nutzer, Animationen zu deaktivieren. Die Entwickleroptionen sind nur für Entwickler gedacht und können verborgen sein. Die Barrierefreiheitseinstellung wird über die System-API zuverlässig an alle Apps weitergegeben. Der Entwickler sollte sich auf AccessibilityManager und nicht auf die Entwickleroptionen stützen.

CSS prefers-reduced-motion: eine Media-Funktion für das Web

Die CSS-Media-Funktion prefers-reduced-motion ermöglicht es Webentwicklern, Animationen zu deaktivieren oder zu ersetzen, wenn der Nutzer Reduce Motion im Betriebssystem aktiviert hat. Der Browser übermittelt den Wert reduce bei aktiver Systemeinstellung, no-preference — wenn die Einstellung nicht geändert wurde. Unterstützt wird sie von allen modernen Browsern seit 2020: Chrome 74+, Safari 10.3+, Firefox 64+, Edge 79+.

Die Empfehlung von MDN und W3C — immer prefers-reduced-motion: reduce zusammen mit Animationen festzulegen. Ein Nutzer, der Reduce Motion aktiviert hat, sollte keine Pulsierungen, Parallax, Auto-Play-Karussells und Skeleton-Ladezustände sehen. Statt einer Animation kann man statischen Inhalt anzeigen oder einen CSS-Übergang mit minimaler Dauer verwenden. Im Folgenden ist ein Beispiel für die vollständige Anpassung angeführt.

Anpassung einer Webseite über prefers-reduced-motion

Bei prefers-reduced-motion: reduce sollte eine Webseite: CSS-Animationen (@keyframes) deaktivieren, CSS-Übergänge durch sofortige Änderungen ersetzen, JavaScript-Animationen (requestAnimationFrame) stoppen, Parallax-Scrolling deaktivieren, Karussells und Slider stoppen, Skeleton-Effekte deaktivieren und den Spinner durch einen statischen Indikator ersetzen.

/* Basis-Animationen (no-preference) */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: #0066CC;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 37%,
        #f0f0f0 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}

.parallax-bg {
    transform: translateZ(-1px) scale(1.5);
    transition: transform 0.3s ease-out;
}

/* Reduce Motion: alles deaktivieren */
@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
        border-top-color: #0066CC;
    }

    .skeleton {
        animation: none;
        background: #f0f0f0;
    }

    .parallax-bg {
        transform: none;
        transition: none;
    }

    .carousel {
        scroll-behavior: auto;
        overflow-x: auto;
    }

    .fade-in {
        opacity: 1;
        transform: none;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

Im CSS-Beispiel wird bei prefers-reduced-motion: reduce ein globaler Reset der Animation verwendet: alle Animationen und Übergänge erhalten eine Dauer von 0,01ms und iteration-count 1. Separat werden Spinner (statische Umrandung), Skeleton (grauer Hintergrund ohne Flackern), Parallax (deaktiviert) und Karussell (scroll-behavior: auto statt smooth) überschrieben. Der universelle Selektor * ist die Absicherung für alle Elemente.

JavaScript-Erkennung von prefers-reduced-motion

Für JavaScript ist matchMedia('(prefers-reduced-motion: reduce)').matches verfügbar. Wenn true — führen Sie keine Animationen über requestAnimationFrame, setInterval oder die Web Animations API aus. Beispiel: Ein Slider dreht sich bei reduceMotion nicht automatisch, nur über Schaltflächen. Bibliotheken wie GSAP, Framer Motion und Anime.js unterstützen diese Prüfung über ihre Barrierefreiheitsoptionen.

WCAG 2.2: Animation durch Interaktion und Kriterium 2.3.3

WCAG 2.2 (2023) führte ein neues Kriterium 2.3.3 Animation from Interactions (Stufe AAA) ein: Wenn eine Animation durch eine Nutzerinteraktion (Klick, Scrollen, Hover) ausgelöst wird, muss sie deaktivierbar sein oder 5 Sekunden nicht überschreiten. Animationen, die nicht mit Interaktion zusammenhängen (Lade-Spinner, Fortschrittsbalken), fallen nicht unter dieses Kriterium. Für Stufe AA reicht es, dass Animation nicht die einzige Art der Informationsvermittlung ist.

Kriterium 2.3.3 wurde nach zahlreichen Beschwerden über Motion Sickness durch Parallax-Scrolling und die „Pull-to-Refresh“-Animation ergänzt. W3C empfiehlt allen Websites und Apps: Elemente nicht länger als 5 Sekunden zu animieren, einen Schalter zum Deaktivieren der Animation bereitzustellen (über ein Bedienfeld oder prefers-reduced-motion) und keine pulsierenden und blinkenden Elemente zu verwenden (gefährlich bei Epilepsie).

So erfüllen Sie WCAG 2.2 für Animationen

Zur Einhaltung von WCAG 2.2 muss ein Entwickler: prefers-reduced-motion prüfen und die Animation bei aktiver Einstellung deaktivieren, eine maximale Animationsdauer von 5 Sekunden festlegen (wenn die Animation nicht deaktiviert werden kann), einen UI-Schalter für Animationen in den App-Einstellungen bereitstellen, Parallax-Effekte nicht als einzige Navigationsmethode verwenden und mit aktiviertem Reduce Motion in allen Browsern und auf allen Geräten testen.

• Prüfung von prefers-reduced-motion — obligatorisch für alle Websites mit CSS/JS-Animation
• Maximum 5 Sekunden — Animation durch Interaktion darf nicht länger dauern (Kriterium 2.3.3 AAA)
• UI-Schalter — die App muss eine Option zum Deaktivieren der Animation in den Einstellungen haben
• Keine Parallax-Navigation — Inhalte dürfen nicht nur über Parallax-Scrolling erreichbar sein

Werkzeuge zum Testen von Reduce Motion

Zum Testen des App-Verhaltens mit Reduce Motion verwenden Sie: iOS Simulator (Reduce Motion unter Settings > Accessibility aktivieren), Android Emulator („Animationen entfernen“ aktivieren), Chrome DevTools (Rendering > Emulate CSS media feature prefers-reduced-motion) und den Web-Inspektor von Safari (Reduce Motion in den macOS-Systemeinstellungen > Bedienungshilfen > Anzeige aktivieren). Prüfen Sie, dass Inhalte ohne Animation zugänglich und lesbar bleiben.