Reduce Motion sa mga mobile app: esensya, mga setting ng pagbawas ng paggalaw

Ano ang Reduce Motion sa accessibility?

Reduce Motion — isang system setting na nag-uutos sa operating system, browser at mga app na bawasan o ganap na i-disable ang animation, paggalaw, scaling at parallax effects. Ang function ay para sa mga taong may vestibular disorders, kung saan ang mga gumagalaw na elemento ng interface ay nagdudulot ng pagkahilo, pag-ikot ng ulo, disorientasyon at migraine.

Ang vestibular system ng inner ear ay responsable para sa pakiramdam ng balanse at oryentasyon sa espasyo. Kapag ang mga mata ay nakakakita ng paggalaw sa screen ngunit ang vestibular apparatus ay hindi nakakaramdam ng kaukulang paggalaw ng katawan, nangyayari ang sensory conflict. Ang conflict na ito ay nagti-trigger ng vegetative reaction: pagkahilo, malamig na pawis, pag-ikot ng ulo. Ayon sa Vestibular Disorders Association, humigit-kumulang 35% ng mga taong higit sa 40 taong gulang ay nakakaranas ng discomfort mula sa mga motion effect sa mga interface.

Ang pangunahing pagkakaiba ng Reduce Motion mula sa simpleng pag-disable ng animation — antas ng system. Ang naka-enable na setting ay ipinapasa sa lahat ng app at website sa pamamagitan ng API ng operating system o CSS media function na prefers-reduced-motion. Hindi kailangang hulaan ng developer kung gusto ng user ng animation — ang sistema ang nagpapaalam. Ito ay bahagi ng progressive enhancement approach: ang animation ay isang enhancement, hindi isang mandatoryong elemento.

Anong mga epekto ang di-dini-disable ng Reduce Motion

Reduce Motion ay nakakaapekto sa parallax effects (paggalaw ng background kapag nakatagilid ang device), animation ng mga transition sa pagitan ng screen (push, slide, fade), scaling ng mga icon kapag pinindot, mga epekto ng mensahe (SMS bubbles), loading animation (spinner, skeleton, progress bar animation), parallax sa mga laro at web parallax scrolling effects. Ang mga static na imahe at video ay hindi apektado.

Sino ang nangangailangan ng Reduce Motion

Ang pangunahing audience ng Reduce Motion — mga taong may vestibular disorders (Meniere's disease, labyrinthitis, BPPV), migraine (lalo na may aura), kinetosis (pagkahilo sa biyahe) at ilang anyo ng epilepsy. Ang function ay kapaki-pakinabang din para sa mga matatandang user — ang mga pagbabagong nauugnay sa edad sa vestibular apparatus ay nagpapataas ng sensitivity sa paggalaw, at para sa mga user na may ADHD — ang mga gumagalaw na elemento ay nakakaabala sa pagbabasa.

Reduce Motion sa iOS: setting at mga system effect

Sa iOS ang Reduce Motion ay nasa Settings > Accessibility > Motion at may kasamang tatlong opsyon: Reduce Motion (pangunahing switch), Auto-Play Message Effects (awtomatikong pag-play ng mga epekto ng iMessage) at Auto-Play Video Previews (awtomatikong pag-play ng mga video sa App Store). Ang Reduce Motion ay pinakamakapangyarihan: dini-disable nito ang parallax ng wallpaper, animation ng pagbubukas ng app (zoom), mga transition sa pagitan ng screen (pinapalitan ng cross-fade ang push) at mga epekto ng icon sa home screen.

Sa teknikal na paraan, iOS ay nag-iimplementa ng Reduce Motion sa antas ng UIKit sa pamamagitan ng UIView animations at UIViewControllerAnimatedTransitioning. Kapag naka-enable ang setting, ang UIView.animate na may tagal > 0 ay binabawasan sa 0.01 sec, at ang UIViewController.transitionDuration ay nagbabalik ng 0. Para sa parallax, dini-disable ng iOS ang UIInterpolatingMotionEffect sa UIWindow. Maaaring suriin ng developer ang status sa pamamagitan ng UIAccessibility.isReduceMotionEnabled.

Pagsusuri ng Reduce Motion sa iOS app

Maaaring iakma ng developer ang animation sa iOS para sa Reduce Motion: palitan ang mga kumplikadong transition ng fade effects, i-disable ang parallax sa mga custom na UI component at paikliin ang tagal ng mga animation. Ang SwiftUI ay nagbibigay ng espesyal na modifier na .animation(nil) kapag aktibo ang reduceMotion.

import UIKit

class MotionManager {

    // Sinusuri ang status ng Reduce Motion
    static var isReduceMotionEnabled: Bool {
        return UIAccessibility.isReduceMotionEnabled
    }

    // Ligtas na animation na isinasaalang-alang ang 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 para sa 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 }
    }
}

// Pag-subscribe sa pagbabago ng Reduce Motion
NotificationCenter.default.addObserver(
    self,
    selector: #selector(motionStatusChanged),
    name: UIAccessibility.reduceMotionStatusDidChangeNotification,
    object: nil
)

Ang klase na MotionManager ay sumusuri ng isReduceMotionEnabled at ini-akma ang tagal ng animation: kapag aktibo ang Reduce Motion, ang tagal ay binabawasan sa 0.01 sec (praktikal na instant). Ang SwiftUI modifier na .animation(nil) ay ganap na nagdi-disable ng animation kapag reduceMotion == true. Ang pag-subscribe sa reduceMotionStatusDidChangeNotification ay nagpapahintulot ng dynamic na pagpalit ng animation nang hindi ni-re-reload ang app.

Auto-Play Message Effects sa iMessage

Isang hiwalay na opsyon sa iOS — Auto-Play Message Effects — ay kumokontrol sa pag-play ng mga epekto sa iMessage: balloon animation, confetti, lasers at fireworks. Kapag naka-enable ang Reduce Motion, ang mga epekto ng iMessage ay awtomatikong dini-disable. Maaaring suriin ng developer ang opsyon na ito sa pamamagitan ng UIAccessibility.isReduceMotionEnabled — walang hiwalay na API para sa Message Effects, ang mga ito ay nakatali sa pangkalahatang setting.

Alisin ang animation sa Android: Developer Options at Accessibility

Sa Android ang setting na "Alisin ang animation" ay matatagpuan sa dalawang lugar: Settings > Accessibility > Alisin ang animation (para sa mga accessibility setting) at Developer Options > Animation scale (para sa mga developer). Ang bersyon ng accessibility ay nagdi-disable ng lahat ng system animation, kabilang ang mga transition sa pagitan ng screen, animation ng pagbubukas ng app at mga epekto ng pag-load. Ang Developer Options ay nagpapahintulot na bawasan ang scale sa 0.5x, 0.1x o ganap na i-disable.

Sa teknikal na paraan, Android ay nag-iimplementa ng pag-disable ng animation sa pamamagitan ng mga system property: window_animation_scale, transition_animation_scale at animator_duration_scale. Sa accessibility setting, lahat ng tatlo ay nakakakuha ng value na 0. Ang system Launcher at system apps ay sumusuri sa mga value na ito. Para sa mga third-party na app, inirerekomenda ng Android ang paggamit ng Jetpack Compose at View system, na awtomatikong nagbabasa ng system setting sa pamamagitan ng AnimationScaleObserver.

Pagsusuri sa Android app

Maaaring suriin ng developer ang status ng animation sa Android sa pamamagitan ng Settings.Global at iakma ang UI. Ang Jetpack Compose ay nagbibigay ng AnimationScaleObserver para sa awtomatikong pag-akma. Ang pangunahing value — animator_duration_scale: kung 0, ang animation ay ganap na naka-disable.

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 {

    // Sinusuri ang pag-disable ng animation
    fun isAnimationDisabled(context: Context): Boolean {
        return try {
            Settings.Global.getFloat(
                context.contentResolver,
                Settings.Global.ANIMATOR_DURATION_SCALE
            ) == 0f
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Pagmamasid sa pagbabago ng animation (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 na isinasaalang-alang ang mga setting
@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 na may animation
}

Ang klase na AndroidMotionHelper ay sumusuri ng ANIMATOR_DURATION_SCALE sa pamamagitan ng Settings.Global, nagbibigay ng ContentObserver para sa pagsubaybay ng mga pagbabago at nagpapahintulot sa mga Jetpack Compose animation na umakma: kapag naka-disable ang animation, durationMillis = 0 (instant application). Para sa View system, gamitin ang ViewPropertyAnimator.withLayer() at suriin ang isAnimationDisabled() bago simulan ang animation.

Pagkakaiba sa pagitan ng Accessibility at Developer Options

Ang accessibility setting na "Alisin ang animation" sa Android — ang tanging paraan para sa ordinaryong user na i-disable ang animation. Ang Developer Options ay para lamang sa mga developer at maaaring itago. Ang accessibility setting ay garantisadong maipapasa sa lahat ng app sa pamamagitan ng system API. Ang developer ay dapat sumangguni sa AccessibilityManager, hindi sa Developer Options.

CSS prefers-reduced-motion: media function para sa web

Ang CSS media function na prefers-reduced-motion ay nagpapahintulot sa mga web developer na i-disable o palitan ang animation kapag naka-enable ng user ang Reduce Motion sa operating system. Ang browser ay nagpapasa ng value na reduce kapag aktibo ang system setting, no-preference — kung hindi nabago ang setting. Sinusuportahan ng lahat ng modernong browser mula noong 2020: Chrome 74+, Safari 10.3+, Firefox 64+, Edge 79+.

Rekomendasyon ng MDN at W3C — palaging itakda ang prefers-reduced-motion: reduce kasama ng mga animation. Ang user na naka-enable ang Reduce Motion ay hindi dapat makakita ng pulsation, parallax, auto-play ng mga carousel at skeleton loading. Sa halip na animation, maaaring magpakita ng static na content o gumamit ng CSS transition na may minimal na tagal. Nasa ibaba ang halimbawa ng kumpletong adaptasyon.

Pag-aangkop ng web page sa pamamagitan ng prefers-reduced-motion

Sa prefers-reduced-motion: reduce ang web page ay dapat: i-disable ang CSS animations (@keyframes), palitan ang CSS transitions ng instant na pagbabago, ihinto ang JavaScript animations (requestAnimationFrame), i-disable ang parallax scrolling, ihinto ang mga carousel at slider, i-disable ang skeleton effects at palitan ang spinner ng static na indicator.

/* Mga pangunahing animation (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: dini-disable natin ang lahat */
@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; }
}

Sa halimbawang CSS ginamit ang global animation reset sa prefers-reduced-motion: reduce: lahat ng animation at transition ay nakakakuha ng duration 0.01ms at iteration-count 1. Hiwalay na na-override ang spinner (static na border), skeleton (grey na background na walang flicker), parallax (naka-disable) at carousel (scroll-behavior: auto sa halip na smooth). Ang universal selector * — pananggalang para sa lahat ng elemento.

JavaScript detection ng prefers-reduced-motion

Para sa JavaScript ay available ang matchMedia('(prefers-reduced-motion: reduce)').matches. Kung true — huwag magpatakbo ng mga animation sa pamamagitan ng requestAnimationFrame, setInterval o Web Animations API. Halimbawa: ang slider na may reduceMotion ay hindi umiikot nang awtomatiko, sa pamamagitan lamang ng mga button. Ang mga library na GSAP, Framer Motion at Anime.js ay sumusuporta sa pagsusuring ito sa pamamagitan ng kanilang accessibility options.

WCAG 2.2: animation mula sa interaction at criterion 2.3.3

Ang WCAG 2.2 (2023) ay nagpakilala ng bagong criterion 2.3.3 Animation from Interactions (level AAA): kung ang animation ay na-trigger ng interaction ng user (click, scroll, hover), dapat itong ma-disable o hindi lalampas ng 5 segundo. Ang animation na hindi nauugnay sa interaction (loading spinner, progress bar) ay hindi sakop ng criterion na ito. Para sa level AA, sapat na ang animation ay hindi lamang ang paraan ng paghahatid ng impormasyon.

Ang criterion 2.3.3 ay idinagdag pagkatapos ng maraming reklamo tungkol sa motion sickness mula sa parallax scrolling at "pull-to-refresh" animation. W3C ay nagrerekomenda sa lahat ng site at app: huwag i-animate ang mga elemento nang higit sa 5 segundo, magbigay ng switch para i-disable ang animation (sa pamamagitan ng control panel o prefers-reduced-motion), huwag gumamit ng mga pumipintig at kumikislap na elemento (mapanganib para sa epilepsy).

Paano sumunod sa WCAG 2.2 para sa animation

Para sa pagsunod sa WCAG 2.2 ang developer ay dapat: suriin ang prefers-reduced-motion at i-disable ang animation kapag aktibo ang setting, itakda ang maximum na tagal ng animation sa 5 segundo (kung hindi maaaring i-disable ang animation), magbigay ng UI switch para sa animation sa mga setting ng app, huwag gumamit ng parallax effects bilang tanging paraan ng navigation at mag-test na may naka-enable na Reduce Motion sa lahat ng browser at device.

• Suriin ang prefers-reduced-motion — mandatory para sa lahat ng website na may CSS/JS animation
• Maximum na 5 segundo — ang animation mula sa interaction ay hindi dapat tumagal nang mas matagal (criterion 2.3.3 AAA)
• UI switch — ang app ay dapat magkaroon ng opsyon na i-disable ang animation sa mga setting
• Walang parallax navigation — ang content ay hindi dapat ma-access lamang sa pamamagitan ng parallax scrolling

Mga tool sa pag-test ng Reduce Motion

Para sa pag-test ng gawi ng app na may Reduce Motion gamitin ang: iOS Simulator (i-enable ang Reduce Motion sa Settings > Accessibility), Android Emulator (i-enable ang "Alisin ang animation"), Chrome DevTools (Rendering > Emulate CSS media feature prefers-reduced-motion), web inspector ng Safari (i-enable ang Reduce Motion sa macOS System Preferences > Accessibility > Display). Suriin na ang content ay nananatiling accessible at nababasa nang walang animation.