মোবাইল অ্যাপে 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 UIKit স্তরে UIView animations এবং UIViewControllerAnimatedTransitioning-এর মাধ্যমে Reduce Motion বাস্তবায়ন করে। সেটিং চালু থাকলে, > 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 চালু করুন)। নিশ্চিত করুন কনটেন্ট অ্যানিমেশন ছাড়া অ্যাক্সেসযোগ্য ও পড়ার উপযোগী থাকে।