मोबाइल ऐप में Reduce Motion: सार और गति-कम करने की सेटिंग्स

एक्सेसिबिलिटी में Reduce Motion क्या है?

Reduce Motion — एक सिस्टम सेटिंग है जो ऑपरेटिंग सिस्टम, ब्राउज़र और ऐप को निर्देश देती है कि एनिमेशन, हलचल, स्केलिंग और पैरलैक्स इफ़ेक्ट को न्यूनतम करें या पूरी तरह बंद करें। यह सुविधा वेस्टिबुलर विकारों वाले लोगों के लिए बनाई गई है, जिनमें हिलते हुए इंटरफ़ेस तत्व मतली, चक्कर, भटकाव और माइग्रेन पैदा करते हैं।

आंतरिक कान की वेस्टिबुलर प्रणाली संतुलन की भावना और अंतरिक्ष में अभिविन्यास के लिए ज़िम्मेदार है। जब आँखें स्क्रीन पर हलचल देखती हैं और वेस्टिबुलर तंत्र शरीर की संगत गति को महसूस नहीं करता, तो संवेदी टकराव पैदा होता है। यह टकराव स्वायत्त प्रतिक्रिया शुरू करता है: मतली, ठंडा पसीना, चक्कर। वेस्टिबुलर डिसऑर्डर एसोसिएशन के अनुसार, 40 वर्ष से अधिक के लगभग 35% लोग इंटरफ़ेस में मोशन इफ़ेक्ट से परेशानी महसूस करते हैं।

Reduce Motion और साधारण एनिमेशन बंद करने के बीच मुख्य अंतर सिस्टम स्तर है। चालू करने पर यह सेटिंग OS API या CSS मीडिया फ़ंक्शन prefers-reduced-motion के माध्यम से सभी ऐप और वेबसाइटों तक पहुँचती है। डेवलपर को अनुमान नहीं लगाना पड़ता कि उपयोगकर्ता एनिमेशन चाहता है या नहीं — OS खुद बता देता है। यह प्रोग्रेसिव एन्हांसमेंट दृष्टिकोण का हिस्सा है: एनिमेशन एक सुधार है, अनिवार्य तत्व नहीं।

Reduce Motion कौन-कौन से इफ़ेक्ट बंद करता है

Reduce Motion पैरलैक्स इफ़ेक्ट (डिवाइस झुकाने पर बैकग्राउंड का खिसकना), स्क्रीन ट्रांज़िशन एनिमेशन (push, slide, fade), टैप पर आइकन स्केलिंग, मैसेज इफ़ेक्ट (SMS बबल), लोडिंग एनिमेशन (स्पिनर, स्केलेटन, प्रोग्रेस बार एनिमेशन), गेम में पैरलैक्स और वेब के पैरलैक्स स्क्रॉलिंग इफ़ेक्ट को प्रभावित करता है। स्थिर छवियाँ और वीडियो प्रभावित नहीं होते।

Reduce Motion की ज़रूरत किसे है

Reduce Motion का मुख्य लक्ष्य वेस्टिबुलर विकार (मेनिएर रोग, लेबिरिंथाइटिस, BPPV), माइग्रेन (विशेषकर ऑरा वाला), काइनेटोसिस (यात्रा में मोशन सिकनेस) और कुछ प्रकार के एपिलेप्सी वाले लोग हैं। यह सुविधा बुज़ुर्ग उपयोगकर्ताओं के लिए भी उपयोगी है — वेस्टिबुलर तंत्र में उम्र से जुड़े बदलाव गति के प्रति संवेदनशीलता बढ़ाते हैं — और ADHD वाले उपयोगकर्ताओं के लिए, क्योंकि हिलते तत्व पढ़ने से ध्यान भटकाते हैं।

iOS में Reduce Motion: सेटिंग और सिस्टम इफ़ेक्ट

iOS में Reduce Motion Settings > Accessibility > Motion पर मिलता है और इसमें तीन विकल्प शामिल हैं: Reduce Motion (मुख्य स्विच), Auto-Play Message Effects (iMessage इफ़ेक्ट का ऑटो-प्ले) और Auto-Play Video Previews (App Store में वीडियो का ऑटो-प्ले)। Reduce Motion सबसे शक्तिशाली है: यह वॉलपेपर पैरलैक्स, ऐप खोलने का एनिमेशन (ज़ूम), स्क्रीन ट्रांज़िशन (push को cross-fade से बदला जाता है) और होम स्क्रीन पर आइकन इफ़ेक्ट बंद करता है।

तकनीकी रूप से iOS Reduce Motion को UIKit स्तर पर UIView animations और UIViewControllerAnimatedTransitioning के माध्यम से लागू करता है। सेटिंग चालू होने पर, > 0 अवधि वाला UIView.animate 0.01 सेकंड तक घट जाता है, और UIViewController.transitionDuration 0 लौटाता है। पैरलैक्स के लिए iOS UIWindow पर UIInterpolatingMotionEffect बंद कर देता है। डेवलपर UIAccessibility.isReduceMotionEnabled के माध्यम से स्थिति जाँच सकता है।

iOS ऐप में Reduce Motion की जाँच

डेवलपर iOS में एनिमेशन को Reduce Motion के अनुकूल बना सकता है: जटिल ट्रांज़िशन को फ़ेड इफ़ेक्ट से बदलना, कस्टम UI घटकों में पैरलैक्स बंद करना और एनिमेशन की अवधि घटाना। SwiftUI reduceMotion सक्रिय होने पर विशेष .animation(nil) मॉडिफ़ायर प्रदान करता है।

import UIKit

class MotionManager {

    // Reduce Motion की स्थिति की जाँच
    static var isReduceMotionEnabled: Bool {
        return UIAccessibility.isReduceMotionEnabled
    }

    // 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 — 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 परिवर्तन की सदस्यता
NotificationCenter.default.addObserver(
    self,
    selector: #selector(motionStatusChanged),
    name: UIAccessibility.reduceMotionStatusDidChangeNotification,
    object: nil
)

MotionManager क्लास isReduceMotionEnabled की जाँच करती है और एनिमेशन की अवधि को अनुकूलित करती है: Reduce Motion सक्रिय होने पर अवधि 0.01 सेकंड (व्यावहारिक रूप से तुरंत) हो जाती है। SwiftUI का .animation(nil) मॉडिफ़ायर reduceMotion == true होने पर एनिमेशन पूरी तरह बंद कर देता है। reduceMotionStatusDidChangeNotification पर सब्सक्रिप्शन ऐप को पुनः लॉन्च किए बिना एनिमेशन को गतिशील रूप से बदलने की अनुमति देता है।

iMessage में Auto-Play Message Effects

iOS का एक अलग विकल्प — Auto-Play Message Effects — iMessage में इफ़ेक्ट के प्लेबैक को नियंत्रित करता है: बैलून एनिमेशन, कन्फ़ेटी, लेज़र और आतिशबाज़ी। Reduce Motion चालू होने पर iMessage इफ़ेक्ट स्वचालित रूप से बंद हो जाते हैं। डेवलपर इस विकल्प को UIAccessibility.isReduceMotionEnabled के माध्यम से जाँच सकता है — Message Effects के लिए कोई अलग API नहीं है; वे सामान्य सेटिंग से जुड़े हैं।

Android में एनिमेशन हटाएँ: डेवलपर विकल्प और एक्सेसिबिलिटी

Android में “एनिमेशन हटाएँ” सेटिंग दो जगहों पर मिलती है: Settings > Accessibility > एनिमेशन हटाएँ (एक्सेसिबिलिटी सेटिंग के लिए) और डेवलपर विकल्प > एनिमेशन स्केल (डेवलपर के लिए)। एक्सेसिबिलिटी संस्करण सभी सिस्टम एनिमेशन बंद करता है, जिसमें स्क्रीन ट्रांज़िशन, ऐप खोलने का एनिमेशन और लोडिंग इफ़ेक्ट शामिल हैं। डेवलपर विकल्प स्केल को 0.5x, 0.1x तक घटाने या पूरी तरह बंद करने की अनुमति देते हैं।

तकनीकी रूप से Android एनिमेशन बंद करने को सिस्टम properties के माध्यम से लागू करता है: window_animation_scale, transition_animation_scale और animator_duration_scale। एक्सेसिबिलिटी सेटिंग पर तीनों का मान 0 हो जाता है। सिस्टम Launcher और सिस्टम ऐप इन मानों की जाँच करते हैं। तीसरे पक्ष के ऐप के लिए Android Jetpack Compose और View सिस्टम का उपयोग करने की सलाह देता है, जो AnimationScaleObserver के माध्यम से सिस्टम सेटिंग स्वचालित रूप से पढ़ते हैं।

Android ऐप में जाँच

डेवलपर Android में Settings.Global के माध्यम से एनिमेशन की स्थिति जाँच सकता है और UI को अनुकूलित कर सकता है। Jetpack Compose स्वचालित समायोजन के लिए AnimationScaleObserver प्रदान करता है। मुख्य मान animator_duration_scale है: यदि 0 है, तो एनिमेशन पूरी तरह बंद है।

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 {

    // एनिमेशन बंद होने की जाँच
    fun isAnimationDisabled(context: Context): Boolean {
        return try {
            Settings.Global.getFloat(
                context.contentResolver,
                Settings.Global.ANIMATOR_DURATION_SCALE
            ) == 0f
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // एनिमेशन परिवर्तन का अवलोकन (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 — सेटिंग्स को ध्यान में रखते हुए एनिमेशन
@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
}

AndroidMotionHelper क्लास Settings.Global के माध्यम से ANIMATOR_DURATION_SCALE की जाँच करती है, बदलावों पर नज़र रखने के लिए ContentObserver प्रदान करती है और Jetpack Compose एनिमेशन को अनुकूलित करने की अनुमति देती है: एनिमेशन बंद होने पर durationMillis = 0 (तुरंत लागू)। View सिस्टम के लिए एनिमेशन शुरू करने से पहले ViewPropertyAnimator.withLayer() का उपयोग करें और isAnimationDisabled() की जाँच करें।

एक्सेसिबिलिटी और डेवलपर विकल्पों के बीच अंतर

Android में “एनिमेशन हटाएँ” एक्सेसिबिलिटी सेटिंग एक सामान्य उपयोगकर्ता के लिए एनिमेशन बंद करने का एकमात्र तरीका है। डेवलपर विकल्प केवल डेवलपर के लिए होते हैं और छिपे हो सकते हैं। एक्सेसिबिलिटी सेटिंग सिस्टम API के माध्यम से सभी ऐप तक निश्चित रूप से पहुँचती है। डेवलपर को डेवलपर विकल्पों के बजाय AccessibilityManager पर ही भरोसा करना चाहिए।

CSS prefers-reduced-motion: वेब के लिए मीडिया फ़ंक्शन

CSS मीडिया फ़ंक्शन prefers-reduced-motion वेब डेवलपर को एनिमेशन बंद करने या बदलने की अनुमति देता है जब उपयोगकर्ता ने ऑपरेटिंग सिस्टम में Reduce Motion चालू किया हो। सिस्टम सेटिंग सक्रिय होने पर ब्राउज़र reduce मान भेजता है, और no-preference — यदि सेटिंग नहीं बदली गई हो। यह 2020 से सभी आधुनिक ब्राउज़रों में समर्थित है: Chrome 74+, Safari 10.3+, Firefox 64+, Edge 79+।

MDN और W3C की सलाह — एनिमेशन के साथ हमेशा prefers-reduced-motion: reduce सेट करना। Reduce Motion चालू करने वाले उपयोगकर्ता को धड़कन, पैरलैक्स, ऑटो-प्ले कैरोसेल और स्केलेटन लोडिंग नहीं दिखनी चाहिए। एनिमेशन के बजाय स्थिर सामग्री दिखाई जा सकती है या न्यूनतम अवधि वाला CSS transition उपयोग किया जा सकता है। नीचे पूर्ण अनुकूलन का उदाहरण दिया गया है।

prefers-reduced-motion के माध्यम से वेब पेज का अनुकूलन

prefers-reduced-motion: reduce पर वेब पेज को: CSS एनिमेशन (@keyframes) बंद करने चाहिए, CSS transitions को तुरंत बदलावों से बदलना चाहिए, JavaScript एनिमेशन (requestAnimationFrame) रोकने चाहिए, पैरलैक्स स्क्रॉलिंग बंद करनी चाहिए, कैरोसेल और स्लाइडर रोकने चाहिए, स्केलेटन इफ़ेक्ट बंद करने चाहिए और स्पिनर को स्थिर संकेतक से बदलना चाहिए।

/* बुनियादी एनिमेशन (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: सब कुछ बंद करना */
@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; }
}

CSS उदाहरण में prefers-reduced-motion: reduce पर एनिमेशन का वैश्विक रीसेट उपयोग किया गया है: सभी एनिमेशन और ट्रांज़िशन को 0.01ms अवधि और iteration-count 1 मिलता है। स्पिनर (स्थिर बॉर्डर), स्केलेटन (बिना झिलमिलाहट के ग्रे बैकग्राउंड), पैरलैक्स (बंद) और कैरोसेल (smooth के बजाय scroll-behavior: auto) को अलग से ओवरराइड किया गया है। यूनिवर्सल सेलेक्टर * सभी तत्वों के लिए सुरक्षा जाल है।

prefers-reduced-motion की JavaScript डिटेक्शन

JavaScript के लिए matchMedia('(prefers-reduced-motion: reduce)').matches उपलब्ध है। यदि true है — requestAnimationFrame, setInterval या Web Animations API के माध्यम से एनिमेशन न चलाएँ। उदाहरण: reduceMotion पर स्लाइडर अपने आप नहीं घूमता, केवल बटन से। GSAP, Framer Motion और Anime.js जैसी लाइब्रेरीज़ अपने एक्सेसिबिलिटी विकल्पों के माध्यम से इस जाँच का समर्थन करती हैं।

WCAG 2.2: इंटरैक्शन से होने वाला एनिमेशन और क्राइटेरियन 2.3.3

WCAG 2.2 (2023) ने नया क्राइटेरियन 2.3.3 Animation from Interactions (स्तर AAA) पेश किया: यदि एनिमेशन उपयोगकर्ता के इंटरैक्शन (क्लिक, स्क्रॉल, होवर) से शुरू होता है, तो वह बंद करने योग्य होना चाहिए या 5 सेकंड से अधिक नहीं होना चाहिए। इंटरैक्शन से जुड़ा न होने वाला एनिमेशन (लोडिंग स्पिनर, प्रोग्रेस बार) इस क्राइटेरियन के अंतर्गत नहीं आता। स्तर AA के लिए पर्याप्त है कि एनिमेशन जानकारी देने का एकमात्र तरीका न हो।

क्राइटेरियन 2.3.3 पैरलैक्स स्क्रॉलिंग और “पुल-टू-रिफ़्रेश” एनिमेशन से मोशन सिकनेस की अनेक शिकायतों के बाद जोड़ा गया। W3C सभी साइटों और ऐप को सलाह देता है: तत्वों को 5 सेकंड से अधिक एनिमेट न करें, एनिमेशन बंद करने का स्विच दें (कंट्रोल पैनल या prefers-reduced-motion के माध्यम से), और धड़कते व चमकते तत्वों का उपयोग न करें (एपिलेप्सी के लिए खतरनाक)।

एनिमेशन के लिए WCAG 2.2 का पालन कैसे करें

WCAG 2.2 का पालन करने के लिए डेवलपर को: prefers-reduced-motion की जाँच करनी चाहिए और सेटिंग सक्रिय होने पर एनिमेशन बंद करना चाहिए, एनिमेशन की अधिकतम अवधि 5 सेकंड निर्धारित करनी चाहिए (यदि एनिमेशन बंद नहीं किया जा सकता), ऐप सेटिंग में एनिमेशन का UI स्विच देना चाहिए, पैरलैक्स इफ़ेक्ट को नेविगेशन का एकमात्र तरीका नहीं बनाना चाहिए, और सभी ब्राउज़रों व सभी उपकरणों पर Reduce Motion चालू करके परीक्षण करना चाहिए।

• prefers-reduced-motion की जाँच — CSS/JS एनिमेशन वाली सभी वेबसाइटों के लिए अनिवार्य
• अधिकतम 5 सेकंड — इंटरैक्शन से होने वाला एनिमेशन अधिक नहीं चलना चाहिए (क्राइटेरियन 2.3.3 AAA)
• UI स्विच — ऐप में सेटिंग में एनिमेशन बंद करने का विकल्प होना चाहिए
• कोई पैरलैक्स नेविगेशन नहीं — सामग्री केवल पैरलैक्स स्क्रॉलिंग के माध्यम से उपलब्ध नहीं होनी चाहिए

Reduce Motion परीक्षण उपकरण

Reduce Motion के साथ ऐप व्यवहार का परीक्षण करने के लिए उपयोग करें: iOS Simulator (Settings > Accessibility में Reduce Motion चालू करें), Android Emulator (“एनिमेशन हटाएँ” चालू करें), Chrome DevTools (Rendering > Emulate CSS media feature prefers-reduced-motion), Safari वेब इंस्पेक्टर (macOS System Preferences > Accessibility > Display में Reduce Motion चालू करें)। जाँच करें कि सामग्री एनिमेशन के बिना सुलभ और पठनीय बनी रहे।