सुलभ गति: अर्थ खोए बिना प्राथमिकता-कम-गति के लिए डिज़ाइन करना
गति को कैसे डिज़ाइन करें जो कम-गति सेटिंग्स और वेस्टिबुलर विकारों का सम्मान करता है: WCAG को क्या चाहिए, क्या हटाना है, क्या रखना है और कैसे परीक्षण करना है।
कोर टेकअवे
जब कोई उपयोगकर्ता धीमी गति को चालू करता है, तो प्रत्येक एनीमेशन का अर्थ रखें लेकिन गति को हटा दें: स्लाइड, ज़ूम और लंबन को छोटे फ़ेड या त्वरित परिवर्तनों से बदलें, ऑटो-प्लेइंग लूप बंद करें, और कभी भी किसी चीज़ को संप्रेषित करने के लिए केवल गति पर निर्भर न रहें। वेब पर, प्रेफरेंस-रिड्यूस्ड-मोशन मीडिया क्वेरी के साथ सेटिंग का पता लगाएं।
यह क्यों मायने रखती है
कुछ लोगों के लिए, स्क्रीन पर गति स्वाद का विषय नहीं है। W3C नोट करता है कि एनीमेशन वेस्टिबुलर विकारों को ट्रिगर कर सकता है, जिसमें मतली, माइग्रेन और गंभीर मामलों में, ठीक होने के लिए बिस्तर पर आराम की आवश्यकता होती है। ऑपरेटिंग सिस्टम लोगों को कम गति के बारे में पूछने देते हैं, और वेब पर उस अनुरोध को प्रेफरेंस-रिड्यूस्ड-मोशन मीडिया क्वेरी के रूप में प्रदर्शित किया जाता है। उपयोगकर्ता द्वारा सेटिंग चालू करने पर इसका मान कम हो जाता है।
WCAG क्या मांगता है
दो WCAG सफलता मानदंड गति को कवर करते हैं। 2.2.2 रोकें, रोकें, छिपाएँ गति पर लागू होता है जो स्वचालित रूप से शुरू होती है, जैसे हिंडोला और लूपिंग एनीमेशन, और इसे रोकने, रोकने या छिपाने के लिए एक तरीके की आवश्यकता होती है। 2.3.3 इंटरैक्शन से एनीमेशन (स्तर एएए) उपयोगकर्ता इंटरैक्शन द्वारा ट्रिगर गति पर लागू होता है, और अनावश्यक एनीमेशन से बचने, इसे बंद करने के लिए नियंत्रण की पेशकश करने, या ऑपरेटिंग सिस्टम की रिड्यूस-मोशन सेटिंग का उपयोग करने का सुझाव देता है। यहां तक कि जहां एएए की आवश्यकता नहीं है, वहां भी इसका पालन करना अच्छा अभ्यास है।
आंदोलन हटाओ, अर्थ रखो
गति कम होने का मतलब कोई प्रतिक्रिया नहीं है। एक बटन दबाने वाले उपयोगकर्ता को अभी भी यह जानने की जरूरत है कि यह काम कर रहा है। लक्ष्य राज्य को बदलते रहना और यात्रा को छोड़ना है।
- हटाएं या कम करें: बड़ी स्लाइड, ज़ूम, लंबन, स्क्रॉल-लिंक्ड मूवमेंट, स्पिनिंग, ऑटो-प्लेइंग लूप और बैकग्राउंड वीडियो।
- रखें: रंग और अपारदर्शिता परिवर्तन, फोकस संकेतक, लघु अवस्था परिवर्तन, प्रगति की जानकारी।
- बदलें: संक्षिप्त क्रॉस-फ़ेड या त्वरित परिवर्तन के साथ पृष्ठ और पैनल परिवर्तन।
- कभी नहीं: किसी त्रुटि, परिवर्तन या नई वस्तु को दिखाने के एकमात्र तरीके के रूप में गति का उपयोग करें।
इसे क्रियान्वित कर रहे हैं
वेब पर, गैर-आवश्यक गति को @media (prefers-reduced-motion: no-preference) में लपेटें, या इसे @media (prefers-reduced-motion: low) के अंदर ओवरराइड करें। JavaScript में, window.matchMedia('(prefers-reduced-motion: low)') पढ़ें और परिवर्तनों को सुनें। मूल प्लेटफ़ॉर्म समान सेटिंग प्रदर्शित करते हैं: SwiftUI, UIKit और Android सभी आपको इसे जांचने देते हैं। यदि आपके डिज़ाइन सिस्टम में मोशन टोकन हैं, तो प्रत्येक के लिए एक कम संस्करण को परिभाषित करें ताकि प्रत्येक घटक समान तरीके से व्यवहार करे।
परीक्षण
अपने ऑपरेटिंग सिस्टम में कम गति चालू करें और प्रत्येक कुंजी प्रवाह पर चलें। जांचें कि कोई भी महत्वपूर्ण चीज़ खो न जाए, कोई लूप स्वचालित रूप से शुरू न हो जाए, और स्क्रॉलिंग सामग्री को स्क्रॉल से आगे न ले जाए। ब्राउज़र डेवलपर टूल भी सेटिंग का अनुकरण कर सकते हैं।
उत्पादन कार्यान्वयन स्निपेट
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });याद रखने योग्य कुंजी Principle
- गति कुछ लोगों को शारीरिक रूप से बीमार बना सकती है; सेटिंग का सम्मान करें
- यात्रा, ज़ूम, लंबन और ऑटो-प्ले हटाएं; राज्य परिवर्तन और फीडबैक रखें
- WCAG 2.2.2 स्वचालित गति को कवर करता है; 2.3.3 अंतःक्रिया से गति को कवर करता है
- प्रेफरेंस-रिड्यूस्ड-मोशन और प्रत्येक मूल प्लेटफ़ॉर्म पर सेटिंग का पता लगाएं
- प्रत्येक मोशन टोकन के लिए एक छोटा संस्करण डिज़ाइन करें
अक्सर पूछे जाने वाले प्रश्नों
स्रोत
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN वेब डॉक्स
- Motion — एप्पल मानव इंटरफ़ेस दिशानिर्देश