रिसोर्स · 66
एनिमेशन: कम मोशन, पॉज़ और समझ को वेरिफ़ाई करें
मोशन की इन्वेंटरी लें, कम बिहेवियर ऑफ़र करें और टेस्ट करें कि एनिमेशन के बिना प्रोग्रेस, स्टेट और नेविगेशन समझ में आ रहे हैं।
अपडेटेड · 6 min
यह गाइड क्या पाने में मदद करती है
- इन्वेंट्री ट्रिगर
- कम किया गया बिहेवियर डिफाइन करें
- अलग WCAG क्राइटेरिया
- सभी इम्प्लीमेंटेशन को टेस्ट करें
जल्दी से चेक करें
- क्या कम मोशन सभी एनिमेशन को रोकता है?
- क्या क्राइटेरिया 2.3.3 लेवल AA है?
- क्या ग्लोबल CSS रूल काफी है?
स्टेप-बाय-स्टेप तरीका
- 1
इन्वेंट्री ट्रिगर
ऑटोमैटिक, इंटरैक्शन-ट्रिगर और स्क्रॉल-लिंक्ड मोशन की लिस्ट बनाएं। स्टेट की जानकारी को डेकोरेशन से अलग करें। JavaScript एनिमेशन, वीडियो और एम्बेडेड एलिमेंट्स को भी देखें।
डिलीवरेबल: इफेक्ट्स और पर्पस रजिस्टर।
- 2
कम किया गया बिहेवियर डिफाइन करें
प्रेफरेंस-रिड्यूस्ड-मोशन गैर-ज़रूरी मोशन को कम करने की इच्छा का सिग्नल देता है। जानकारी और कंट्रोल्स को बनाए रखते हुए एक स्टैटिक या शांत विकल्प दें। बड़े ट्रांसलेशन को किसी दूसरे ध्यान भटकाने वाले इफ़ेक्ट से बदलने से बचें।
डिलीवरेबल: हर कम्पोनेंट के लिए कम बिहेवियर।
- 3
अलग WCAG क्राइटेरिया
इंटरैक्शन-एनिमेशन क्राइटेरिया 2.3.3 लेवल AAA है। लेवल A क्राइटेरिया 2.2.2, दूसरे मामलों के साथ, कुछ ऑटोमैटिक मूवमेंट्स को कवर करता है जो दूसरे कंटेंट के साथ पांच सेकंड से ज़्यादा समय तक चलते हैं, जब तक कि ज़रूरी न हो। लागू क्राइटेरिया की शर्तें देखें।
डिलीवरेबल: हर इफ़ेक्ट के लिए क्राइटेरिया और कंट्रोल्स।
- 4
सभी इम्प्लीमेंटेशन को टेस्ट करें
लोड करने से पहले और सेशन के दौरान प्रेफरेंस को एम्युलेट करें। स्टाइल्स, स्क्रिप्ट्स और प्रोग्रामेटिक स्क्रॉलिंग को देखें। अगर स्टेट एनिमेशन पूरा होने पर निर्भर करता है, तो एनिमेशन हटाने पर भी भरोसेमंद नतीजा पक्का करें।
डिलीवरेबल: कोल्ड-लोड, लाइव-चेंज और फ़ाइनल-स्टेट ट्रायल।
- 5
जानकारी और कंट्रोल सुरक्षित रखें।
दोनों मोड में रीडिंग, कीबोर्ड और एरर फ़ीडबैक का अभ्यास करें। प्रभावित ऑटोमैटिक मोशन के लिए, रीडिंग के दौरान पॉज़, स्टॉप या हाइड और स्टेबिलिटी टेस्ट करें। हर ज़रूरी एनिमेशन को लेबल करने के बजाय एक्सेप्शन को डॉक्यूमेंट करें।
डिलीवरेबल: सबूत और लिमिटेशन।
दोबारा इस्तेमाल होने वाली वर्कशीट
अपने ऑथराइज़्ड ऑब्ज़र्वेशन के साथ पूरा करें। ये फ़ील्ड एक वर्किंग टेम्पलेट हैं, देखे गए नतीजे नहीं।
| फ़ील्ड | रिकॉर्ड करने के लिए जानकारी |
|---|---|
| इफ़ेक्ट | ट्रिगर, ड्यूरेशन और जानकारी |
| अल्टरनेटिव | रिड्यूस्ड वर्शन और फ़ाइनल स्टेट |
| क्राइटेरिया | लेवल, कंडीशंस और कंट्रोल |
| ट्रायल | प्रेफरेंस, कीबोर्ड, रिज़ल्ट और लिमिट |
काल्पनिक काम का उदाहरण
उदाहरण वाली स्थिति
काल्पनिक उदाहरण: एक पैनल तभी एक्टिव होता है जब उसका ट्रांज़िशन पूरा हो जाता है।
फैसला और उम्मीद का सबूत
रिड्यूस्ड-मोड एक्सेप्टेंस वेट दिखाता है; कॉम्पोनेंट एनिमेशन ड्यूरेशन पर निर्भर किए बिना अपना स्टेट चेंज पूरा करता है।
मैकेनिज़्म में अंतर बताएं
| मैकेनिज़्म | मकसद | वेरिफ़िकेशन या लिमिटेशन |
|---|---|---|
| कम-मोशन वाली पसंद | सिस्टम चॉइस के हिसाब से एडजस्ट करें | स्क्रिप्ट भी चेक करें |
| पॉज़ कंट्रोल | प्रभावित ऑटोमैटिक मोशन को कंट्रोल करें | इसे कीबोर्ड से चलने लायक बनाएं |
| स्टैटिक स्टेट | बिना मोशन के जानकारी बनाए रखें | प्रोग्रेस या एरर फ़ीडबैक न हटाएं |
मैनेजमेंट इंडिकेटर
| इंडिकेटर | यह क्या मापता है | पहला एक्शन |
|---|---|---|
| अडैप्टेड इफ़ेक्ट | वेरिफाइड अल्टरनेटिव के साथ मोशन | एम्बेड और स्क्रॉलिंग शामिल करें |
| बचाए गए टास्क | कम मोड में पूरी की गई जर्नी | एनिमेशन पर निर्भर स्टेट की जांच करें |
| काम करने वाले कंट्रोल | असल में असरदार पॉज़ या बंद करें | रेज़्यूमे और कीबोर्ड चेक करें |
आम गलतियाँ
- स्क्रिप्ट भी चेक करें
- इसे कीबोर्ड से चलने लायक बनाएं
- प्रोग्रेस या एरर फ़ीडबैक न हटाएं
अक्सर पूछे जाने वाले सवाल
क्या कम मोशन सभी एनिमेशन को रोकता है?
नहीं। यह एक पसंद बताता है; एक सही अडैप्टेशन चुनें और ज़रूरी जानकारी बनाए रखें।
क्या क्राइटेरिया 2.3.3 लेवल AA है?
नहीं, यह AAA है। ऑटोमैटिक मोशन या फ़्लैशिंग पर दूसरे क्राइटेरिया लागू हो सकते हैं।
क्या ग्लोबल CSS रूल काफी है?
यह कई इफ़ेक्ट्स को कम कर सकता है लेकिन स्क्रिप्ट्स, वीडियोज़ या इंटीग्रेशन्स को कंट्रोल नहीं कर सकता है। असली कॉम्पोनेंट्स को टेस्ट करें।
ऑफ़िशियल रेफ़रेंस
रेफ़रेंस इस तरीके को सपोर्ट करते हैं। अपने कॉन्टेक्स्ट के हिसाब से चेक को एडजस्ट करें; वे सर्टिफ़िकेशन नहीं हैं। ओरिजिनल रेफ़रेंस टाइटल और सोर्स डॉक्यूमेंट दूसरी भाषा में हो सकते हैं।
संदर्भ जाँच की तारीख .
