موبائل ایپس میں Reduce Motion: جوہر اور حرکت کم کرنے کی ترتیبات

رسائی میں Reduce Motion کیا ہے؟

Reduce Motion — سسٹم کی ترتیب جو آپریٹنگ سسٹم، براؤزر اور ایپس کو ہدایت دیتی ہے کہ حرکت، نقل و حرکت، پیمائش اور پیرالاکس کے اثرات کم سے کم کریں یا مکمل بند کر دیں۔ یہ خصوصیت ویسٹیبلر عوارض والے لوگوں کے لیے بنائی گئی ہے، جن میں انٹرفیس کے حرکت پذیر عناصر متلی، چکر، بھٹکن اور مائگرین پیدا کرتے ہیں۔

اندرونی کان کا ویسٹیبلر نظام توازن کے احساس اور خلا میں سمت شناسی کا ذمہ دار ہے۔ جب آنکھیں اسکرین پر حرکت دیکھتی ہیں لیکن ویسٹیبلر عضو جسم کی متعلقہ نقل کو محسوس نہیں کرتا تو حسی تصادم پیدا ہوتا ہے۔ یہ تصادم خود مختار ردعمل شروع کرتا ہے: متلی، سرد پسینہ، چکر۔ ویسٹیبلر ڈس آرڈر ایسوسی ایشن کے مطابق 40 سال سے زائد عمر کے تقریباً 35% لوگ انٹرفیس میں حرکت کے اثرات سے تکلیف محسوس کرتے ہیں۔

Reduce Motion اور حرکت کو آسانی سے بند کرنے کے درمیان بنیادی فرق سسٹم کی سطح ہے۔ فعال ہونے پر یہ ترتیب OS API یا CSS میڈیا فنکشن prefers-reduced-motion کے ذریعے تمام ایپس اور ویب سائٹس تک پہنچتی ہے۔ ڈویلپر کو اندازہ لگانے کی ضرورت نہیں کہ صارف حرکت چاہتا ہے یا نہیں — OS خود بتا دیتا ہے۔ یہ ترقی پسند اضافہ (progressive enhancement) کے نقطہ نظر کا حصہ ہے: حرکت ایک بہتری ہے، لازمی عنصر نہیں۔

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 کے مطابق ڈھال سکتا ہے: پیچیدہ منتقلیوں کو fade اثرات سے بدل سکتا ہے، حسب ضرورت 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 حرکت بند کرنے کو سسٹم پراپرٹیز کے ذریعے نافذ کرتا ہے: window_animation_scale، transition_animation_scale اور animator_duration_scale۔ رسائی کی ترتیب پر تینوں کو قدر 0 ملتی ہے۔ سسٹم لانچر اور سسٹم ایپس ان اقدار کو جانچتی ہیں۔ تیسری پارٹی کی ایپس کے لیے 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 فعال کریں)۔ یقینی بنائیں کہ مواد حرکت کے بغیر قابل رسائی اور پڑھنے کے قابل رہتا ہے۔