ऐनिमेशन और मोशन

क्या आपने कभी कार, नाव या हवाई जहाज़ में यात्रा करते समय, अचानक दुनिया को घूमते हुए महसूस किया है? या आपको इतना तेज़ माइग्रेन हुआ कि फ़ोन या टैबलेट पर "खुशी" देने के लिए बनाए गए ऐनिमेशन की वजह से, अचानक आपकी तबीयत खराब हो गई? या हो सकता है कि आपको हमेशा से ही हर तरह की गति से परेशानी होती हो? ये वेस्टिबुलर डिसऑर्डर के अलग-अलग टाइप के उदाहरण हैं.

40 साल की उम्र तक, 35% से ज़्यादा वयस्कों को किसी न किसी तरह की वेस्टिबुलर डिसफ़ंक्शन की समस्या हो जाती है. इससे कुछ समय के लिए चक्कर आ सकते हैं, माइग्रेन की वजह से वर्टिगो हो सकता है या वेस्टिबुलर सिस्टम से जुड़ी कोई समस्या हो सकती है.

कई लोगों को हिलने-डुलने, पलक झपकाने या स्क्रोल करने वाले कॉन्टेंट से ध्यान भटकता है. इससे उन्हें चक्कर भी आ सकते हैं. ADHD और ध्यान न दे पाने से जुड़ी अन्य समस्याओं वाले लोग, ऐनिमेशन वाले एलिमेंट की वजह से इतने डिस्ट्रैक्ट हो सकते हैं कि वे भूल जाएं कि वे आपकी वेबसाइट या ऐप्लिकेशन पर क्यों आए थे.

इस मॉड्यूल में, हम ऐसे कुछ तरीकों के बारे में जानेंगे जिनसे हर तरह की मूवमेंट से जुड़ी समस्याओं से जूझ रहे लोगों की बेहतर तरीके से मदद की जा सकती है.

फ़्लैशिंग और हिलने-डुलने वाला कॉन्टेंट

एनिमेशन और मोशन बनाते समय, खुद से पूछें कि क्या एलिमेंट की मूवमेंट बहुत ज़्यादा है. उदाहरण के लिए, स्क्रीन पर रंग का तेज़ी से बदलना या तेज़ी से होने वाली हलचल, फ़ोटोसेंसिटिव एपिलेप्सी से पीड़ित लोगों में दौरे पड़ने की वजह बन सकती है. अनुमान के मुताबिक, मिर्गी से पीड़ित 3% लोगों को फ़ोटोसेंसिटिविटी की समस्या होती है. यह समस्या महिलाओं और युवाओं में ज़्यादा आम है.

WCAG के फ़्लैश होने से जुड़े दिशा-निर्देशों में, इन चीज़ों से बचने का सुझाव दिया गया है:

• एक सेकंड में तीन से ज़्यादा बार चमकता है
• सामान्य फ़्लैश और लाल फ़्लैश थ्रेशोल्ड से कम फ़्लैश होते हैं.

ज़्यादा से ज़्यादा, इन फ़्लैश की वजह से वेब पेज का इस्तेमाल नहीं किया जा सकेगा. वहीं, कम से कम, इनकी वजह से बीमारियां हो सकती हैं.

अगर वीडियो में बहुत ज़्यादा हलचल दिखती है, तो यह ज़रूरी है कि आप Photosensitive Epilepsy Analysis Tool (PEAT) का इस्तेमाल करके, उसकी जांच करें. PEAT एक मुफ़्त टूल है. इससे यह पता लगाया जा सकता है कि स्क्रीन पर मौजूद कॉन्टेंट, वीडियो या ऐनिमेशन से दौरे पड़ने की आशंका है या नहीं. PEAT को सभी कॉन्टेंट का आकलन करने की ज़रूरत नहीं है. हालांकि, ऐसे कॉन्टेंट का आकलन किया जाना चाहिए जिसमें बैकग्राउंड के हल्के और गहरे रंगों के बीच तेज़ी से बदलाव होता है. ऐसा सिर्फ़ सुरक्षा के लिए किया जाना चाहिए.

ऐनिमेशन और मोशन के बारे में आपको खुद से यह सवाल भी पूछना चाहिए कि क्या स्क्रीन पर मौजूद कॉन्टेंट या कार्रवाइयों को समझने के लिए, एलिमेंट का हिलना-डुलना ज़रूरी है. अगर यह ज़रूरी नहीं है, तो बनाए जा रहे या डिज़ाइन किए जा रहे एलिमेंट से सभी तरह की हलचल हटा दें. भले ही, वह हलचल बहुत कम हो.

मान लें कि आपको लगता है कि एलिमेंट का हिलना-डुलना ज़रूरी नहीं है, लेकिन इससे उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है. इसके अलावा, अगर किसी अन्य वजह से एलिमेंट के हिलने-डुलने की सुविधा को हटाया नहीं जा सकता. ऐसे में, आपको WCAG के मोशन से जुड़े दिशा-निर्देशों का पालन करना चाहिए. इन दिशा-निर्देशों में बताया गया है कि आपको उपयोगकर्ताओं के लिए, इन चीज़ों को रोकने, बंद करने या छिपाने का विकल्प बनाना होगा: अपने-आप शुरू होने वाले, पांच सेकंड से ज़्यादा समय तक चलने वाले, और पेज के अन्य एलिमेंट का हिस्सा बनने वाले ऐसे एलिमेंट जो ज़रूरी नहीं हैं, लेकिन हिलते-डुलते हैं, पलक झपकते हैं या स्क्रोल करते हैं.

मूवमेंट को रोकना, बंद करना या छिपाना

अपने पेज पर रोकें, बंद करें या छिपाएं का विकल्प जोड़ें, ताकि उपयोगकर्ता संभावित समस्या वाले मोशन ऐनिमेशन को बंद कर सकें. ऐसा स्क्रीन लेवल या एलिमेंट लेवल पर किया जा सकता है.

उदाहरण के लिए, मान लें कि आपके डिजिटल प्रॉडक्ट में कई ऐनिमेशन शामिल हैं. उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, सुलभ JavaScript टॉगल जोड़ें. बटन को "मोशन बंद है" पर टॉगल करने पर, उस स्क्रीन और अन्य सभी स्क्रीन पर ऐनिमेशन रुक जाते हैं.

मीडिया क्वेरी का इस्तेमाल करना

ऐनिमेशन का इस्तेमाल सोच-समझकर करें. साथ ही, उपयोगकर्ताओं को ऐनिमेशन रोकने, बंद करने, और छिपाने के विकल्प दें. इसके अलावा, ऐनिमेशन को बार-बार चलने से रोकें. इसके अलावा, मोशन फ़ोकस करने वाली मीडिया क्वेरी भी जोड़ी जा सकती है. इससे उपयोगकर्ताओं को स्क्रीन पर दिखने वाले कॉन्टेंट के लिए, ज़्यादा विकल्प मिलते हैं.

@prefers-reduced-motion

कलर मॉड्यूल में मौजूद, कलर पर फ़ोकस करने वाली मीडिया क्वेरी की तरह ही, @prefers-reduced-motion मीडिया क्वेरी, ऐनिमेशन से जुड़ी उपयोगकर्ता के ओएस की सेटिंग की जांच करती है.

कोई उपयोगकर्ता, मोशन को कम करने के लिए डिसप्ले की सेटिंग सेट कर सकता है. ये सेटिंग, अलग-अलग ऑपरेटिंग सिस्टम के हिसाब से अलग-अलग होती हैं. इन्हें सकारात्मक या नकारात्मक तरीके से फ़्रेम किया जा सकता है. @prefers-reduced-motion की मदद से, ऐसी साइट डिज़ाइन की जा सकती है जो इन प्राथमिकताओं का पालन करती हो.

macOS और Android पर, उपयोगकर्ता मोशन को कम करने के लिए सेटिंग चालू करता है. macOS पर, कोई उपयोगकर्ता सेटिंग > सुलभता > डिसप्ले में जाकर, मोशन कम करें को सेट कर सकता है. Android की सेटिंग में, ऐनिमेशन हटाएं का विकल्प होता है. Windows पर, इस सेटिंग को ऐनिमेशन दिखाएं के तौर पर दिखाया जाता है. यह सेटिंग डिफ़ॉल्ट रूप से चालू होती है. मोशन को कम करने के लिए, उपयोगकर्ता को यह सेटिंग बंद करनी होगी.

जिन लोगों को मोशन से जुड़ी समस्याएं होती हैं उनके लिए, यह ज़रूरी है कि डब्ल्यूसीएजी 2.0 एए गाइडलाइन में बताए गए पांच सेकंड के थ्रेशोल्ड से कम समय वाले ऐनिमेशन भी सावधानी से इस्तेमाल किए जाएं. सबसे भरोसेमंद तरीका यह है कि जिन लोगों ने मोशन कम करने की सेटिंग को चुना है उन्हें ऐनिमेशन पर पूरा कंट्रोल दिया जाए. इससे वे खास कंट्रोल का इस्तेमाल करके, ऐनिमेशन को शुरू और बंद कर पाएंगे. जैसे, प्ले बटन और पॉज़ बटन.

मूवमेंट के लिए प्रोग्रेसिव एन्हैंसमेंट

डिज़ाइनर और डेवलपर के तौर पर, हमारे पास कई विकल्प होते हैं. इनमें डिफ़ॉल्ट मूवमेंट की स्थितियां और कितना मूवमेंट दिखाना है, यह तय करना शामिल है. मोशन के बारे में दिए गए आखिरी उदाहरण को फिर से देखें.

मान लें कि हमने यह फ़ैसला किया है कि स्क्रीन पर मौजूद कॉन्टेंट को समझने के लिए, ऐनिमेशन ज़रूरी नहीं है. ऐसे में, हम डिफ़ॉल्ट स्थिति को फ़ुल मोशन वर्शन के बजाय, मोशन कम करने वाले ऐनिमेशन पर सेट कर सकते हैं. जब तक उपयोगकर्ता खास तौर पर ऐनिमेशन के लिए नहीं कहते, तब तक ऐनिमेशन बंद रहते हैं.

हम यह अनुमान नहीं लगा सकते कि किस लेवल की गतिविधि से, दौरे, वेस्टिबुलर (कान से जुड़ी समस्या) और अन्य दृष्टि समस्याओं वाले लोगों को परेशानी होगी. स्क्रीन पर थोड़ी सी भी हलचल होने से, चक्कर आ सकते हैं, धुंधला दिख सकता है या इससे भी ज़्यादा गंभीर समस्याएं हो सकती हैं. इसलिए, यहां दिए गए उदाहरण में, हम डिफ़ॉल्ट रूप से कोई ऐनिमेशन नहीं दिखाते हैं.

लेयर वाली मीडिया क्वेरी

अपने उपयोगकर्ताओं को और भी विकल्प देने के लिए, एक से ज़्यादा मीडिया क्वेरी का इस्तेमाल किया जा सकता है. आइए, @prefers-color-scheme, @prefers-contrast, और @prefers-reduced-motion का इस्तेमाल एक साथ करें.

उपयोगकर्ताओं को यह चुनने की अनुमति दें

डिजिटल प्रॉडक्ट में ऐनिमेशन जोड़ने से, उपयोगकर्ताओं को खुशी मिल सकती है. हालांकि, यह याद रखना ज़रूरी है कि कुछ लोगों पर इन डिज़ाइन का असर पड़ेगा. मोशन सेंसिटिविटी किसी को भी हो सकती है. इससे हल्की असहजता से लेकर गंभीर बीमारी या दौरा पड़ सकता है.

उपयोगकर्ता को यह तय करने की अनुमति देने के लिए, कई अलग-अलग टूल इस्तेमाल किए जा सकते हैं कि उसके लिए सबसे अच्छा क्या है. इसके बजाय, यह अनुमान लगाने की कोशिश न करें कि मोशन की मात्रा कितनी ज़्यादा है. उदाहरण के लिए, अपनी साइट या वेब ऐप्लिकेशन में ऐनिमेशन को चालू या बंद करने के लिए, टॉगल जोड़ें. ऐसे टॉगल को डिफ़ॉल्ट रूप से बंद पर सेट करें.