Reduce Motion in mobiele apps: essentie, instellingen voor bewegingsvermindering

Wat is Reduce Motion in accessibility?

Reduce Motion — een systeeminstelling die het besturingssysteem, de browser en apps opdraagt om animatie, beweging, schalen en parallax-effecten te minimaliseren of volledig uit te schakelen. De functie is bedoeld voor mensen met evenwichtsstoornissen, bij wie bewegende interface-elementen misselijkheid, duizeligheid, desoriëntatie en migraine veroorzaken.

Het evenwichtsorgaan van het binnenoor is verantwoordelijk voor het gevoel van evenwicht en oriëntatie in de ruimte. Wanneer de ogen beweging op het scherm zien, maar het evenwichtsorgaan geen overeenkomstige lichaamsbeweging voelt, ontstaat er een zintuiglijk conflict. Dit conflict veroorzaakt een vegetatieve reactie: misselijkheid, koud zweet, duizeligheid. Volgens de Vestibular Disorders Association ervaart ongeveer 35% van de mensen ouder dan 40 ongemak door bewegingseffecten in interfaces.

Het belangrijkste verschil van Reduce Motion met eenvoudig uitschakelen van animatie — het systeemniveau. De ingeschakelde instelling wordt aan alle apps en websites doorgegeven via de API van het besturingssysteem of de CSS-mediafunctie prefers-reduced-motion. De ontwikkelaar hoeft niet te raden of de gebruiker animatie wil — het systeem geeft dit aan. Dit maakt deel uit van de progressive enhancement-benadering: animatie is een verbetering, geen verplicht element.

Welke effecten schakelt Reduce Motion uit

Reduce Motion beïnvloedt parallax-effecten (verschuiving van de achtergrond bij het kantelen van het apparaat), animatie van overgangen tussen schermen (push, slide, fade), schalen van pictogrammen bij indrukken, berichteffecten (SMS-bubbels), laadanimatie (spinner, skeleton, progress bar animation), parallax in games en web parallax scrolling-effecten. Statische afbeeldingen en video's worden niet beïnvloed.

Wie heeft Reduce Motion nodig

De belangrijkste doelgroep van Reduce Motion — mensen met evenwichtsstoornissen (ziekte van Menière, labyrintitis, BPPV), migraine (vooral met aura), kinetose (bewegingsziekte in voertuigen) en sommige vormen van epilepsie. De functie is ook nuttig voor oudere gebruikers — leeftijdsgebonden veranderingen van het evenwichtsorgaan verhogen de gevoeligheid voor beweging, en voor gebruikers met ADHD — bewegende elementen leiden af van het lezen.

Reduce Motion in iOS: instelling en systeemeffecten

In iOS bevindt Reduce Motion zich in Settings > Accessibility > Motion en omvat drie opties: Reduce Motion (hoofdschakelaar), Auto-Play Message Effects (automatisch afspelen van iMessage-effecten) en Auto-Play Video Previews (automatisch afspelen van video's in de App Store). Reduce Motion is de krachtigste: het schakelt parallax van de achtergrond, animatie van het openen van apps (zoom), overgangen tussen schermen (push wordt vervangen door cross-fade) en pictogrameffecten op het beginscherm uit.

Technisch implementeert iOS Reduce Motion op UIKit-niveau via UIView animations en UIViewControllerAnimatedTransitioning. Bij ingeschakelde instelling wordt UIView.animate met een duur > 0 teruggebracht tot 0,01 sec en retourneert UIViewController.transitionDuration 0. Voor parallax schakelt iOS UIInterpolatingMotionEffect op UIWindow uit. De ontwikkelaar kan de status controleren via UIAccessibility.isReduceMotionEnabled.

Reduce Motion controleren in een iOS-app

De ontwikkelaar kan animatie in iOS aanpassen aan Reduce Motion: complexe overgangen vervangen door fade-effecten, parallax uitschakelen in aangepaste UI-componenten en de duur van animaties verkorten. SwiftUI biedt een speciale modifier .animation(nil) wanneer reduceMotion actief is.

import UIKit

class MotionManager {

    // Controleren van Reduce Motion-status
    static var isReduceMotionEnabled: Bool {
        return UIAccessibility.isReduceMotionEnabled
    }

    // Veilige animatie rekening houdend met 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 voor 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 }
    }
}

// Abonneren op Reduce Motion-wijziging
NotificationCenter.default.addObserver(
    self,
    selector: #selector(motionStatusChanged),
    name: UIAccessibility.reduceMotionStatusDidChangeNotification,
    object: nil
)

De klasse MotionManager controleert isReduceMotionEnabled en past de animatieduur aan: bij actieve Reduce Motion wordt de duur verkort tot 0,01 sec (praktisch onmiddellijk). De SwiftUI-modifier .animation(nil) schakelt animatie volledig uit wanneer reduceMotion == true. Abonneren op reduceMotionStatusDidChangeNotification maakt dynamisch schakelen van animatie mogelijk zonder de app opnieuw te laden.

Auto-Play Message Effects in iMessage

Een afzonderlijke iOS-optie — Auto-Play Message Effects — beheert het afspelen van effecten in iMessage: ballonaninimatie, confetti, lasers en vuurwerk. Bij ingeschakelde Reduce Motion worden iMessage-effecten automatisch uitgeschakeld. De ontwikkelaar kan deze optie controleren via UIAccessibility.isReduceMotionEnabled — er is geen aparte API voor Message Effects, ze zijn gekoppeld aan de algemene instelling.

Verwijder animatie in Android: Developer Options en Accessibility

In Android bevindt de instelling „Verwijder animatie” zich op twee plaatsen: Instellingen > Toegankelijkheid > Verwijder animatie (voor toegankelijkheidsinstellingen) en Opties voor ontwikkelaars > Animatieschaal (voor ontwikkelaars). De toegankelijkheidsversie schakelt alle systeemanimaties uit, inclusief overgangen tussen schermen, animatie van het openen van apps en laadeffecten. Ontwikkelaarsopties maken het mogelijk de schaal te verkleinen naar 0,5x, 0,1x of volledig uit te schakelen.

Technisch implementeert Android het uitschakelen van animatie via systeemeigenschappen: window_animation_scale, transition_animation_scale en animator_duration_scale. Bij de toegankelijkheidsinstelling krijgen alle drie de waarde 0. De systeemlauncher en systeemapps controleren deze waarden. Voor apps van derden raadt Android het gebruik van Jetpack Compose en View system aan, die automatisch de systeeminstelling lezen via AnimationScaleObserver.

Controleren in een Android-app

De ontwikkelaar kan de animatiestatus in Android controleren via Settings.Global en de UI aanpassen. Jetpack Compose biedt AnimationScaleObserver voor automatische aanpassing. De belangrijkste waarde — animator_duration_scale: als deze 0 is, is animatie volledig uitgeschakeld.

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 {

    // Controleren van animatie-uitschakeling
    fun isAnimationDisabled(context: Context): Boolean {
        return try {
            Settings.Global.getFloat(
                context.contentResolver,
                Settings.Global.ANIMATOR_DURATION_SCALE
            ) == 0f
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Observeren van animatiewijziging (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 — animatie rekening houdend met instellingen
@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 met animatie
}

De klasse AndroidMotionHelper controleert ANIMATOR_DURATION_SCALE via Settings.Global, biedt een ContentObserver voor het volgen van wijzigingen en stelt Jetpack Compose-animaties in staat zich aan te passen: bij uitgeschakelde animatie is durationMillis = 0 (onmiddellijke toepassing). Gebruik voor het View-systeem ViewPropertyAnimator.withLayer() en controleer isAnimationDisabled() voordat u een animatie start.

Verschil tussen Accessibility en Developer Options

De toegankelijkheidsinstelling „Verwijder animatie” in Android — de enige manier voor een gewone gebruiker om animatie uit te schakelen. Ontwikkelaarsopties zijn alleen bedoeld voor ontwikkelaars en kunnen verborgen zijn. De toegankelijkheidsinstelling wordt gegarandeerd doorgegeven aan alle apps via de systeem-API. De ontwikkelaar moet zich richten op AccessibilityManager, niet op Ontwikkelaarsopties.

CSS prefers-reduced-motion: media-functie voor het web

De CSS-mediafunctie prefers-reduced-motion stelt webontwikkelaars in staat animatie uit te schakelen of te vervangen wanneer de gebruiker Reduce Motion heeft ingeschakeld in het besturingssysteem. De browser geeft de waarde reduce door bij actieve systeeminstelling, no-preference — als de instelling niet is gewijzigd. Wordt sinds 2020 ondersteund door alle moderne browsers: Chrome 74+, Safari 10.3+, Firefox 64+, Edge 79+.

Aanbeveling van MDN en W3C — stel altijd prefers-reduced-motion: reduce in samen met animaties. Een gebruiker die Reduce Motion heeft ingeschakeld, mag geen pulsaties, parallax, automatisch afspelen van carrousels en skeleton-laden zien. In plaats van animatie kan statische inhoud worden getoond of kan een CSS transition met minimale duur worden gebruikt. Hieronder staat een voorbeeld van volledige aanpassing.

Aanpassing van een webpagina via prefers-reduced-motion

Bij prefers-reduced-motion: reduce moet de webpagina: CSS-animaties (@keyframes) uitschakelen, CSS transitions vervangen door onmiddellijke wijzigingen, JavaScript-animaties (requestAnimationFrame) stoppen, parallax scrolling uitschakelen, carrousels en sliders stoppen, skeleton-effecten uitschakelen en de spinner vervangen door een statische indicator.

/* Basisanimaties (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 uitschakelen */
@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; }
}

In het CSS-voorbeeld wordt een globale animatiereset gebruikt bij prefers-reduced-motion: reduce: alle animaties en overgangen krijgen duration 0.01ms en iteration-count 1. Afzonderlijk zijn spinner (statische rand), skeleton (grijze achtergrond zonder flikkering), parallax (uitgeschakeld) en carrousel (scroll-behavior: auto in plaats van smooth) overschreven. De universele selector * — beveiliging voor alle elementen.

JavaScript-detectie van prefers-reduced-motion

Voor JavaScript is matchMedia('(prefers-reduced-motion: reduce)').matches beschikbaar. Indien true — start geen animaties via requestAnimationFrame, setInterval of Web Animations API. Voorbeeld: een slider met reduceMotion draait niet automatisch, alleen via knoppen. De bibliotheken GSAP, Framer Motion en Anime.js ondersteunen deze controle via hun toegankelijkheidsopties.

WCAG 2.2: animatie door interactie en criterium 2.3.3

WCAG 2.2 (2023) introduceerde een nieuw criterium 2.3.3 Animation from Interactions (niveau AAA): als animatie wordt geactiveerd door gebruikersinteractie (klik, scrollen, hoveren), moet deze uitschakelbaar zijn of niet langer dan 5 seconden duren. Animaties die niet gerelateerd zijn aan interactie (laadspinner, voortgangsbalk) vallen niet onder dit criterium. Voor niveau AA is het voldoende dat animatie niet de enige manier is om informatie over te brengen.

Criterium 2.3.3 is toegevoegd na talloze klachten over bewegingsziekte door parallax scrolling en de „trek-ververs”-animatie. W3C beveelt alle sites en apps aan: animeer elementen niet langer dan 5 seconden, bied een schakelaar om animatie uit te schakelen (via bedieningspaneel of prefers-reduced-motion), gebruik geen pulserende en knipperende elementen (gevaarlijk voor epilepsie).

Hoe WCAG 2.2 voor animatie na te leven

Voor naleving van WCAG 2.2 moet de ontwikkelaar: prefers-reduced-motion controleren en animatie uitschakelen bij actieve instelling, de maximale animatieduur instellen op 5 seconden (als animatie niet kan worden uitgeschakeld), een UI-schakelaar voor animatie bieden in de app-instellingen, geen parallax-effecten gebruiken als enige navigatiemethode en testen met ingeschakelde Reduce Motion in alle browsers en op alle apparaten.

• Controleer prefers-reduced-motion — verplicht voor alle websites met CSS/JS-animatie
• Maximaal 5 seconden — animatie door interactie mag niet langer duren (criterium 2.3.3 AAA)
• UI-schakelaar — de app moet een optie hebben om animatie uit te schakelen in de instellingen
• Geen parallax-navigatie — inhoud mag niet alleen toegankelijk zijn via parallax scrolling

Testtools voor Reduce Motion

Voor het testen van app-gedrag met Reduce Motion gebruikt u: iOS Simulator (schakel Reduce Motion in via Settings > Accessibility), Android Emulator (schakel „Verwijder animatie” in), Chrome DevTools (Rendering > Emulate CSS media feature prefers-reduced-motion), Safari-webinspector (schakel Reduce Motion in via macOS System Preferences > Accessibility > Display). Controleer of de inhoud toegankelijk en leesbaar blijft zonder animatie.